[flutter] 인스타그램 클론코딩_Tab page 연결하기

이제 아까 만든 tab 페이지에 각각 page 파일들을 연결하는 것을 해볼것이다.
우선 기초 틀만 만들어둔 상태로 연결을 시도해보자.

1. home_page 설정

import 'package:flutter/material.dart';

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

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

우선 home Page의 경우, 뒤로가기 등의 기능이 존재할 수 있는 상위의 bar인 AppBar가 필요하다. 이를 위해 Scafford 안에 Appbar를 설정해준다.

appBar: AppBar(
        title : const Text('Instargram Clone'),
      ),

body 내부에는 내용을 넣을 수 있다. Column을 통해 수직으로 자식 위젯을 배열한다. 또한 children 속성 안에 Text를 넣어 글자를 띄워 본다.

body : const Column(
        children: [
          Text('Instargram에 오신 것을 환영합니다.')
        ],
      )

2. account_page, search_page 설정

import 'package:flutter/material.dart';

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

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

import 'package:flutter/material.dart';

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

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

이 두 페이지는 간단하게 Container만 우선 설정해두었다.

3. TabPage에 연결

import 'package:flutter/material.dart';
import 'package:instar_clone_renew/tab/account/account_page.dart';
import 'package:instar_clone_renew/tab/home/home_page.dart';
import 'package:instar_clone_renew/tab/search/search_page.dart';

class TabPage extends StatefulWidget {
  const TabPage({super.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',
          ),
        ],
      ),
    );
  }
}

tap page에 연결하기 위해서 다음과 같은 부분이 추가되었다.

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

우선 final 선언을 한, 페이지들을 담을 리스트를 생성한다

body : _pages[_currentIndex],

우리는 body 부분에 페이지들을 나타낼 것이다.
앞에서 봤듯이 _currentIndex에는 현재 페이지의 인덱스가 들어있다.
이를 통해 body에서 해당하는 페이지를 띄울 수 있도록 한다.

4. 결과

다음과 같이 페이지가 잘 나오는 것을 볼 수 있다.