[Flutter] 인스타그램 클론 생성하기 -2 네비바 클릭 시 화면 전환 기능 구현

화면설계

Tab Page에 네비바가 존재하고, Home Page, SearchPage, Account Page가 있다. 각 메뉴를 클릭하였을 경우 각 페이지로 이동되도록 구현한다.

일단 화면이 이동되는 것만 구현해두고, 각 페이지는 다음에 차근차근 변경할 예정이다.

 

 

bottomNavigationBar: 하단에 있는 네비게이션 바

bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex, // 선택된 네비게이션바 아이템 Index
        onTap: (index) { // 클릭이벤트
          setState(() {
            _currentIndex = index; // 클릭한 네비게이션바 아이템을 현재 Index로 지정.
          });
        },
        items: const [ // 네비게이션 바 리스트
          BottomNavigationBarItem(
            icon: {아이콘},
            label: {라벨명},
          ),
        ],
      )

TabPage에서 클릭이벤트를 줘 클릭시 선택된 네비아이템이 표시되게 한다.

 

인스타그램 클론 네비게이션바기능구현

 

소스코드

tab_page.dart

import 'package:flutter/material.dart';
import 'package:instagram_clone/tab/account/account_page.dart';
import 'package:instagram_clone/tab/home/home_page.dart';
import 'package:instagram_clone/tab/search/search_page.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;

  final _pages = const [
    HomePage(),
    SearchPage(),
    AccountPage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      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',
          ),
        ],
      ),
    );
  }
}

네비게이션바 아이템을 클릭시 body 내용이 변할 수 있도록, 네비바 아이템과 body안 페이지 리스트 갯수를 맞춰 코드를 설계한다.

 

home_page.dart

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar:  AppBar(
        title: const Text('Instagram Clone'),
      ),
      body: Column(
        children: [
          Text('Instagram에 오신 것을 환영합니다.')
        ],
      )
    );
  }
}

search_page.dart

import 'package:flutter/material.dart';

class SearchPage extends StatelessWidget {
  const SearchPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

account_page.dart

import 'package:flutter/material.dart';

class AccountPage extends StatelessWidget {
  const AccountPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

 

 

https://github.com/LeeYoonJung/InstagramClone

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