Flutter Twitter Clone Part 1
I’ve been working on Flutter for a long time and it started to be a fun experience for me. It’s so easy to make an app with Flutter. Today, I’m going to tell making of my first experiment, Twitter Clone.
Let’s begin!
First, we need to create our main.dart file.
There’s going to be an error in main.dart file. That’s because we didn’t create a MyHome class yet. After we create that class and import it to our main.dart file, this error will be solved.
Then we create our home.dart file and start to build home page of our app. To do that, we’re going to use Scaffold widget in StatefulWidget, which features AppBar, body and many more. Basically, Scaffold is the skeleton of our app. AppBar, is the top of our Twitter Clone. With leading, we can edit left side of AppBar. So we are going to edit and use that part for Profile Picture on the top left.
With Drawer Widget, we are going to create the drawer menu. Normally, this menu would’ve take so much time but in Flutter, we can build it with only one Drawer widget. After this step, our app looks like below.
In Body, first thing we’re going to create is TabBarview widget. This widget provides us tabbed display, but this is not the only thing we should do to show tabs. We also need to add TabBar Controller. This controller, controls the movement between tabs.
Then we’re going to add BottomNavigationBar to make the bottom bar of Twitter. BottomNavigationBar is one of the most useful widgets in Flutter. We can add BottomNavigationBar in Scaffold.
With adding icons to BottomNavigationBar, we can see the screen below in our emulator.
Now we can start to create other pages. To do that, we add page directory to our lib directory and then create dart files for each page of Twitter.
Then we integrate these dart files to TabBar Widget in our home.dart file, so when we touch a button we can go to the page we want to go. Again, we’ll get an error, which is caused by the pages we didn’t import yet. After improting the pages, this will be solved.
Until now, we did half of the job and I think this is a good time to end this part. See you in the 2nd part of Flutter Twitter Clone 👇
