DEV Community

loading...
Cover image for Building Instagram With Flutter - UI Scaffold

Building Instagram With Flutter - UI Scaffold

preetjdpdev profile image Preet Parekh ・3 min read

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

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

Bottom App 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

Instagram Original

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

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

Discussion

pic
Editor guide
Collapse
kris profile image
kris

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.