BottomNavigationBarを押すと画面の切り替えができるようにしたい。

Question

実現したいこと

• BottomNavigationBarを押すと画面の切り替えができるようにしたい。

前提

チャットアプリでBottomNavigationBarで画面が切り替わる機能を作っています。

発生している問題・エラーメッセージ

BottomNavigationBarの使用方法を見て、その後使ってみたのですが画面が切り替わらず、単一の画面が表示されるだけの状態となっています。

該当のソースコード

import 'package:chat_app/firestore/room_firestore.dart';
import 'package:chat_app/model/talk_room.dart';
import 'package:chat_app/pages/setting_profile_page.dart';
import 'package:chat_app/pages/talk_room_page.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';

class TopPage extends StatefulWidget {
  const TopPage({super.key});

  @override
  State<TopPage> createState() => _TopPageState();
}

class _TopPageState extends State<TopPage> {
  int selectedIndex = 0;
  List<Widget> pageList = [
    const TopPage(),
    const SettingProfilePage(),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("ChatApp"),
        actions: [
          IconButton(
            onPressed: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => const SettingProfilePage(),
                ),
              );
            },
            icon: const Icon(Icons.settings),
          ),
        ],
      ),
      body: Column(
        children: [
          StreamBuilder<QuerySnapshot>(
              stream: RoomFireStore.joinedRoomSnapshot,
              builder: (context, streamSnapshot) {
                if (streamSnapshot.hasData) {
                  return FutureBuilder<List<TalkRoom>?>(
                      future:
                          RoomFireStore.fetchJoinedRooms(streamSnapshot.data!),
                      builder: (context, futureSnapshot) {
                        if (futureSnapshot.connectionState ==
                            ConnectionState.waiting) {
                          return const Center(
                            child: CircularProgressIndicator(),
                          );
                        } else {
                          if (futureSnapshot.hasData) {
                            List<TalkRoom> talkRooms = futureSnapshot.data!;
                            return ListView.builder(
                                itemCount: talkRooms.length,
                                itemBuilder: (context, index) {
                                  return InkWell(
                                    onTap: () {
                                      Navigator.push(
                                        context,
                                        MaterialPageRoute(
                                          builder: (context) => TalkRoomPage(
                                            talkRoom: talkRooms[index],
                                          ),
                                        ),
                                      );
                                    },
                                    child: SizedBox(
                                      height: 70,
                                      child: Row(
                                        children: [
                                          Padding(
                                            padding: const EdgeInsets.symmetric(
                                                horizontal: 8.0),
                                            child: CircleAvatar(
                                              radius: 30,
                                              backgroundImage: talkRooms[index]
                                                          .talkUser
                                                          .imagePath ==
                                                      null
                                                  ? null
                                                  : NetworkImage(
                                                      talkRooms[index]
                                                          .talkUser
                                                          .imagePath!),
                                            ),
                                          ),
                                          Column(
                                            crossAxisAlignment:
                                                CrossAxisAlignment.start,
                                            mainAxisAlignment:
                                                MainAxisAlignment.center,
                                            children: [
                                              Text(
                                                talkRooms[index].talkUser.name,
                                                style: const TextStyle(
                                                  fontWeight: FontWeight.bold,
                                                ),
                                              ),
                                              Text(
                                                talkRooms[index].lastMessage ??
                                                    "",
                                                style: const TextStyle(
                                                  color: Colors.grey,
                                                ),
                                              ),
                                            ],
                                          ),
                                        ],
                                      ),
                                    ),
                                  );
                                });
                          } else {
                            return const Center(
                              child: Text("FAILED"),
                            );
                          }
                        }
                      });
                } else {
                  return const Center(
                    child: CircularProgressIndicator(),
                  );
                }
              }),
          pageList[selectedIndex],
        ],
      ),
      bottomNavigationBar: BottomNavigationBar(
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.wechat),
            label: "Chats",
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: "Setting",
          ),
        ],
        currentIndex: selectedIndex,
        onTap: (index) {
          setState(() {
            selectedIndex = index;
          });
        },
      ),
    );
  }
}

試したこと

