Flutter dropdown border radius implementation. In this post, I will be changing the Flutter dropdown border radius using an easy and proper Flutter example code for better understanding. What Flutter dropdown border radius is and its usage is also included in this article. So let’s start understanding how to change Flutter dropdown border radius in Flutter dropdown.
What is Flutter Dropdown Border Radius?
Flutter dropdown border radius is as the name suggests, it is the radius of border of Flutter dropdown that you see when you tap on the Flutter dropdown button. In this post, we will understand how we can change the radius of the dropdown, we will make it a bit circular for demonstration. Let’s now implement it using proper Flutter code.
Default Flutter Dropdown Shape
Let’s see the default Flutter dropdown shape. For that we have implemented a simple Flutter dropdown button and for the dropdown we have used two Flutter dropdown menu items. See the below code:
DropdownButton(
isExpanded: true,
hint: Text('Select any 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 Border Radius
To change the border radius of Flutter dropdown, we have to use the border radius constructor of the Flutter dropdown button widget. Then pass it the border radius, in our case we are using border radius circular which will make all sides circular with the same value. See the below code:
borderRadius: BorderRadius.circular(50)
Custom 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.all(20),
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20, vertical: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(50)
.copyWith(bottomRight: Radius.circular(0)),
color: Colors.blue.shade100),
child: DropdownButtonHideUnderline(
child: DropdownButton(
borderRadius: BorderRadius.circular(20)
.copyWith(topLeft: Radius.circular(0)),
isExpanded: true,
hint: Text('Select any 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();
});
}),
),
),
))));
}
}Conclusion
In conclusion, now you have an in depth understanding of how to change Flutter dropdown border radius in Flutter dropdown. I would love to have your feedback on this post. I also have other amazing articles for you, they are related to Flutter app development, Flutter widgets, Flutter animations, Flutter amazing templates and many more, links to some of them are listed below. That’s it for this post. Thanks for reading.
