[Flutter] Modal bottom sheet 내에서 Push, Pop의 화면 천이를 실현한다

1. 네비게이터 중첩

child: RaisedButton(
  color: Colors.blue,
  textColor: Colors.white,
  onPressed: () => showModalBottomSheet(
    context: context,
    // 自前でモーダル用Navigatorを作成
    builder: (context) => Navigator(
      onGenerateRoute: (context) => MaterialPageRoute<ModalPage>(
        builder: (context) => ModalPage(),
      ),
    ),
  ),
  child: Text('Show modal'),
),

2. 화면을 닫을 때는 root측의 Navigator를 참조한다

return Scaffold(
  appBar: AppBar(
    leading: IconButton(
        // 閉じるときはネストしているModal内のRouteではなく、root側のNavigatorを指定する必要がある
        onPressed: () => Navigator.of(context, rootNavigator: true).pop(),
        icon: Icon(Icons.close)),
    title: Text('Modal'),
  ),

완성

덤