Flutter Twitter Clone Part 2

Merve Arslan
IChoosedFlutter😇
2 min readApr 27, 2019

--

In Part 1, we’re done with the basic part of Twitter UI. Now we can start to build other pages.

Our first page is homepage.dart file.

After finishing that page, we’ll get the screen below in our app.

We are going to use Row widget to make reply, like, retweet and send buttons.

Our next step is FloatingActionButton. FloatingActionButton is a shortcut to an action we’re going to use often in a page. This button literally floats in screen and usually stands on the corner of a screen.

Now we get to the message.dart file.

In message.dart, we build the general UI just like our homepage.dart and it looks like below.

After we’re done with messages, we can start to build the notifications page. Again we start with creating notifications.dart file.

In this page, we want to have 2 tabs just like the real Twitter app, so we’re going to use DefaultTabController.

DefaultTabController works with DefaultTabBar and TabBarView, controls the tabs. This controller, has features like determining the number of tabs.

It only takes 1 day to build a Twitter Clone, and it’s so easy to create UIs with Flutter. You can try and experience it, and have fun with Flutter yourself 🤗

--

--