CODEWITHSUNDEEP
flutter
ctrinh
ctrinh

Reputation: 425

Is it possible to auto-theme widgets in Flutter?

In Google's mobile framework Flutter, you can build your app using either Cupterino (iOS) widgets or Material Design (Android) widgets. This means you have to build your app twice in order to create two different styles consistent to each device -- one time using Cupertino widgets to build for iOS, and then another time using Material Design widgets to build for Android. Is there a way to auto-theme these widgets to tailor to each platform so I can avoid building a Flutter app twice?

Upvotes: 3

Views: 1076

Answers (1)

creativecreatorormaybenot
creativecreatorormaybenot

Reputation: 126724

Yes, of course this is possible. You can use the inherited Theme widget to get the ThemeData object of your MaterialApp.

ThemeData has a property called platform, which can be used to supply different widgets for different platforms. In your Android-iOS case, it would look something like this:

@override
Widget build(BuildContext contect) => 
  Theme.of(context).platform == TargetPlatform.iOS ? // ternary if statement to check for iOS
    CupertinoAlertDialog() : // Cupertino style dialog
    AlertDialog(); // Material style dialog

As you can see, you can use a TargetPlatform constant to check on what platform your application is running.

This can obviously also be applied to icons etc.

If you are using the Flutter plugin for Android Studio or IntelliJ IDEA, you can also use the Flutter Inspector to switch the TargetPlatform on the fly, i.e. emulate that the Flutter SDK is running on iOS even though you are on Android and vise versa.

Upvotes: 4

Related Questions