[Flutter] BottomNavigationBarって何？

2023年4月15日2023年6月12日

Flutterは、ネイティブなモバイルアプリを開発するための人気のあるフレームワークです。Flutterには、ナビゲーションをサポートするためのさまざまなウィジェットが用意されていますが、その中でも最も一般的なのがBottomNavigationBarです。

BottomNavigationBarは、画面の下部に表示されるバーで、アプリのさまざまなセクションにアクセスするために使用されます。通常、アプリのメインページに配置され、ユーザーがアプリ内を移動するための便利なナビゲーション手段として機能します。以下では、FlutterのBottomNavigationBarの使い方を紹介します。

1. BottomNavigationBarを作成する

まずは、BottomNavigationBarを作成する必要があります。BottomNavigationBarは、3つ以上のアイテムを含むことができます。各アイテムには、アイコンとテキストを設定することができます。以下の例では、3つのアイテムを含むBottomNavigationBarを作成しています。

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

この例では、BottomNavigationBarのアイテムとして、Home、Search、Profileという3つのタブを作成しています。それぞれのアイテムには、アイコンとテキストが設定されています。onTapTappedメソッドは、タブがタップされたときに呼び出され、_currentIndexを更新して、現在のアクティブなタブを示します。_childrenリストには、それぞれのタブに対応するウィジェットが格納されています。

2. タブの内容を表示する

次に、各タブに対応する内容を表示するウィジェットを作成する必要があります。各タブに対応するウィジェットは、_childrenリストに格納されています。以下の例では、HomeScreen、SearchScreen、ProfileScreenという各タブに対応するウィジェットを作成するために、それぞれの画面を作成します。例えば、以下のようにHomeScreenを作成することができます。

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('This is the Home Screen'),
      ),
    );
  }
}

この例では、Scaffoldウィジェットを使用して、AppBarとCenterウィジェットを含む画面を作成しています。AppBarは、画面上部にタイトルを表示するために使用されます。Centerウィジェットは、画面中央にテキストを表示するために使用されます。

同様に、SearchScreenとProfileScreenも作成することができます。

3. BottomNavigationBarを使う

最後に、作成したBottomNavigationBarを使ってナビゲーションを実装します。MyBottomNavigationBarウィジェットを、アプリのメイン画面として使用することができます。以下のように、MyBottomNavigationBarウィジェットを呼び出すことで、BottomNavigationBarを含む画面を表示することができます。

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: MyBottomNavigationBar(),
    );
  }
}

これで、FlutterのBottomNavigationBarを使ったナビゲーションを実装することができます。アプリ内を移動するための便利な手段として、BottomNavigationBarは非常に役立ちます。

サンプルコード/実行結果

上記説明で記載した全コード及び、実行結果を記載します。

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'My App',
      home: MyBottomNavigationBar(),
    );
  }
}

class MyBottomNavigationBar extends StatefulWidget {
  @override
  _MyBottomNavigationBarState createState() => _MyBottomNavigationBarState();
}

class _MyBottomNavigationBarState extends State<MyBottomNavigationBar> {
  int _currentIndex = 0;

  final List<Widget> _children = [
    HomeScreen(),
    SearchScreen(),
    ProfileScreen(),
  ];

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        items: [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.search),
            label: 'Search',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
        ],
      ),
    );
  }
}

class HomeScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Home'),
      ),
      body: Center(
        child: Text('This is the Home Screen'),
      ),
    );
  }
}

class SearchScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Search'),
      ),
      body: Center(
        child: Text('This is the Search Screen'),
      ),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Profile'),
      ),
      body: Center(
        child: Text('This is the Profile Screen'),
      ),
    );
  }
}

まとめ

これで、FlutterのBottomNavigationBarを使って、アプリ内のナビゲーションを実装する方法を学びました。BottomNavigationBarを使用することで、アプリのユーザーエクスペリエンスを向上させることができます。タブに対応する各画面を作成し、BottomNavigationBarを使用してそれらをナビゲートすることができます。是非、この方法を使って自分だけのアプリを作成してみてください！

よかったらシェアしてね！

URLをコピーしました！

URLをコピーしました！