Material & Cupertino widget

📚 Official Books Flutter Apprentice
1

Building the recipe app we are using the Material App widget.

How can I support the IOS devices also with the Cupertino widget? The Material App widget wrap all the children widget.

How can I detect the device and apply the appropriate widget?

Thanks

2

@lanzoninicola i am not 100% sure, but I think you would have to create a way to switch between Cupertino style widgets vs Material style widgets.

You may be able to find some package that handles this on pub.dev

You can maybe check out:

But in my opinion i think sticking to one UI library is ideal so you don’t have to have bottleneck of supporting two different design systems.

You can build a lot of beautiful UI with just Material UI alone!

The beauty with cross-platform toolkit like Flutter is you build the same UI with a single code base!

3

I’m also a newbie to Flutter but my understanding is that Flutter’s Material Design out of the box gives you a great user interface on Android but on IOS it won’t always give you an IOS look-and-feel (even though it will work). So, for each widget you have, you will need to either (a) use

if (Platform.isIOS)

to
use an alternate widget or (b) within your own widgets, use the same if test to build a Cupertino section of code.

The thing to remember is that even though Flutter builds working apps on all supported platforms, the look-and-feel may not be the correct look-and-feel for a particular device unless you customize the code.

See this article

4

Thanks @jomoka @jefff9511 for the reply.

I didn’t see much information on the internet about this topic. Now it is clearer.

Initially I thought there was some sort of automatic mechanism provided by Flutter, but I had no idea how it would work if I have to explicitly set the relevant widget to handle the UI.
Thanks

1 Like
5

We should look at this article on RayWenderlich … Platform-Aware Widgets in Flutter by By Kevin Moore.

3 Likes