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

11180 ワード
BottomNavigationBar Dart Flutter Dart テキストリンク

ゴール

今回は５画面に分けて作成したいと思います。
間違えていたり、足りない点がありましたら教えていただくと助かります。

動作環境

  • 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)

全体のコード

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を使用しています。

@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