画面が切り替わらない問題が発生した後、BottomNavigationBarの使い方を調べ30分ほど見直したが解決せず。Flutter Cleanを実行した後、再実行したが状況改善せず。もしかしたら見落としているものがあるかも知れずそれによって画面が切り替わらないのかも知れないので、ここで質問させていただくことにしました。
長くなってしまったのでSettingProfilePage()はコメント欄に記載します。

補足情報（FW/ツールのバージョンなど）

[✓] Flutter (Channel stable, 3.7.8, on macOS 13.2.1 22D68 darwin-x64,
locale ja-JP)
[✓] Android toolchain - develop for Android devices (Android SDK version
32.1.0-rc1)
[✓] Xcode - develop for iOS and macOS (Xcode 14.2)
[✓] Chrome - develop for the web
[✓] Android Studio (version 2021.2)
[✓] VS Code (version 1.76.2)
[✓] Connected device (3 available)
[✓] HTTP Host Availability

参考にしたページ・動画

pageListの使い方で参考にした動画
https://www.udemy.com/course/flutter-firebase-sns/learn/lecture/28160742#content

bodyが複数ある場合の実装方法に使用したページ
https://www.choge-blog.com/programming/flutterscaffold-bodymultiplewidget/

Comments

[Jedda]

```setting_profile_page.dart
import 'dart:io';

import 'package:chat_app/firestore/user_firestore.dart';
import 'package:chat_app/model/user.dart';
import 'package:chat_app/utils/shared_prefs.dart';
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:image_picker/image_picker.dart';

class SettingProfilePage extends StatefulWidget {
const SettingProfilePage({super.key});

@override
State<SettingProfilePage> createState() => _SettingProfilePageState();
}

class _SettingProfilePageState extends State<SettingProfilePage> {
File? image;
String imagePath = '';
final ImagePicker _picker = ImagePicker();
final TextEditingController controller = TextEditingController();

Future<void> selectImage() async {
try {
final XFile? pickedImage =
await _picker.pickImage(source: ImageSource.gallery);
if (pickedImage == null) return;

final File imageFile = File(pickedImage.path);
final Uint8List imageBytes = await imageFile.readAsBytes();
if (imageBytes.isNotEmpty) {
setState(() {
image = imageFile;
});
} else {
throw PlatformException(
code: 'invalid_image',
message: 'Cannot load representation of selected image',
details: null);
}
} on PlatformException catch (e) {
debugPrint('Image picker error: $e');
}
}

Future<void> uploadImage() async {
String path = image!.path.substring(image!.path.lastIndexOf('/') + 1);
final ref = FirebaseStorage.instance.ref(path);
final storedImage = await ref.putFile(image!);
imagePath = await storedImage.ref.getDownloadURL();
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text("Setting"),
),
body: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
children: [
Row(
children: [
const SizedBox(width: 150, child: Text("Name")),
Expanded(
child: TextField(
controller: controller,
),
),
],
),
const SizedBox(
height: 50,
),
Row(
children: [
const SizedBox(width: 150, child: Text("Profile Image")),
Expanded(
child: Container(
alignment: Alignment.center,
child: ElevatedButton(
onPressed: () async {
await selectImage();
uploadImage();
},
child: const Text("Select Image"),
),
),
),
],
),
const SizedBox(
height: 100,
),
image == null
? const SizedBox()
: SizedBox(
width: 350,
height: 200,
child: Image.file(
image!,
fit: BoxFit.cover,
)),
const SizedBox(
height: 150,
),
SizedBox(
width: 150,
height: 40,
child: ElevatedButton(
onPressed: () async {
User newProfile = User(
name: controller.text,
imagePath: imagePath,
uid: SharedPrefs.fetchUid()!);
await UserFirestore.updateUser(newProfile);
},
child: const Text("Edit"),
),
),
],
),
),
);
}
}

```

Answer 1

現在どのBottomNavigationBarのアイテムを押しているかを示すselectedIndexと、たぶん押されたもののページを定義しているpageListが_TopPageState内で使われていないので、ページ遷移しないのは当たり前では。

ページ移動をさせたいのであればBottomNavigationBarのonTapでpageList[selectedIndex]でpushするのでいいのでは。