[Flutter]BottomNavigationBarでページを切り替えた時にAppBarのタイトルを変える
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);
},
),
);
}
}