[Flutter] BottomNavigationBarを５画面作成してみた。


##ゴール
今回は５画面に分けて作成したいと思います。
間違えていたり、足りない点がありましたら教えていただくと助かります。
![タイトルなし.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/696165/9cc15c94-6ca8-2d42-aac4-b0f458ba98d0.gif)
##動作環境
- 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
    ja-JP)
 
- [✓] Android toolchain - develop for Android devices (Android SDK version 30.0.2)
- [✓] Xcode - develop for iOS and macOS (Xcode 12.4)
- [✓] Android Studio (version 4.1)
- [✓] Android Studio (version 4.1)
- [✓] Connected device (1 available)


##全体のコード

```dart: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つのステップ）
１、 ナビゲーションで遷移する先の画面の設定（List形式）
２、 遷移先の画面を示す配列番号の設定
３、 BottomNavigationBarItemの設定
４、 Itemが押された時の処理の設定
５、 遷移先の画面の表示
　
##１、 ナビゲーションで遷移する先の画面の設定（List形式）
_pagesというListに遷移先のページを格納していきます。

```
  List<Widget> _pages;

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

```

##２、 遷移先の画面を示す配列番号の設定[currentIndex]
変数プロパティの作成
初めに表示するページをHomeとします。

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

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

```

##３、 BottomNavigationBarItemの設定[items]
BottomNavigationBarに[items]という属性がある。
items  (List BottomNavigationBarItem) 
このListを5つ並べてあげる
iconは[font_awesome_flutter](https://pub.dev/packages/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"),
          ),
        ],
      ),
    );
  }

```

##４、 Itemが押された時の処理の設定[onTap]
２、に押された配列番号をセットします。ページに飛ばしてあげる作業になります。
onTap属性は引数一つが入った関数になります。
StatefulWidgetを使っているので、setStateを使います

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

##５、 遷移先の画面の表示[Scafold,body属性に入れる]

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

##感想
割とシンプルで、理解できたかなと思います。
最後に、ガチなTODOアプリをリリースしております、みてくださると光栄です。
[ガチDO](https://apps.apple.com/jp/app/%E3%82%AC%E3%83%81do/id1560607333)