LoginSignup
10
2

More than 3 years have passed since last update.

KBOYのFlutter大学Advent Calendar 2020Day 13flutteruniv
@flogfulofuloinFlutter大学

【Flutter】 iphoneのようにボトムナビゲーションを作る

Last updated at Posted at 2020-12-12

Flutterでの下タブでのナビゲーションについてです。

マテリアルデザインであればそのままBottomNavigationBarを使用すればいいのですがその場合
画面遷移で下タブが消えてしまうので遷移後に別タブの画面切り替えができません。

今回の記事はiosのように下タブを残したまま画面遷移をさせる方法についてです。
以下を記述しています。

  • CupertinoTabScaffoldを使用しながら下タブを表示させずに画面遷移する方法
  • androidのバックキーを押下した際に現在のタブから前画面に戻る方法

CupertinoTabScaffoldを使用しながら下タブを表示させずに画面遷移する方法

画面遷移する際にrootNavigatorをtrueにしてpushします。

Navigator.of(context, rootNavigator: true).push(
   MaterialPageRoute(
      builder: (context) => nextPage(),
   ),
);

androidのバックキー押下した際に現在のタブから前画面に戻る方法

上記のpushのように下タブを表示せずに画面遷移した場合は問題ありませんが
CupertinoTabScaffoldを使用して下タブを表示しながら画面遷移をした場合androidでバックキーを押すとアプリが閉じます。
これはバックキーでpopの処理が行われているのですが
表示されている画面のcontextではなく、CupertinoTabScaffoldを使用した親画面のcontextを用いて
popしているため親画面は画面遷移していないのでアプリが閉じています。
※iOSの場合は特に何もしなくても画面を左スワイプで前画面に戻ることが可能です。

方法としてはstaticで各タブのcontextを保持しておき、バックキーを押されたタイミングで親画面から各タブのcontextを呼び出しpopします。

/// androidのバックキー制御するための各タブ分のcontext保持クラス
class ConstantsChildContext {
  static int selectedIndex = 0;
  static BuildContext childContext0;
  static BuildContext childContext1;
  static BuildContext childContext2;
}

各タブのbuild時にcontextを初回だけセットします。

/// 初回に各タブのChildContextをセットする
void setChildContext({@required BuildContext childContext}) {
  switch (ConstantsChildContext.selectedIndex) {
    case 0:
      if (ConstantsChildContext.childContext0 == null) {
        ConstantsChildContext.childContext0 = childContext;
      }
      break;
    case 1:
      if (ConstantsChildContext.childContext1 == null) {
        ConstantsChildContext.childContext1 = childContext;
      }
      break;
    case 2:
      if (ConstantsChildContext.childContext2 == null) {
        ConstantsChildContext.childContext2 = childContext;
      }
      break;
  }
}

最後に親画面でCupertinoTabScaffoldの親WidgetとしてWillPopScopeを書き、
ここでバックキーを押した際のイベントを取得します。

     @override
  Widget build(BuildContext context) {
    /// WillPopScopeで親画面のbackKeyイベントを取得し、現在のタブのcontextをpopして前画面に戻る
    return WillPopScope(
      onWillPop: () async {
        /// バックキー押下時のイベント取得
        return _onBackKeyAndroid();
      },
      child: CupertinoTabScaffold(),
    );
  }

各タブで前画面に戻れるかどうかを判定しbool値をかえします。

 /// バックキーをタップすると各画面のpopを実行(Androidのみ)
  bool _onBackKeyAndroid() {
    if (Platform.isAndroid) {
      switch (ConstantsChildContext.selectedIndex) {
        case 0:
          if (Navigator.canPop(ConstantsChildContext.childContext0)) {
            Navigator.pop(ConstantsChildContext.childContext0);
          } else {
            /// 前画面に戻れない場合にアプリを閉じたくなければここはfalse
            return true;
          }
          break;
        case 1:
          if (Navigator.canPop(ConstantsChildContext.childContext1)) {
            Navigator.pop(ConstantsChildContext.childContext1);
          } else {
            return true;
          }
          break;
        case 2:
          if (Navigator.canPop(ConstantsChildContext.childContext2)) {
            Navigator.pop(ConstantsChildContext.childContext2);
          } else {
            return true;
          }
          break;
      }
    }
    return false;
  }

これでandroidのバックキー制御ができるようになりました。

こちらで勉強しました。
サンプルコードのデザインはそのままです。

サンプルコード

main.dart
import 'package:flutter/material.dart';

