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,
            ),
          ),
        ),

Link to instagram Logo

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

Blog

Building Instagram With Flutter - UI Scaffold

Preet Parekh