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

GestureDetector(
            child: Text("Date"),
            onTap: () {
              showModalBottomSheet(
                  context: context,
                  builder: (BuildContext builder) {
                    return Scaffold(
                        appBar: AppBar(
                          title: Text(
                            "CupertinoPicker",
                            textAlign: TextAlign.justify,
                          ),
                          backgroundColor: Colors.teal,
                          actions: <Widget>[
                            IconButton(
                              icon: Icon(Icons.send),
                              onPressed: () {},
                            )
                          ],
                        ),
                        body: Container(
                          child: CupertinoPicker(
                            magnification: 1.5,
                            backgroundColor: Colors.black87,
                            children: <Widget>[
                              Text(
                                "TextWidget",
                                style: TextStyle(
                                    color: Colors.white, fontSize: 20),
                              ),
                              MaterialButton(
                                child: Text(
                                  "Button Widget",
                                  style: TextStyle(color: Colors.white),
                                ),
                                color: Colors.redAccent,
                              ),
                              IconButton(
                                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 {

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

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