How to add decoration DropdownButton in Flutter

I have a dropdown button as you can see below.

 child: DropdownButton<String>( value: dropDownValue, icon: Icon(Icons.keyboard_arrow_down), iconSize: 15, elevation: 16, style: TextStyle(color: Colors.grey), underline: Container( decoration: ShapeDecoration( shape: RoundedRectangleBorder( side: BorderSide(width: 1.0, style: BorderStyle.solid), borderRadius: BorderRadius.all(Radius.circular(5.0)), ), ), ), onChanged: (String newValue) { setState(() { dropDownValue = newValue; }); }, items: [dropDownValue,...snapshot.data.data] .map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value.name), ); }).toList(), ),

I want to shape it like in the image by using decoration in Container, but i can't shape it the way i want

But right now this is the image I have. How do I add an edge to my dropdown button? Is there a known way for this?

2 Answers

You can copy paste run full code below
You can use DropdownButtonFormField with InputDecoration set fillColor and hintText
code snippet

DropdownButtonFormField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: const BorderRadius.all( const Radius.circular(30.0), ), ), filled: true, hintStyle: TextStyle(color: Colors.grey[800]), hintText: "Name", fillColor: Colors.blue[200]), value: dropDownValue,

working demo

full code

import 'package:flutter/material.dart';
void main() { runApp(MyApp());
}
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( primarySwatch: Colors.blue, visualDensity: VisualDensity.adaptivePlatformDensity, ), home: MyHomePage(title: 'Flutter Demo Home Page'), ); }
}
class MyHomePage extends StatefulWidget { MyHomePage({Key key, this.title}) : super(key: key); final String title; @override _MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> { int _counter = 0; String dropDownValue; List<String> cityList = [ 'Ajman', 'Al Ain', 'Dubai', 'Fujairah', 'Ras Al Khaimah', 'Sharjah', 'Umm Al Quwain' ]; void _incrementCounter() { setState(() { _counter++; }); } @override void initState() { //setFilters(); super.initState(); } setFilters() { setState(() { dropDownValue = cityList[2]; }); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text(widget.title), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ DropdownButtonFormField( decoration: InputDecoration( border: OutlineInputBorder( borderRadius: const BorderRadius.all( const Radius.circular(30.0), ), ), filled: true, hintStyle: TextStyle(color: Colors.grey[800]), hintText: "Name", fillColor: Colors.blue[200]), value: dropDownValue, onChanged: (String Value) { setState(() { dropDownValue = Value; }); }, items: cityList .map((cityTitle) => DropdownMenuItem( value: cityTitle, child: Text("$cityTitle"))) .toList(), ), ], ), ), floatingActionButton: FloatingActionButton( onPressed: _incrementCounter, tooltip: 'Increment', child: Icon(Icons.add), ), ); }
}

You can just wrap your DropdownButton widget into DecoratedBox :

return DecoratedBox( decoration: ShapeDecoration( color: Colors.cyan, shape: RoundedRectangleBorder( side: BorderSide(width: 1.0, style: BorderStyle.solid, color: Colors.cyan), borderRadius: BorderRadius.all(Radius.circular(25.0)), ), ), child: Padding( padding: const EdgeInsets.symmetric(horizontal: 40.0, vertical: 0.0), child: DropdownButton<String>( value: dropdownValue, icon: Icon(null), elevation: 16, onChanged: (String newValue) { setState(() { dropdownValue = newValue; }); }, underline: SizedBox(), items: <String>['City', 'Country', 'State'] .map<DropdownMenuItem<String>>((String value) { return DropdownMenuItem<String>( value: value, child: Text(value), ); }).toList(), ), ), );

Output :