Make an Instagram Clone App UI Using Flutter

 

In this tutorial, I will show you how to build an Instagram Clone App UI Using Flutter.

Source Code

import 'package:flutter/material.dart';

import 'package:google_fonts/google_fonts.dart';

import 'package:ig_tut/post.dart';

import 'package:ig_tut/storybtn.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  // This widget is the root of your application.

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      debugShowCheckedModeBanner: false,

      home: InstagramApp(),

    );

  }

}

class InstagramApp extends StatefulWidget {

  @override

  _InstagramAppState createState() => _InstagramAppState();

}

class _InstagramAppState extends State<InstagramApp> {

  //I will start by adding some varibale

  // the main background Color

  Color mainColor = Colors.blueGrey[50];

  //then I will add some dummy data to simulate a rest api

  //you can get the ressource url in the description of the video

  //now let's add the google fonts package

  //Avatar List Image

  List<String> userAvatar = [

    "https://randomuser.me/api/portraits/men/46.jpg",

    "https://randomuser.me/api/portraits/women/65.jpg",

    "https://randomuser.me/api/portraits/men/45.jpg",

    "https://randomuser.me/api/portraits/women/55.jpg",

    "https://randomuser.me/api/portraits/men/48.jpg",

    "https://randomuser.me/api/portraits/women/98.jpg",

  ];

  //Posts dummy data

  List<String> imagesUrl = [

    "https://images.unsplash.com/photo-1603599825160-8d3099a08c5a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1050&q=80",

    "https://images.unsplash.com/photo-1593606758992-a2ff8b0c10e6?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=967&q=80",

    "https://images.unsplash.com/photo-1506351894665-6e71703a4b4c?ixlib=rb-1.2.1&auto=format&fit=crop&w=1189&q=80",

    "https://images.unsplash.com/photo-1578399146091-18082eb00bcd?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=624&q=80",

  ];

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      backgroundColor: mainColor,

      //let's start by adding the app bar

      appBar: AppBar(

        backgroundColor: mainColor,

        elevation: 0.0,

        title: Text(

          "Instagram",

          style: GoogleFonts.pacifico(

            color: Colors.black,

            fontWeight: FontWeight.bold,

            fontSize: 26,

          ),

        ),

        leading: IconButton(

          onPressed: () {},

          color: Colors.black,

          icon: Icon(

            Icons.photo_camera,

          ),

        ),

        centerTitle: true,

        actions: [

          IconButton(

            onPressed: () {},

            color: Colors.black,

            icon: Icon(Icons.send),

          ),

        ],

      ),

      //Now let's build the body of the app

      body: SingleChildScrollView(

        child: Column(

          children: [

            //let's start by createing the stores time line

            Padding(

              padding:

                  const EdgeInsets.symmetric(horizontal: 12.0, vertical: 8.0),

              child: Row(

                mainAxisAlignment: MainAxisAlignment.spaceBetween,

                children: [

                  Text("Stories"),

                  Text("Watch all"),

                ],

              ),

            ),

            Container(

              height: 110.0,

              child: ListView(

                scrollDirection: Axis.horizontal,

                children: [

                  //let's create a custom widget for out story button

                  storyButton(userAvatar[0], "Joseph"),

                  storyButton(userAvatar[1], "Annie"),

                  storyButton(userAvatar[2], "Jean"),

                  storyButton(userAvatar[3], "Crista"),

                  storyButton(userAvatar[4], "Eren"),

                  storyButton(userAvatar[5], "Hanjie"),

                ],

              ),

            ),

            //Now let's build the Post widget

            post(userAvatar[0], "Jospeh", imagesUrl[0], "In Vacation !! "),

            post(userAvatar[1], "Annie", imagesUrl[1],

                "New look what do you think of it  "),

            post(userAvatar[2], "Jean", imagesUrl[2], "In Love with nature "),

            post(userAvatar[3], "Crista", imagesUrl[3], "Photography "),

          ],

        ),

      ),

      //Now let's build the bottom navigation bar

      bottomNavigationBar: BottomNavigationBar(

        unselectedItemColor: Colors.black,

        selectedItemColor: Colors.pink[300],

        backgroundColor: mainColor,

        items: [

          BottomNavigationBarItem(

            backgroundColor: mainColor,

            icon: Icon(Icons.home),

            title: Text("Home"),

          ),

          BottomNavigationBarItem(

            backgroundColor: mainColor,

            icon: Icon(Icons.search),

            title: Text("Search"),

          ),

          BottomNavigationBarItem(

            backgroundColor: mainColor,

            icon: Icon(Icons.camera),

            title: Text("take a picture"),

          ),

          BottomNavigationBarItem(

            backgroundColor: mainColor,

            icon: Icon(Icons.favorite),

            title: Text("notification"),

          ),

          BottomNavigationBarItem(

            backgroundColor: mainColor,

            icon: Icon(Icons.person),

            title: Text("Profile"),

          ),

        ],

      ),

    );

  }

}