Building Instagram With Flutter - UI Scaffold
Tags: flutter, instagram, design
Published: 2019-01-26 14:09:17

#HomePage
Hey how are you??
In this post I will be building out the home page.
The Home Page will be a [CustomScrollView.](https://docs.flutter.io/flutter/widgets/CustomScrollView-class.html)
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.](https://medium.com/flutter-io/slivers-demystified-6ff68ab0296f)
``` Flutter
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

![App Bar](https://thepracticaldev.s3.amazonaws.com/i/f3pofavowtwggxf11pfc.jpg)
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,
            ),
          ),
        ),
```
[Link to instagram Logo](https://thepracticaldev.s3.amazonaws.com/i/9dgus6e6o80pv1gx8y7t.png)

##Bottom Bar
![Bottom App Bar](https://thepracticaldev.s3.amazonaws.com/i/3a4lhiq9fjtalggaf8fr.jpg)
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
![Instagram Original](https://thepracticaldev.s3.amazonaws.com/i/rdixs1wib5vsfqhzxx2n.png)

The post Widget will contain a column with three childrens.
1. The first children contain a Row to accomodate a profile image, poster name, and a menu button.
2. The second child will be the main image which can be of any size.
3. 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](https://pub.dartlang.org/packages/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)
            ],
          ),
        ),
      ],
    );
  }
}

```
![Flutter Instagram](https://thepracticaldev.s3.amazonaws.com/i/h3lfdnd2vmq1uqvtzwzg.jpg)

###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??!