[Flutter]BottomNavigationBarでページを切り替えた時にAppBarのタイトルを変える

画像1

画像2

画像3

onTap()のところでタイトルのstateを変える。

import 'package:flutter/material.dart';
import 'package:flutter_hooks/flutter_hooks.dart';
import 'package:hooks_riverpod/hooks_riverpod.dart';
import 'package:flutter/foundation.dart'; // *.freezed.dartで必要なのでimportしておく
import 'package:freezed_annotation/freezed_annotation.dart';
import 'package:listview/widget/bar_chart.dart';
import 'package:listview/widget/card.dart';
import 'package:listview/widget/card_list.dart';
import 'package:listview/widget/list.dart';
import 'package:listview/widget/scatter_chart.dart';

part 'home.freezed.dart';

@freezed
abstract class HomeState with _$HomeState {
 const factory HomeState({
   @Default(0) int page,
   @Default('s chart') String title,
 }) = _HomeState;
}

final homeStateProvider = StateNotifierProvider((_) => HomeStateProvider());

class HomeStateProvider extends StateNotifier<HomeState> {
 HomeStateProvider() : super(const HomeState());
 
 void initState() {}
 void dispose() {}
 
 void onItemTapped(int index, PageController pageController) {
   String _title;
   if (index == 0) _title = 's chart';
   if (index == 1) _title = 'bar chart';
   if (index == 2) _title = 'card';
   if (index == 3) _title = 'card list';
   if (index == 4) _title = '1';
   if (index == 5) _title = '2';
   if (index == 6) _title = '3';
   state = state.copyWith(title: _title);
   pageController.animateToPage(index,
       duration: const Duration(milliseconds: 300), curve: Curves.ease);
 }
 void onPageChanged(int index) {
   state = state.copyWith(page: index);
 }
}

class MyHomePage extends HookWidget {
 final items = List.generate(10, (index) => 'Item: $index');
 final _pageController = PageController();
 
 @override
 Widget build(BuildContext context) {
   final hsp = useProvider(homeStateProvider);
   final homeState = useProvider(homeStateProvider.state);
   return Scaffold(
     appBar: AppBar(
       title: Text(homeState.title),
     ),
     body: PageView(
       controller: _pageController,
       onPageChanged: hsp.onPageChanged,
       children: [
         ScatterChartSample1(),
         BarChartSample1(),
         CardPage(),
         CardListPage(),
         MyList1(),
         MyList2(),
         MyList3(),
       ],
     ),
     bottomNavigationBar: BottomNavigationBar(
       items: const <BottomNavigationBarItem>[
         BottomNavigationBarItem(
           icon: Icon(Icons.bubble_chart),
           label: 's_chart',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.bar_chart),
           label: 'bar_chart',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.card_membership),
           label: 'card',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.card_travel),
           label: 'card_list',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.home),
           label: '1',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.youtube_searched_for_rounded),
           label: '2',
         ),
         BottomNavigationBarItem(
           icon: Icon(Icons.animation),
           label: '3',
         ),
       ],
       currentIndex: homeState.page,
       fixedColor: Colors.pink[300],
       iconSize: 24,
       // showSelectedLabels: true,
       showUnselectedLabels: true,
       unselectedItemColor: Colors.grey,
       onTap: (index) {
         hsp.onItemTapped(index, _pageController);
       },
     ),
   );
 }
}

この記事が気に入ったらサポートをしてみませんか?