Cupertino Flutter App — Part 1

Cupertino widgets give a better iOS native look to our Flutter app. This library is designed for apps run on the iOS platform. In this article I will give you a demo example with some Cupertino widgets.

In this article I will talk about bellow widgets.

• CupertinoNavigationBar
• CupertinoPageScaffold
• CupertinoSearchTextField
• CupertinoSliverNavigationBar
• CupertinoTabBar
• CupertinoTabScaffold
• CupertinoTabView
• CupertinoContextMenu
• CupertinoButton
• Navigating to another page

First of all since I didn’t use the material app, I created a CupertinoApp to get everything under my Cupertino theme. So I provided a CupertinoThemeData to my CupertinoApp where I can give theme data. SF-Pro is my selected font family and I used CupertinoTextThemeData to set the font family for my full app. Just like this!

    return const CupertinoApp(
      theme: CupertinoThemeData(
          brightness: Brightness.light,
          textTheme: CupertinoTextThemeData(
              textStyle: TextStyle(fontFamily: "SF-Pro"))),
      debugShowCheckedModeBanner: false,
      home: NavigationScreen(),
    );

As you can see my demo app has for tabs in order to navigate between screens. So we can use CupertinoTabScaffold, CupertinoTabBar and CupertinoTabView for this. We can use BottomNavigationBarItem as the tab bar items.

CupertinoTabScaffold

This will implement a tabbed layout. This widget requires a tabBar and a tabBuilder. It will use a CupertinoTabController or controller param to set a selected tab index and manage the tab changes. If we don’t provide the controller, the scaffold will create and manage its own CupertinoTabController.

CupertinoTabBar

We provide this widget to our tab scaffold. Tab bar will contain all the items with icons and labels. We can use BottomNavigationBarItem widgets as tab bar items.