import 'home_page.dart';

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

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}
home_page.dart
import 'dart:io';

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'constants_child_context.dart';
import 'custom_page.dart';

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  static List<Widget> _pageList = [
    CustomPage(
      pannelColor: Colors.cyan,
      title: 'Home',
      pageCount: 1,
    ),
    CustomPage(
      pannelColor: Colors.green,
      title: 'Settings',
      pageCount: 1,
    ),
    CustomPage(
      pannelColor: Colors.pink,
      title: 'Search',
      pageCount: 1,
    )
  ];

  void _onItemTapped(int index) {
    setState(() {
      ConstantsChildContext.selectedIndex = index;
    });
  }

  /// バックキーをタップすると各画面のpopを実行(Androidのみ)
  bool _onBackKeyAndroid() {
    if (Platform.isAndroid) {
      switch (ConstantsChildContext.selectedIndex) {
        case 0:
          if (Navigator.canPop(ConstantsChildContext.childContext0)) {
            Navigator.pop(ConstantsChildContext.childContext0);
          } else {
            /// 前画面に戻れない場合にアプリを閉じたくなければここはfalse
            return true;
          }
          break;
        case 1:
          if (Navigator.canPop(ConstantsChildContext.childContext1)) {
            Navigator.pop(ConstantsChildContext.childContext1);
          } else {
            return true;
          }
          break;
        case 2:
          if (Navigator.canPop(ConstantsChildContext.childContext2)) {
            Navigator.pop(ConstantsChildContext.childContext2);
          } else {
            return true;
          }
          break;
      }
    }
    return false;
  }

  @override
  Widget build(BuildContext context) {
    /// WillPopScopeで親画面のbackKeyイベントを取得し、現在のタブのcontextをpopして前画面に戻る
    return WillPopScope(
      onWillPop: () async {
        return _onBackKeyAndroid();
      },
      child: CupertinoTabScaffold(
        tabBar: CupertinoTabBar(
          items: [
            BottomNavigationBarItem(
              icon: Icon(Icons.home),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.settings),
            ),
            BottomNavigationBarItem(
              icon: Icon(Icons.search),
            ),
          ],
          currentIndex: ConstantsChildContext.selectedIndex,
          onTap: _onItemTapped,
          backgroundColor: Colors.white,
        ),
        tabBuilder: (context, index) {
          return CupertinoTabView(
            builder: (context) {
              return _pageList[index];
            },
          );
        },
      ),
    );
  }
}
constants_child_context.dart
import 'package:flutter/cupertino.dart';

/// androidのバックキー制御するための各タブ分のcontext保持クラス
class ConstantsChildContext {
  static int selectedIndex = 0;
  static BuildContext childContext0;
  static BuildContext childContext1;
  static BuildContext childContext2;
}

/// 初回に各タブのChildContextをセットする
void setChildContext({@required BuildContext childContext}) {
  switch (ConstantsChildContext.selectedIndex) {
    case 0:
      if (ConstantsChildContext.childContext0 == null) {
        ConstantsChildContext.childContext0 = childContext;
      }
      break;
    case 1:
      if (ConstantsChildContext.childContext1 == null) {
        ConstantsChildContext.childContext1 = childContext;
      }
      break;
    case 2:
      if (ConstantsChildContext.childContext2 == null) {
        ConstantsChildContext.childContext2 = childContext;
      }
      break;
  }
}
custom_page.dart
import 'package:flutter/material.dart';

import 'constants_child_context.dart';
import 'full_screen_custom_page.dart';

class CustomPage extends StatelessWidget {
  final Color pannelColor;
  final String title;
  final int pageCount;

  CustomPage(
      {@required this.pannelColor,
      @required this.title,
      @required this.pageCount});

  @override
  Widget build(BuildContext context) {
    setChildContext(childContext: context);
    final titleTextStyle = Theme.of(context).textTheme.title;
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                    color: pannelColor,
                    borderRadius: BorderRadius.all(Radius.circular(20.0))),
                child: Center(
                  child: Text(
                    title + pageCount.toString(),
                    style: TextStyle(
                      fontSize: titleTextStyle.fontSize,
                      color: titleTextStyle.color,
                    ),
                  ),
                ),
              ),
              TextButton(
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) => CustomPage(
                          pannelColor: pannelColor,
                          title: title,
                          pageCount: pageCount + 1,
                        ),
                      ),
                    );
                  },
                  child: Text('下タブあり次画面')),
              TextButton(
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(
                        builder: (context) => FullScreenCustomPage(
                            pannelColor: pannelColor,
                            title: title,
                            pageCount: pageCount + 1),
                      ),
                    );
                  },
                  child: Text('下タブなし次画面')),
            ],
          ),
        ),
      ),
    );
  }
}
full_screen_custom_page.dart
import 'package:flutter/material.dart';

class FullScreenCustomPage extends StatelessWidget {
  final Color pannelColor;
  final String title;
  final int pageCount;

  FullScreenCustomPage(
      {@required this.pannelColor,
      @required this.title,
      @required this.pageCount});

  @override
  Widget build(BuildContext context) {
    final titleTextStyle = Theme.of(context).textTheme.title;
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Container(
                width: 200,
                height: 200,
                decoration: BoxDecoration(
                    color: pannelColor,
                    borderRadius: BorderRadius.all(Radius.circular(20.0))),
                child: Center(
                  child: Text(
                    title + pageCount.toString(),
                    style: TextStyle(
                      fontSize: titleTextStyle.fontSize,
                      color: titleTextStyle.color,
                    ),
                  ),
                ),
              ),
              TextButton(
                  onPressed: () {
                    Navigator.of(context, rootNavigator: true).push(
                      MaterialPageRoute(
                        builder: (context) => FullScreenCustomPage(
                          pannelColor: pannelColor,
                          title: title,
                          pageCount: pageCount + 1,
                        ),
                      ),
                    );
                  },
                  child: Text('次画面へ')),
            ],
          ),
        ),
      ),
    );
  }
}
10
2
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
Sign upLogin
10
2