How to customize Dropdown Button and items in flutter? - flutter

Question

Today I tried to design a dropdown button with customized items in it where I can select all items or deselect all items with one click. But I didn't understand the approach how to do it. So please help me guys how to approach the required design and below I placed my design and required design.
and here is my 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,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownvalue = 'Apple';
var items = ['Apple','Banana','Grapes','Orange','watermelon','Pineapple'];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DropDownList Example"),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("DropDownButton"),
Container(
height: 40,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
border: Border.all(
color: Colors.grey, style: BorderStyle.solid, width: 0.80),
),
child: DropdownButtonHideUnderline(
child: DropdownButton(
elevation: 0,
value: dropdownvalue,
icon: Icon(Icons.keyboard_arrow_down),
items:items.map((String items) {
return DropdownMenuItem(
value: items,
child: Text(items)
);
}
).toList(),
onChanged: (String? newValue){
setState(() {
dropdownvalue = newValue!;
});
},
),
),
),
],
),
],
),
),
);
}
}

Answer 1

You can use dropdown_button2 package for this:
import 'package:flutter/material.dart';
import 'package:dropdown_button2/dropdown_button2.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(),
);
}
}
class MyHomePage extends StatefulWidget {
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
String dropdownvalue = 'Apple';
var items = [
'Apple',
'Banana',
'Grapes',
'Orange',
'watermelon',
'Pineapple'
];
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("DropDownList Example"),
),
body: Container(
padding: EdgeInsets.all(10.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text("DropDownButton"),
Container(
height: 40,
padding: EdgeInsets.all(5.0),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
border: Border.all(color: Colors.grey, style: BorderStyle.solid, width: 0.80),
),
child: DropdownButtonHideUnderline(
child: DropdownButton2(
hint: Text(
'Select Item',
style: TextStyle(
fontSize: 14,
color: Theme.of(context).hintColor,
),
),
items: items
.map((item) => DropdownMenuItem<String>(
value: item,
child: Text(
item,
style: const TextStyle(
fontSize: 14,
),
),
))
.toList(),
value: dropdownvalue,
onChanged: (String? newValue) {
setState(() {
dropdownvalue = newValue!;
});
},
buttonHeight: 40,
buttonWidth: 140,
itemHeight: 40,
),
)),
],
),
],
),
),
);
}
}
final result: