Flutter Cupertino Widget: Style Your iOS App to Look and Feel Like Native

Flutter SDK offers two sets of styling widgets, the Material, and Cupertino Widget. The Material widget implements material design language for iOS, Android, web, and desktop applications. The Cupertino widget on the other hand is used to implement the current iOS design language based on Apple’s human interface guidelines. 

So, here arises a question, why do we need a Cupertino widget for iOS app development when there is a Material widget that can be used for any platform including iOS.  

Continue reading this article to know more about the Flutter Cupertino widget, why we need it, and how it helps you to build a beautiful cross-platform Flutter app that looks and feels like a native application. 

A brief introduction to the Flutter Cupertino widget

The widget is specifically designed for the apps that run on the iOS platform. As the widget respects Android and iOS platform differences, it doesn’t support all the features in the Material widgets. Also, there are some licensing issues. 

For example, if you run the Cupertino app on the Android platform you might not see the correct fonts loaded on the UI belonging to the San Francisco font family.  Also, you may experience the pages getting dismissible via a back swipe. 

Here are some basic things you need to know before using the Cupertino widget in the Flutter app.

• Even if you are building an app for only iOS devices, using the Cupertino widget is optional.
• There are only a few Cupertino widgets that will work in a MaterialApp/Scaffold widget.
• Flutter allows the use of Cupertino and the Material widgets in the same codebase so that the developers can create a different look and feel for Android and iOS. 

So, why use the Flutter Cupertino widget?

Google introduced Material Design to work with any platform and not just Android. So, when you develop an app in Flutter with the Material widget, it doesn’t mean it will automatically get designed into the respective platforms. 

It's a developer's responsibility to check the platform and design its components according to the platform standards. You can check whether the platform is Android or iOS using different conditions, such as: 

‍

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

‍

However there is another sophisticated way i.e  flutter_platform widgets , it simplifies the use of both Material and Cupertino widgets with a single widget. 

How to use Flutter Platform Widget?

First, install the plugin with flutter pub add flutter_platform_widgets . Then you need to create a base application using the PlatformProvider and PltformApp .  

• PlatformProvider: A Provider that provides access to the functions of switching platforms which can be accessed from any screen.
• PlatformApp: A top-level widget for the application that uses MaterialApp for material or CupertinoApp for Cupertino.

Then you can extend the app and utilize different platform widgets for building cross-platform apps with a simplified codebase. 

‍

In the sample code you can clearly see how we can render the material widget in the material context and the Cupertino widget in the Cupertino context using the PlatformProvider and the PlatformApp. 

There are many other widgets under the Flutter Platform Widgets that help you to build a cross-platform app for Android and iOS that looks more native to the platforms. 

So, now you know how you can achieve personalized results in the cross-platform application using the material and Cupertino widget. 

Want to further simplify your Flutter cross-platform development? Try using DhiWise Flutter Builder!

DhiWise is the app development platform for web and mobile apps that aims to accelerate the process of software development by eliminating the grunt tasks. The platform provides the best features necessary to make the development process more efficient and error-free.

So, if you want to build a cross-platform application with Flutter try using DhiWise Flutter Builder.

Here are its best features:

1. Figma to Flutter conversion.
2. Flexibility to UI customization with the intuitive user interface.
3. API management and customization.
4. GitHub and GitLab integration.
5. Cloud Firestore integration.
6. Complete code view and accessibility.
7. Source Code ownership. 

Also, read our article on Why to choose DhiWise for Flutter application development .

Well, besides all these it provides support for other Frontend and backend technologies, enabling full-stack application development using the single platform.

     import 'package:flutter/widgets.dart';
    import 'package:flutter_adapt_style_platform/selector_screen.dart';
    import 'package:flutter_adapt_style_platform/styles.dart';
    import 'package:flutter_platform_widgets/flutter_platform_widgets.dart';
     
    class App extends StatelessWidget {
      @override
      Widget build(BuildContext context) {
        return PlatformProvider(
            builder: (BuildContext context) => PlatformApp(
                title: 'Flutter platform style sample',
                material: (_, __) => MaterialAppData(
                    theme: materialTheme, debugShowCheckedModeBanner: false),
                cupertino: (_, __) => CupertinoAppData(
                    theme: cupertinoTheme, debugShowCheckedModeBanner: false),
                home: SelectorScreen()));
      }
    }