DEV Community

Cover image for Cupertino Flutter Chat App Complete Guide #1
Faizal Patel
Faizal Patel

Posted on

Cupertino Flutter Chat App Complete Guide #1

Cupertino Tab Bar Flutter

Contact me on Codementor

This is the first chapter in which we are going to build a Bottom Navigation Bar known as a Tab Bar in Flutter for the Flutter Chat App with the look and feel for iOS users using the Cupertino Theme.

Flutter is a modern way of creating beautiful UI for any platform that runs dart virtual machine, commonly known as dartvm. Flutter uses skia engine to draw elements to the screen, based on this, we can say an App built with Flutter is native and with high performance. Flutter uses a declarative approach to build UI, with a simple widgets tree you can build anything that you can imagine. Although Flutter is relatively new, his popularity is growing exponentially every day.

Cupertino Tab Bar Flutter - Flutter Chat App Complete Tutorial #1

Why we are going to build a complete Flutter Firebase Chat App? With so many multi-platform frameworks available in the world, here in this article, I give my own opinion on why Flutter and Firebase is the best framework to build your next MVP project.

Set up your machine for development

The best two IDE for flutter/dart development are IntelliJ Idea and Visual Studio Code.
Once you have the IDE installed, install flutter SDK following this official guide.

Run the Sample App

Once you have everything set up, create your very first flutter project by running flutter create or using the create/new project from the IDE. Run the app on an Android or iPhone emulator. With the new release of Flutter, you can now run the app on any platform, Windows, macOS, Android, iOS, and the web.

Create a Cupertino App

On the main.dart file, the entry point of the FLutter application, replace the MaterialApp with CupertinoApp so that we can apply the UI/UX of iOS. The theme parameter is the CupertinoThemeData as demonstrated below.

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return CupertinoApp(
      home: HomePage(),
      theme: CupertinoThemeData(
          brightness: Brightness.light, primaryColor: Color(0xFF08C187)),
    );
  }
}

CupertinoPage and CupertinoTab

On the HomePage Widget, replace the Scaffold Widget with a CupertinoPageScaffold, this will allow us to embed Cupertino widgets and have an iOS look and feel.

On the child of the CupertinoPageScaffold and a screen wrapper that is CupertinoTabScaffold, this will automatically make the page adaptable to provide a bottom navigation bar.

The tab bar parameter receives a CupertinoTabBar and a list of "Tabs" inside it, the minimum needs to be two elements in the list. The tab builder receives a widget that will be rendered based on the index, the index is the active bottom tab.

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: CupertinoTabScaffold(
        resizeToAvoidBottomInset: true,
        tabBar: CupertinoTabBar(
          items: [
          ],
        ),
        tabBuilder: (BuildContext context, int index) {
          return null;
        },
      ),
    );
  }
}

Add Bottom Navigation Button Icons

The CupertinoTabBar list receives elements of the type BottomNavigationBarItem that expects a label and an icon. Let's create four of these elements for Chats, Calls, People, and Settings.

CupertinoTabBar(
      items: [
        BottomNavigationBarItem(
          label: "Chats",
          icon: Icon(CupertinoIcons.chat_bubble_2_fill),
        ),
        BottomNavigationBarItem(
          label: "Calls",
          icon: Icon(CupertinoIcons.phone),
        ),
        BottomNavigationBarItem(
          label: "People",
          icon: Icon(CupertinoIcons.person_alt_circle),
        ),
        BottomNavigationBarItem(
          label: "Settings",
          icon: Icon(CupertinoIcons.settings_solid),
        )
      ],
    ),

Create a dedicated screen widget for each tab icon

At the class, we create an array variable that will hold a list of "screens" that will be rendered on the tabBuilder of the CupertinoTabBar, in the same order as the BottomNavigationBarItem.

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  var screens = [Chats(), Calls(), People(), Settings()];
tabBuilder: (BuildContext context, int index) {
  return screens[index];
},

Conclusions and Next Chapter

You will learn to set up and use Firebase Emulators on Flutter Cloud Firestore Chat App. Firebase Cloud Firestore is the newest real-time database that has an official integration with flutter.
This is a flutter 2 Firebase Tutorial, a complete and compact Firebase Firestore Flutter Tutorial. We cover Flutter App Development with Cloud Firestore Integrations and perform Firestore Query to get data into Flutter Chat App.

Subscribe 🔔 to my channel 📺 and follow my flutter videos, to help us grow this flutter dev community.

Contact me on Codementor

Video tutorial for this chapter
Like 👍, Share 🔗 and Subscribe 🔔

Contact me on Codementor

Top comments (0)