[Flutter] Instagram UI 만들기 - 2

0. 개요

Flutter 플랫폼을 사용하여 Instagram UI를 만들어보는 프로젝트

 

[Flutter] Instagram UI 만들기 - 1

5. Create Home

Instagram stroy와 게시글을 만들기 위해 lib폴더에 util폴더를 생성 후 util 폴더 안에 bubble_stories.dart, user_posts.dart 파일을 생성합니다.

 

 

lib/pages/home.dart

import 'package:flutter/material.dart';
import '../util/bubble_stories.dart';
import '../util/user_posts.dart';

class UserHome extends StatelessWidget {
  final List people = [
    'Alice',
    'Bob',
    'Alex',
    'Raina',
    'Carol'
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Text(
                'Instagram',
                style: TextStyle(color: Colors.black),
              ),
              Row(
                children: [
                  GestureDetector(
                      onTap:() {
                        // do something..
                      },
                      child: Icon(Icons.add)),
                  Padding(
                    padding: const EdgeInsets.all(24.0),
                    child: Icon(Icons.favorite),
                  ),
                  Icon(Icons.share),
                ],
              )
            ],
          )),
      body: Column(
        children: [
          // STORIES
          Container(
            height: 130,
            child: ListView.builder(
                scrollDirection: Axis.horizontal,
                itemCount: people.length,
                itemBuilder: (context, index) {
                  return BubbleStories(text: people[index]);
                }),
          ),
          //POSTS
          Expanded(
            child:ListView.builder(
                itemCount: people.length,
                itemBuilder: (context, index) {
                  return UserPosts(
                    name: people[index],
                  );
                }),
          ),
        ],
      ),
    );
  }
}

 

lib/util/bubble_stories.dart

import 'package:flutter/material.dart';

class BubbleStories extends StatelessWidget {
  final String text;

  BubbleStories({required this.text});

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(8.0),
      child: Column(
        children: [
          Container(
            width: 60,
            height: 60,
            decoration: BoxDecoration(
              shape: BoxShape.circle,
              color: Colors.grey[400],
            ),
          ),
          SizedBox(
            height: 10,
          ),
          Text(text)
        ],
      ),
    );
  }
}

 

lib/util/user_posts.dart

import 'package:flutter/material.dart';

class UserPosts extends StatelessWidget {
  final String name;

  UserPosts({required this.name});

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  // profile photo
                  Container(
                    width: 40,
                    height: 40,
                    decoration: BoxDecoration(
                      color: Colors.grey[300],
                      shape: BoxShape.circle,
                    ),
                  ),
                  SizedBox(
                    width: 10,
                  ),
                  // name
                  Text(
                    name,
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  Icon(Icons.menu)
                ],
              )
            ],
          ),
        ),

        // post
        Container(
          height: 400,
          color: Colors.grey[300],
        ),

        // below the post -> buttons and comments
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Row(
                children: [
                  Icon(Icons.favorite),
                  Padding(
                    padding: const EdgeInsets.symmetric(horizontal: 12.0),
                    child: Icon(Icons.chat_bubble_outline),
                  ),
                  Icon(Icons.share),
                ],
              ),
              Icon(Icons.bookmark)
            ],
          ),
        ),

        // like by...
        Padding(
          padding: const EdgeInsets.only(left: 16.0),
          child: Row(
            children: [
              Text('Liked by '),
              Text(
                'Bob',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
              Text(' and '),
              Text(
                'others',
                style: TextStyle(fontWeight: FontWeight.bold),
              ),
            ],
          ),
        ),

        // caption
        Padding(
          padding: const EdgeInsets.only(left: 16.0, top: 8.0),
          child: RichText(
            text: TextSpan(
              style: TextStyle(color: Colors.black),
              children: [
                TextSpan(
                    text: name,
                    style: TextStyle(fontWeight: FontWeight.bold)),
                TextSpan(
                    text:
                    ' how are you doing well?')
              ],
            ),
          ),
        ),
        // comments
      ],
    );
  }
}

 

 

6. Create Search

Instagram search에 여러 게시글을이 보일 수 있도록 util 폴더 안에 explore_grid.dart 파일을 생성합니다.

 

lib/pages/search.dart

import 'package:flutter/material.dart';
import '../util/explore_grid.dart';

class UserSearch extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          backgroundColor: Colors.transparent,
          elevation: 0,
          title: ClipRRect(
            borderRadius: BorderRadius.circular(8),
            child: Container(
              padding: EdgeInsets.all(8),
              color: Colors.grey[400],
              child: Row(
                children: [
                  Icon(Icons.search, color: Colors.grey[500],),
                  Container(
                      child: Text('Search',
                        style: TextStyle(color: Colors.grey[500]),)
                  )
                ],
              ),
            ),
          )
      ),
      body: ExploreGrid(),
    );
  }
}

lib/util/explore_grid.dart

import 'package:flutter/material.dart';

class ExploreGrid extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GridView.builder(
      itemCount: 20,
      gridDelegate:
      SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 3),
      itemBuilder: (context, index) {
        return Padding(
          padding: const EdgeInsets.all(2.0),
          child: Container(
            color: Colors.deepPurple[100],
          ),
        );
      },
    );
  }
}

 

[Flutter] Instagram UI 만들기 - 3

 

[Flutter] Instagram UI 만들기 - 4