Confusion with the use of CupertinoApp and MaterialApp in Flutter

Question

I was learning Flutter and came across two types of design MaterialApp and CupertinoApp. So, I wonder if we want to create an app for both android and ios, should we create one separate app with MaterialApp for android and one separate app with CupertinoApp for ios? Or if we, say, create app with only MaterialApp, will ios version of that app automatically get CupertinoApp?

Answer 1

Material widgets implements the Material design language for iOS, Android, and web.

Cupertino widgets implements the current iOS design language based on Apple's Human Interface Guidelines.

Why write a Cupertino app?

The Material design language was created for any platform, not just Android. When you write a Material app in Flutter, it has the Material look and feel on all devices, even iOS. If you want your app to look like a standard iOS-styled app, then you would use the Cupertino library.

You can technically run a Cupertino app on either Android or iOS, but (due to licensing issues) Cupertino won't have the correct fonts on Android. For this reason, use an iOS-specific device when writing a Cupertino app.

You'll implement a Cupertino style shopping app containing three tabs: one for the product list, one for a product search, and one for the shopping cart.

If you wish to read more on Cupertino and Material. Check the link below:

Cupertino and Material

You can also use a flutter package called flutter_platform_widgets to check which platform your app is running on and use specific widgets(either Material or Cupertino)

This package link is : flutter_platform_widgets

I hope this helps

Answer 2

Cross-Platform framework means it can execute in more than one operating system. It doesn't mean it will automatically design your app accordingly, that's up to the developer. You must check the platform your app is running, you can do that with simple conditions:

if(Platform.isIOS){
   return CupertinoButton();
} else if(Platform.IsAndroid) {
    return ElevatedButton();
}

Or you can use packages like flutter_platform_widgets to help simplify your code.