Flutter dropdown icon customization. In this post, I will be changing the default Flutter dropdown icon using an essay Flutter code example and through step by step explanation so it will be easy for you to change the default Flutter dropdown icon with any icon of your choosing. Let’s get right into changing the Flutter dropdown icon.
What is Flutter Dropdown Icon?
Flutter dropdown icon is the icon that you see in the right side of Flutter dropdown. By clicking it we see a dropdown list of items through which we can select an option to show in our Flutter dropdown. Let’ see how to change Flutter dropdown icon.
Default Flutter Dropdown Icon
Let’s see the default Flutter dropdown icon. For that we have to implement a simple Flutter dropdown. I have used a simple Flutter dropdown and also have used two Flutter dropdown menu items so we have some items. See the below code:
DropdownButton(
isExpanded: true,
hint: Text('Select a category',
style: TextStyle(fontSize: 15)),
value: categoryValue,
items: [
DropdownMenuItem(
value: 'Sports',
child: Text('Sports',
style: TextStyle(fontSize: 15, color: Colors.black45))),
DropdownMenuItem(
value: 'Tech',
child: Text('Tech',
style: TextStyle(fontSize: 15, color: Colors.black45))),
],
onChanged: (val) {
setState(() {
categoryValue = val.toString();
});
}),
Change Flutter Dropdown Icon
Let’s see how to change the default Flutter dropdown icon. For that we have to use the icon constructor of the Flutter dropdown button. Then passing it Flutter icon widget, so in that way we can change the Flutter dropdown icon. See the below code:
icon: Icon(Icons.arrow_downward_outlined)
Beautiful Flutter Dropdown Design Source Code
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Homepage(),
);
}
}
class Homepage extends StatefulWidget {
@override
State<Homepage> createState() => _HomepageState();
}
class _HomepageState extends State<Homepage> {
String? categoryValue;
@override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Center(
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 40),
child: Container(
width: double.infinity,
height: 55,
padding: EdgeInsets.symmetric(horizontal: 10),
decoration: BoxDecoration(
color: Colors.green.shade100,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomLeft: Radius.circular(30),
bottomRight: Radius.circular(30))),
child: DropdownButtonHideUnderline(
child: DropdownButton(
icon: Icon(
Icons.arrow_downward_outlined,
color: Colors.white,
),
isExpanded: true,
hint: Text('Select a category',
style: TextStyle(fontSize: 15, color: Colors.white)),
value: categoryValue,
items: [
DropdownMenuItem(
value: 'Sports',
child: Text('Sports',
style:
TextStyle(fontSize: 15, color: Colors.black45))),
DropdownMenuItem(
value: 'Tech',
child: Text('Tech',
style:
TextStyle(fontSize: 15, color: Colors.black45))),
DropdownMenuItem(
value: 'Business',
child: Text('Business',
style:
TextStyle(fontSize: 15, color: Colors.black45))),
],
onChanged: (val) {
setState(() {
categoryValue = val.toString();
});
}),
),
),
)),
));
}
}Conclusion
In conclusion, now you know in depth of how to change Flutter dropdown icon and replace it with your own Flutter icon. I would love to hear your thoughts on this post and would also want to see you in my other amazing posts in which I have discussed in detail topics like Flutter app development, Flutter widgets, Flutter animations, Flutter beautiful templates designs and many more, links to few of those posts are listed below. Thanks for reading this post.
