How to automatically select the components/widgets based on the platform in flutter.

For example if we use dropdowns in ios it should be a picker while in android it should be popup and normal dropdown on web.

The native components will give an additional good look and feel in UI/UX perspective.

If we are giving platform check for every widgets the code gets up messy.

For example:

Sample Cupertino picker

            child: Text("Date"),
            onTap: () {
                  context: context,
                  builder: (BuildContext builder) {
                    return Scaffold(
                        appBar: AppBar(
                          title: Text(
                            textAlign: TextAlign.justify,
                          backgroundColor: Colors.teal,
                          actions: <Widget>[
                              icon: Icon(Icons.send),
                              onPressed: () {},
                        body: Container(
                          child: CupertinoPicker(
                            magnification: 1.5,
                            backgroundColor: Colors.black87,
                            children: <Widget>[
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20),
                                child: Text(
                                  "Button Widget",
                                  style: TextStyle(color: Colors.white),
                                color: Colors.redAccent,
                                icon: Icon(Icons.home),
                                color: Colors.white,
                                iconSize: 40,
                                onPressed: () {},
                            itemExtent: 50, //height of each item
                            onSelectedItemChanged: (int index) {
                              selectitem = index;

Here i ave integrated a sample picker and takes a lot of lines for its integration and in android the native feel is not there. It is good looking in ios.

Solution 1: Muneesh

You can write any widget supporting both the platform:

class ProgressBar extends StatelessWidget {

  Widget build(BuildContext context) {
    return Theme
        .platform == TargetPlatform.iOS ?
    CupertinoActivityIndicator() : CircularProgressIndicator();

So above approach build widget iOS and android/fuchsia accordingly. You can define any widget like this