Flutter 1.2 Cupertino App

Tomorrow comes today….

---

Google recently announced version 1.2 of Flutter.. There are some new features available for us to try out…

This article is an extension to my previous article, Flutter 1.2.

Begin…

As we all know, Flutter helps us in :

Building cross-platform apps (Android and iOS)…

What if you wanted an app for iOS only ?

Well, brace yourselves…Here’s Flutter 1.2 with CupertinoApp

CupertinoApp()…

When we start a Flutter App, if you recall we always had a structure like this :

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(home: new ButtonOptions());
  }
}

There was always a MaterialApp.

Digging deep, you can find the documentation of MaterialApp :

An application that uses material design.

A convenience widget that wraps a number of widgets that are commonly required for material design applications.

---

Well, we have now CupertinoApp.

---

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: HomeScreen(),
    );
  }
}

Note: Notice the difference, (CupertinoApp)….

As per the documentation,

An application that uses Cupertino design.

A convenience widget that wraps a number of widgets that are commonly required for an iOS-design targeting application.

Yayyyyy!!!!!!!!!!!!!

Insights of CupertinoApp…

1. CupertinoPageScaffold, which provides a standard page layout default with nav bars.
2. CupertinoPageRoute, which defines an app page that transitions in an iOS-specific way.

Theming…

We have CupertinoThemeData, for theming iOS styled apps.

CupertinoThemeData(
        textTheme: CupertinoTextThemeData(
          navLargeTitleTextStyle: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 22.0,
            color: CupertinoColors.activeGreen,
          ),
        ),
      ),

We can set the textTheme for our app using CupertinoTextThemeData.

CupertinoTextThemeData : Cupertino typography theme.

---

Various TextStyles for iOS are available as :

1. navActionTextStyle : interative text content in navigation bars
2. navLargeTitleTextStyle : large titles in sliver navigation bars
3. navTitleTextStyle : titles in standard navigation bars
4. tabLabelTextStyle : unselected tabs.

CupertinoTabScaffold()…

As per the documentation,

Implements a tabbed iOS application’s root layout and behavior structure.

CupertinoTabScaffold(
  tabBar: CupertinoTabBar(
    items: <BottomNavigationBarItem> [
      // ...
    ],
  ),
  tabBuilder: (BuildContext context, int index) {
  },
)

CupertinoPageRoute…

As per the docs,

A modal route that replaces the entire screen with an iOS transition.

The page slides in from the right and exits in reverse. The page also shifts to the left in parallax when another page enters to cover it.

CupertinoPageRoute(
     builder: (context) {
       //YOUR SCREEN COMES HERE
    },
),

CupertinoPageScaffold…

Implements a single iOS application page’s layout.

The scaffold lays out the navigation bar on top and the content between or behind the navigation bar.

CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Inside $topic'),
      ),
      child:  //YOUR CHILD WIDGET
);