Flutterにてナビゲーションバーが表示されない

Question

わからないこと

Class Under Tab…の記述をどこにすればいいのかが分からないです。

（ナビを、リストと同じ画面に表示させる方法がわからないです。）
Class UnderTab…の記述位置が間違っているのかもしれません。
前回、回答いただいたコードの下に、Class Under Tab…を記述しているのですが、画面下部にナビが表示されないので、どこにClass UnderTabを記述すればいいのかを教えていただけると幸いです。。

実現したいこと

画面下部にナビゲーションメニューとリストを同画面に表示させたいです。

3日前に、投稿させていただいたもの（一対一対応のリスト）とナビゲーションメニューを同じ画面に表示させたいと考えております。（今はなぜかリストのみが表示されてしまいます）

リストの方は、文字数の都合上、載せることができませんでした。恐れ入りますが、前回ご回答してくださった方のコードを参照していただけると助かります。

前回のコード＋

class UnderTab extends StatefulWidget {
  @override
  _UnderTabState createState() => _UnderTabState();
}

// SingleTickerProviderStateMixinを使用
class _UnderTabState extends State<UnderTab>
    with SingleTickerProviderStateMixin {
  // ページ切り替え用のコントローラを定義
  PageController _pageController;

  // ページインデックス保存用
  int _screen = 0;

  // ページ下部に並べるナビゲーションメニューの一覧
  List<BottomNavigationBarItem> myBottomNavBarItems() {
    return [
      BottomNavigationBarItem(
        icon: Icon(Icons.book),
        title: const Text('Book'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.cloud),
        title: const Text('Cloud'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.cake),
        title: const Text('Cake'),
      ),
    ];
  }

  @override
  void initState() {
    super.initState();
    // コントローラ作成
    _pageController = PageController(
      initialPage: _screen, // 初期ページの指定.
    );
  }

  @override
  void dispose() {
    // コントローラ破棄
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue[900],
      // Appbar
      appBar: AppBar(
        backgroundColor: Colors.blue[900],
        title: Text(
          'BottomNav',
          style: TextStyle(fontSize: 16),
        ),
      ),
      // ),
      // ページビュー
      body: PageView(
          controller: _pageController,
          onPageChanged: (index) {
            setState(() {
              // ページインデックスを更新
              _screen = index;
            });
          },
          // ページ下部のナビゲーションメニューに相当する各ページビュー。後述
          children: [
            BookScreen(),
            CloudScreen(),
            CakeScreen(),
          ]),
      // ページ下部のナビゲーションメニュー
      bottomNavigationBar: BottomNavigationBar(
        // 現在のページインデックス
        currentIndex: _screen,
        // onTapでナビゲーションメニューがタップされた時の処理を定義
        onTap: (index) {
          setState(() {
            // ページインデックスを更新
            _screen = index;
            _pageController.animateToPage(index,
                duration: Duration(milliseconds: 300), curve: Curves.easeOut);
          });
        },
        items: myBottomNavBarItems(),
      ),
    );
  }
}

BookScreen.dart,CloudScreen.dart,CakeScreen.dartも用意してみました

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

class BookScreen extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Colors.green[100],
        // Appbar
        appBar: AppBar(
          backgroundColor: Colors.green[100],
          title: Text(
            'Book',
            style: TextStyle(fontSize: 16),
          ),
        ),
        body: Center(child: Icon(Icons.book)));
  }
}

文字数の関係から、CloudScreenとCakeScreenは省略させていただきます。
（BookScreenとちがうのは色だけです)
もしかすると、超初歩的な質問かもしれませんが回答よろしくお願いします(T.T)

Comments

[popobot]

何が、どのようにうまくいかないのかわかりません。

Answer 1

ナビゲージョンバーは、ページを切り替えるものなので、リストページ内に埋め込むものではないと思います。
ナビベーションバーで切り替える各ページ内にリストを表示するのが正しいです。

なので、上記コードでは BookScreen を 以前回答したようなコードに置き換えればいいと思います。

以下のような構造にすればいいと思います。

MaterialApp
  Scaffold
    PageView
      BookScreen
        ListView
      CloudScreen
      CakeScreen
    BottomNavigationBar

※ 質問を読み違えていたら、すみません