Getting Started

Firstly, we create a new Flutter project using their handy CLI.

This will generate the project files for both Android and IOS

Now that the project has been generated, cd into the project folder and run Flutter run

By default, Flutter generates a Counter application so if everything went well, you should see this on your device.

Now that the app is running, let’s navigate to the lib folder and open main.dart. Here you can see the code for the default app. We are going to remove everything so that we are left with a blank file.

Let’s start by importing flutter’s material package. This package contains a set of pre-made widgets which are designed following Google’s material design guidelines.

Great! with the package imported, we now move on to the main function. This is the first thing that runs when the app is launched.

In main.dart , we add the lines

Next, we specify the runApp method inside of main

In runApp , we create a new instance of MaterialApp. This will be the parent widget of our app.

The widget MaterialApp can be assigned a few properties. For our purposes, we are only going to be using the home, theme and title. Modify the existing code so that it looks like this.

The above code sets a few properties for our app. Title gives the app its title, home assigns it a homepage and theme sets some global style rules.

Time to create the WhatsAppUiClone class. Under the main method, we create a new class called WhatsAppUiClone and have it extend the StatefulWidget.

In Flutter, there are two types of widgets, Stateful and Stateless . The above code uses the Stateful variant. As you can see, it is created in three steps. First, on line 1, the class name is defined followed by the keywords Extends StatefulWidget . Then on line two, the state is created. Finally, on line five another class is created, this time using the name used to create the state. This class extends the State .

With most of the boilerplate out of the way, we can now move onto creating the appBar . In _WhatsAppUiClone , add the following lines

Fantastic! with just a few lines of code, and a little modification, we have created a material app bar with a bottom navigation tabs. The class is modified to include SingleTickerProviderStateMixin which is an animation property used by the TabBar . Next, we returned a new Scaffold which is a widget from the material package. A Scaffold provides us different API's for adding different features to our app such as an AppBar , Tabs , Drawer , etc... To learn more, see https://docs.flutter.io/flutter/material/Scaffold-class.html.

Inside the Scaffold , we use the appBar property to create a material app bar. The background color is then set to the primary color defined earlier in the theme property of our MaterialApp widget. As part of the appBar , we use the bottom property to create a TabBar . The TabBar takes in a few properties such as the indicator color, a controller with we also defined and tabs. Tabs takes an array if widgets of type Tab. The four tabs are set here.

With that out of the way, it’s time for us to create our different pages. For now, we will just create a widget which displays some text. In our lib folder, create a new folder called pages . Inside of pages we create four called call_history.dart , camera_page.dart , chat_screen.dart and status_page.dart . These files will be the different tab bodies.

For call_history, we add the following lines

In camera_page we add

For chat_screen

Finally for status_page

With all the components in place, it’s time to wire things up and look at the results. Back in main.dart , modify the file so that it looks like this

Starting from the top and working our way down, we imported the four files we just created into main.dart. Next, we override two of Flutter’s lifecycle methods. In the initState method, we set the _tabcontroller we created earlier to a new TabController. The number of tabs was set here. Moving further down, we again override a lifecycle method, this time the dispose. Finally, in the Scaffold , we used the body property and set it to a new TabBarView. The TabBarView used the same controller as before and took in the four different classes we created as its children.

Now if all went according to plan, the result should look like this