Now, we need to create the list of tweets. For this we use a ListView.builder().
mainAxisAlignment: MainAxisAlignment.spaceBetween,
child: Icon(Icons.expand_more, color: Colors.grey,),
title: Text(Home, style: TextStyle(color: Colors.black),),
Notice when we set the color of the icons, we check if the icon is selected and then assign colors. In the twitter app, selected icon is blue and lets set unselected ones to blueGrey.
class_UserFeedPageStateextendsStateUserFeedPage
icon: Icon(FontAwesomeIcons.home, color:selectedPageIndex== 0? Colors.blue: Colors.blueGrey,),
crossAxisAlignment: CrossAxisAlignment.start,
_UserFeedPageState createState() = _UserFeedPageState();
Icon(FontAwesomeIcons.comment, color: Colors.grey,),
child: Text(tweet.tweet, style: TextStyle(fontSize: 18.0),),
The complete example is hosted on Github.
First, well have a column with a row and a divider you see at the bottom.
We define a integer called selectedPageIndex which stores the index of the page selected. In the onTap function, we set the variable to the new index. It is wrapped in a setState() call as we need a refresh of the page to re-render the AppBar.
padding:constEdgeInsets.symmetric(vertical: 4.0),
This is the recreated page for the Twitter user feed. The fact that recreating any UI is fast and easy in Flutter is a testament to its development speed and customisability at the same time. These are two things that rarely go together.
Thank you for reading this Flutter challenge. Feel free to mention any app you might want recreated in Flutter. Be sure to leave a few claps if you enjoyed it, and see you in the next one.
The BottomNavigationBar has four tabs to go to each of these pages.
TextSpan(text:tweet.username, style: TextStyle(fontWeight: FontWeight.w600, fontSize: 18.0, color: Colors.black),),
// This widget is the root of your application.
We set up four pages (in different files) like this:
Icon(FontAwesomeIcons.heart, color: Colors.grey,),
In our app, well have four different pages and well just change the pages when an item on the BottomNavigationBar is tapped.
Widget build(BuildContext context)
From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
Lets set up the four basic pages which will be displayed when the respective icons are clicked.
This challenge will attempt the home screen of the Twitter Android app. Note that the focus will be on the UI rather than actually fetching data from a backend server.
icon: Icon(FontAwesomeIcons.home, color:selectedPageIndex== 0? Colors.blue: Colors.blueGrey,),
Icon(FontAwesomeIcons.retweet, color: Colors.grey,),
icon: Icon(FontAwesomeIcons.envelope, color:selectedPageIndex== 3? Colors.blue: Colors.blueGrey,),
Well use an icon instead of a profile picture.
icon: Icon(FontAwesomeIcons.bell, color:selectedPageIndex== 2? Colors.blue: Colors.blueGrey,)
Heres how the BottomNavigationBar looks like:
Because we dont have the exact icons used in the app, well go with theFont Flutter Awesome package. Add the dependency in the pubspec.yaml and add
padding:constEdgeInsets.only(right: 4.0),
The BottomNavigationBar code comes down to:
There are two elements in the page: The AppBar and the list of tweets.
icon: Icon(FontAwesomeIcons.bell, color:selectedPageIndex== 2? Colors.blue: Colors.blueGrey,)
Because the Bottom Navigation Bar is the main widget used to navigate, lets try that first.
TextSpan(text: + tweet.twitterHandle,style: TextStyle(fontSize: 16.0, color: Colors.grey)),
Google Certified Android Developer. Speaker and Blogger for Flutter and Android. Loves coding, AI and Chess.
, currentIndex:selectedPageIndex,),
After making a helper class for supplying simple tweets and adding a simple FloatingActionButton, this is the result:
For brevity, well exclude the image for now, but adding it is as simple as adding an image in a row.
class_MyHomePageStateextendsStateMyHomePage
which sets the body to display the page.
_MyHomePageState createState() =new_MyHomePageState();
icon: Icon(FontAwesomeIcons.envelope, color:selectedPageIndex== 3? Colors.blue: Colors.blueGrey,),
After creating a Flutter project (Ive named it twitter_ui_demo), clear out the default code in the project until youre left with this:
The Twitter app has 4 main pages controlled by a Bottom Navigation Bar.
leading: Icon(Icons.account_circle, color: Colors.grey, size: 35.0,),
TextSpan(text:$tweet.time,style: TextStyle(fontSize: 16.0, color: Colors.grey))
Now, well recreate the pages themselves.
classUserFeedPageextendsStatefulWidget
Widget build(BuildContext context)
Flutter Challenges will attempt to recreate a particular app UI or design in Flutter.
ITNEXT is a platform for IT developers & software engineers to share knowledge, connect, collaborate, learn and experience next-gen technologies.
icon: Icon(FontAwesomeIcons.search, color:selectedPageIndex== 1? Colors.blue: Colors.blueGrey,),
child: Icon(Icons.account_circle, size: 60.0, color: Colors.grey,),
Similarly we set up the Search, Notification and Messages Page.
voidmain() = runApp(newMyApp());
Again in the base page, we import all theses pages and set up a list of these pages.
bottomNavigationBar: BottomNavigationBar(items: [
Inside the row, well have the user icon and another column.
The HomePage will have a Scaffold that will hold our main BottomNavigationBar and whatever page is currently active.
The column will hold a row for tweet information, a text with the tweet itself, an image and another row for actions to take on a tweet (like, comment, etc.).
mainAxisAlignment: MainAxisAlignment.start,
Widget build(BuildContext context)
First lets make the AppBar. It has a user profile picture and a black title with a white background.
classMyHomePageextendsStatefulWidget
Icon(FontAwesomeIcons.shareAlt, color: Colors.grey,),
padding:constEdgeInsets.only(top: 4.0),
icon: Icon(FontAwesomeIcons.search, color:selectedPageIndex== 1? Colors.blue: Colors.blueGrey,),
Widget build(BuildContext context)
So till now, this is the MyHomePage base widget: