[Flutter] BottomNavigationBar를 5화면 작성해 보았다.

목표

이번은 5화면으로 나누어 작성하고 싶습니다.
실수하거나 부족한 점이 있으면 가르쳐 주시면 도움이됩니다.

운영 환경

OS: macOS Catalina(11.2.3)

Xcode: Version 12.4

Android Studio: Version 4.1

[✓] Flutter (Channel stable, 1.22.4, on macOS 11.2.3 20D91 darwin-x64, locale
ko-KR)

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)

[✓] Xcode - develop for iOS and macOS (Xcode 12.4)

[✓] Android Studio (버전 4.1)

[✓] Android Studio (버전 4.1)

[✓] Connected device (1 available)

전체 코드

home_screen.dart

import 'package:flutter/material.dart';
import 'package:font_awesome_flutter/font_awesome_flutter.dart';
import 'package:surfing_sns/view/page/feed_page.dart';
import 'package:surfing_sns/view/page/profile_page.dart';
import 'package:surfing_sns/view/page/surf_search_page.dart';
import 'package:surfing_sns/view/page/team_page.dart';
import 'package:surfing_sns/view/page/weather_page.dart';

class HomeScreen extends StatefulWidget {
  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
 List<Widget> _pages;
 int _currentIndex = 0;

@override
void initState() {
  _pages = [
    FeedPage(),
    SurfSearchPage(),
    TeamPage(),
    WeatherPage(),
    ProfilePage(),
  ];
  super.initState();
}


  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: [
          BottomNavigationBarItem(
              icon: FaIcon(FontAwesomeIcons.home),
              label: ("Home"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.search),
            label: ("Search"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.plusSquare),
            label: ("Team"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.sun),
            label: ("Weather"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.user),
            label: ("Profile"),
          ),
        ],
      ),
    );
  }
}

진행 방법(5단계)

1, 네비게이션으로 천이하는 처의 화면의 설정(List 형식)
2, 천이처의 화면을 나타내는 배열 번호의 설정
3, BottomNavigationBarItem 설정
4, Item을 눌렀을 때의 처리 설정
5, 전환 대상 화면 표시
　

1, 네비게이션으로 천이하는 처의 화면의 설정(List 형식)

_pages라는 List에 전환 대상 페이지를 저장합니다.

  List<Widget> _pages;

  @override
  void initState() {
    _pages = [
      FeedPage(),
      SurfSearchPage(),
      TeamPage(),
      WeatherPage(),
      ProfilePage(),
    ];
    super.initState();
  }

2, 전환 대상 화면을 나타내는 배열 번호 설정 [currentIndex]

변수 속성 만들기
처음에 표시할 페이지를 Home이라고 합니다.

  List<Widget> _pages;
  int _currentIndex = 0;//Homeからスタートさせる為

  @override
  void initState() {
    _pages = [
      FeedPage(),
      SurfSearchPage(),
      TeamPage(),
      WeatherPage(),
      ProfilePage(),
    ];
    super.initState();
  }

3, BottomNavigationBarItem 설정 [items]

BottomNavigationBar에는 [items]라는 속성이 있습니다.
items (List BottomNavigationBarItem)
이 List를 5개 늘어놓아 준다
icon은 font_awesome_flutter을 사용하고 있습니다.

@override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text('サンプル'),
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: [
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.home),
            label: ("Home"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.search),
            label: ("Search"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.plusSquare),
            label: ("Team"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.sun),
            label: ("Weather"),
          ),
          BottomNavigationBarItem(
            icon: FaIcon(FontAwesomeIcons.user),
            label: ("Profile"),
          ),
        ],
      ),
    );
  }

4, Item을 눌렀을 때의 처리 설정 [onTap]

2, 에 눌러진 배열 번호를 설정합니다. 페이지에 날려 주는 작업이 됩니다.
onTap 속성은 하나의 인수가 포함된 함수입니다.
StatefulWidget을 사용하기 때문에 setState를 사용합니다.

 bottomNavigationBar: BottomNavigationBar(
 onTap: (index) {
          setState(() {
            _currentIndex = index;　//タップした時に配列に行かせる
          });
        },

5, 전환 대상 화면 표시 [Scaffold,body 속성에 넣기]

 return Scaffold(
      body: _pages[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _currentIndex,//属性追加
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },

감상

비교적 간단하고 이해할 수 있었을까라고 생각합니다.
마지막으로, 굉장한 TODO 앱을 릴리스하고 있습니다, 봐 주시면 영광입니다.
가치 DO