Cupertino Flutter Chat App Complete Guide #1
Tags: flutter, firebase, mobile, tutorial
Published: 2022-06-30 16:29:00

## Cupertino Tab Bar Flutter
[![Contact me on Codementor](https://www.codementor.io/m-badges/fpatelm/im-a-cm-g.svg)](https://www.codementor.io/@fpatelm?refer=badge)

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](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/0abrn9eo3zjomcn7fzqx.PNG)

Why we are going to build a [complete Flutter Firebase Chat App](https://www.youtube.com/playlist?list=PLD46K4dpufBEMDz5UblupcWLUiS2hFBXI)? With so many multi-platform frameworks available in the world, [here in this article](https://www.codementor.io/@fpatelm/why-flutter-and-firebase-in-2022-1t0e6r70ej), 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](https://docs.flutter.dev/get-started/install).


###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.
<pre>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)),
    );
  }
}</pre>

###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.
<pre>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;
        },
      ),
    );
  }
}</pre>

###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**_.
<pre>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),
        )
      ],
    ),</pre>

###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_.
<pre>class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  var screens = [Chats(), Calls(), People(), Settings()];</pre>

<pre>tabBuilder: (BuildContext context, int index) {
  return screens[index];
},</pre>


###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](https://www.youtube.com/playlist?list=PLD46K4dpufBEMDz5UblupcWLUiS2hFBXI) with Cloud Firestore Integrations and perform Firestore Query to get data into Flutter Chat App.


[Subscribe 🔔](https://www.youtube.com/keynotecast?sub_confirmation=1) to [my channel 📺](https://www.youtube.com/keynotecast?sub_confirmation=1) and follow my flutter videos, to help us grow this flutter dev community.

[![Contact me on Codementor](https://www.codementor.io/m-badges/fpatelm/im-a-cm-b.svg)](https://www.codementor.io/@fpatelm?refer=badge)

Video tutorial for this chapter
[Like 👍](https://www.youtube.com/watch?v=leax33lxTgQ&list=PLD46K4dpufBEMDz5UblupcWLUiS2hFBXI&index=2), [Share 🔗](https://www.youtube.com/watch?v=leax33lxTgQ&list=PLD46K4dpufBEMDz5UblupcWLUiS2hFBXI&index=2) and [Subscribe 🔔](https://www.youtube.com/keynotecast?sub_confirmation=1)

{% embed https://www.youtube.com/watch?v=leax33lxTgQ&list=PLD46K4dpufBEMDz5UblupcWLUiS2hFBXI&index=1 %}

[![Contact me on Codementor](https://www.codementor.io/m-badges/fpatelm/get-help.svg)](https://www.codementor.io/@fpatelm?refer=badge)