Flutter static Instagram UI Part-1

3 min readOct 29, 2018

About the app:

I’m created static Instagram app by using flutter. We can use this Flutter Instagram application in both android and iOS. This application looks similar to native app.

This application only for UI.

pubspec.yaml:

Here I’m added Instagram font.

In project directory I’m created one folder called assets. Inside assets folder I created one more folder called font, there I’m added Instagram font.

Application screens:

1.Login Page:

In this screen just I design login ui and checking the conditions. If the condition true it’ll go to next screen else it’ll show alert dialog box.

2.HomeScreen:

This home screen has two scroll view(vertical scroll view and horizontal scroll view) .

Widget _floatPic() {
  return Container(
    height: 100.0,
    color: Colors.white,
    child: new Column(
      children: <Widget>[
        new Flexible(
            child: new ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: 21,
                itemBuilder: (BuildContext context, int index) {
                  return new Container(
                    child: new Column(
                      children: <Widget>[
                        new Container(
                          margin: EdgeInsets.all(10.0),
                          child: new Image.asset(
                            (index == 0)
                                ? "assets/images/your_acc.png"
                                : "assets/images/friend_acc.png",
                            height: 60.0,
                          ),
                        ),
                        new Text((index == 0) ? "You" : " Friend $index")
                      ],
                    ),
                  );
                })),
        new Container(
          height: 0.5,
          color: Colors.grey[300],
        )
      ],
    ),
  );
}

The above Widget for horizontal scroll view. Here I’m using flutter ListView.Builder constructor. If index value equal to zero, it’ll display your account image and your account name.

Widget _listView() {
  return Container(
    child: new Flexible(
        child: new ListView.builder(
            itemCount: 21,
            itemBuilder: (BuildContext context, int index) {
              return new Container(
                child: (index == 0)
                    ? _floatPic()
                    : new Container(
                        color: Colors.white,
                        height: 390.0,
                        child: new Column(
                          children: <Widget>[
                            _titleFriendAcc(index),
                            _listImage(),
                            _listBottom(),
                            _listBottomDate()
                          ],
                        ),
                      ),
              );
            })),
  );
}