[Flutter] 인스타그램 클론 생성하기 - 1 화면 설계 및 프로젝트 생성

화면설계

로그인 했을 경우와 안했을 경우 다른 화면이 뜰 수 있도록

RootPage를 최초페이지로 두고 경우에 따라 Login Page 또는 Tab Page가 나오도록 설정

 

 

프로젝트 생성

왼쪽 상단 탭 File > New > New Flutter Project...를 선택하여 프로젝트를 생성한다.

SDK 위치 확인하기

 

SDK 설치방법

2023.04.26 - [Study/소소한 팁] - [Flutter] 플러터 설치 및 환경설정(Windows)

[Flutter] 플러터 설치 및 환경설정(Windows)

 

프로젝트 이름 설정 후 Create를 눌러 프로젝트를 생성한다.

 

 

프로젝트 생성 후 lib 디렉토리 아래 화면별로 Directory를 생성한다.

Direcotory는 원하는 위치에서 마우스 우클릭 > New > Directory를 클릭하여 생성한다.

위 사진과 같이 Directory와 dart파일을 생성해둔다.

 

 

Tab Page 생성하기

main.dart

import 'package:flutter/material.dart';

import 'tab/tab_page.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const TabPage(),
    );
  }
}

tab_page.dart

import 'package:flutter/material.dart';

class TabPage extends StatefulWidget {
  const TabPage({Key? key}) : super(key: key);

  @override
  State<TabPage> createState() => _TabPageState();
}

class _TabPageState extends State<TabPage> {
  int _currentIndex = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'home',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'search',
          ),BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'account',
          ),
        ],
      ),
    );
  }
}

main에서 Tab Page로 연결되게 만들었다. 로그인 기능은 나중에!!

Tab Page 하단에는 home, search, account 세개 네비바가 존재하도록 만들었다.

 

결과

 

 

 

https://github.com/LeeYoonJung/InstagramClone

GitHub - LeeYoonJung/InstagramClone: Instagram Clone (인프런 Flutter 강의)