How To Change Flutter Dropdown Border Radius

flutter dropdown border radius

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();
              });
            })
flutter dropdown default border radius
In the above image, you can see the shape of the Flutter dropdown. Let’s now change the radius of the Flutter dropdown.

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)
flutter dropdown border radius
In the above image, you can see that the border radius of Flutter dropdown is now circular. You can use border radius only and specify circular value for each corner.
So now you have a complete understanding of how to change Flutter dropdown border radius. If you still face any problems regarding the customization of Flutter dropdown border radius then do let me know in the comment section. I would love to answer them.
I also have prepared a beautiful custom Flutter dropdown design for you in which Flutter dropdown border radius is also implemented. The complete source code is available in the next section.

Custom Flutter Dropdown Design Source Code

flutter dropdown border radius

flutter dropdown border radius

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.

Leave a Comment

Your email address will not be published.