HomePage
Hey how are you??
In this post I will be building out the home page.
The Home Page will be a CustomScrollView.
Why?? you ask? A Custom Scroll View allows you to use Slivers which essentially is a section of a viewport, meaning you can have a scrollable page consisting of different widgets.
class HomePage extends StatelessWidget {
@override
Widget build(BuildContext context) {
return CustomScrollView(
slivers: <Widget>[],
);
}
}
Tip :- To use a Normal Widget in slivers just use a SliverToBoxAdapter().
App Bar
The App bar is part of the HomePart , because it is different for every page (Profile, search, etc.).
We use SliverAppBar provided natively by Flutter and can be as a Sliver.
The App bar is set as pinned, so that it remains static even while scrolling up/down, but this can be changed for some interesting UI/UX.
SliverAppBar(
pinned: true,
backgroundColor: new Color(0xfff8faf8),
elevation: 0.0,
centerTitle: true,
title: SizedBox(
height: 35.0,
child: Image.asset("assets/images/insta_logo.png"),
),
leading: IconButton(
onPressed: () {},
icon: Icon(
Icons.camera_alt,
color: Colors.black,
),
),
),
Bottom Bar
The Bottom App bar is part of the main.dart file under the scaffold widget.
This is because the bottom bar should be constant across all the pages / routes.And will act like a navigation Bar.
The new post button is a FAB with a diamond shape and Docked with the Bottom App Bar.
floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.black,
child: new Icon(Icons.add),
onPressed: () {},
shape: new BeveledRectangleBorder(
borderRadius: new BorderRadius.circular(50.0)),
),
bottomNavigationBar: BottomAppBar(
notchMargin: 6.0,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: <Widget>[
IconButton(
icon: Icon(Icons.home),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.search),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.favorite),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.account_box),
onPressed: () {},
)
],
),
),
Post
A Instagram POST consists of multiple sections
This is how instagram looks and what we will be trying to replicate
The post Widget will contain a column with three childrens.
- The first children contain a Row to accomodate a profile image, poster name, and a menu button.
- The second child will be the main image which can be of any size.
- The third child will be be a set of actions such as a like button, comment, send to, and a bookmark button.
You will have to add font_awesome_flutter and include it in the file
class Post extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.fromLTRB(16.0, 8.0, 16.0, 8.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Container(
height: 40.0,
width: 40.0,
decoration: BoxDecoration(
shape: BoxShape.circle,
image: DecorationImage(
fit: BoxFit.fill,
image: new NetworkImage(
"https://pbs.twimg.com/profile_images/877903823133704194/Mqp1PXU8_400x400.jpg"))),
),
SizedBox(width: 10.0),
Text(
"The Verge",
style: TextStyle(fontWeight: FontWeight.bold),
)
],
),
IconButton(
icon: Icon(Icons.more_vert),
onPressed: () {},
)
]),
),
Container(
child: Image.network(
"https://scontent-bom1-1.cdninstagram.com/vp/bbe7af06973ff08e40c46e78b6dbae1b/5CD2BC37/t51.2885-15/e35/49480120_356125811610205_2312703144893486280_n.jpg?_nc_ht=scontent-bom1-1.cdninstagram.com",
fit: BoxFit.cover,
),
),
Padding(
padding: EdgeInsets.all(16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
IconButton(
icon: Icon(Icons.favorite_border),
),
SizedBox(width: 16.0),
Icon(FontAwesomeIcons.comment),
SizedBox(width: 16.0),
Icon(FontAwesomeIcons.paperPlane)
],
),
Icon(FontAwesomeIcons.bookmark)
],
),
),
],
);
}
}
Conclusion
I have built a UI which is similar to Instagram and really enjoy the developer experience and UI first approach the Flutter Provides.
Got any questions ask then Below??!
Top comments (1)
Great article. The stepwise guidance with code and screenshots is easy to understand and grasp. Its a short and great learning resource for beginners in a flutter. There are places where UI designs can be improved. I hope you add for features and UI elements to it in future articles. You can draw inspirations from amazing flutter templates out there. They offer great design and powerful features that can be customized to build any kind of app.