web-dev-qa-db-ja.com

BOTTOMNAVICATIONBARのページに応じてAppBarのタイトルを変更してください

ユーザーがどのページにあるかに応じてAppBarのタイトルを変更しようとしています。

これを変更した唯一の方法は、ページごとにAppBarを含めることです。これは私が先に進む方法ではないと思います。

class HomePage extends StatefulWidget {
  final String title;

  HomePage({Key key, this.auth, this.userId, this.onSignedOut, this.title})
      : super(key: key);

  final BaseAuth auth;
  final VoidCallback onSignedOut;
  final String userId;

  @override
  State<StatefulWidget> createState() => new _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _currentIndex = 0;
  final List<Widget> _children = [
    Projects(),
    TimedProject(),
    Overview(),
    Clients(),
  ];

  GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey();

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      key: _scaffoldKey,
      appBar: AppBar(
        title: Text('TITLE I NEED TO CHANGE DEPENDING ON PAGE',
          style: TextStyle(color: Colors.black),
        ),

        backgroundColor: Colors.white,
      ),
      endDrawer: AppDrawer(),
      body: _children[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        onTap: onTabTapped,
        currentIndex: _currentIndex,
        selectedItemColor: Theme.of(context).primaryColor,
        type: BottomNavigationBarType.fixed,
        items: [
          new BottomNavigationBarItem(
            icon: Icon(Icons.storage),
            title: Text('Jobs'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.timer),
            title: Text('Timer'),
          ),
          new BottomNavigationBarItem(
            icon: Icon(Icons.pie_chart_outlined),
            title: Text('Overview'),
          ),
          new BottomNavigationBarItem(
              icon: Icon(Icons.supervisor_account), title: Text('Clients'))
        ],
      ),
    );
  }

  void onTabTapped(int index) {
    setState(() {
      _currentIndex = index;
    });
  }
}
 _
flutterappbar
11
Kylie Walker

onTapで条件を満たすだけです

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
int _selectedIndex = 1;
String appbarTitleString = "Home";
var appBarTitleText = new Text("Home");
static const TextStyle optionStyle =
TextStyle(fontSize: 30, fontWeight: FontWeight.bold);
static const List<Widget> _widgetOptions = <Widget>[
Text(
  'Index 0: Profile',
  style: optionStyle,
),
Text(
  'Index 1: Home',
  style: optionStyle,
),
Text(
  'Index 2: More',
  style: optionStyle,
),
 ];

@override
Widget build(BuildContext context) {
return Scaffold(

  appBar: AppBar(
    title: appBarTitleText,
  ),
  body: Center(
    child: _widgetOptions.elementAt(_selectedIndex),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.business),
        title: Text('Profile'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.home),
        title: Text('Home'),
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.school),
        title: Text('More'),
      ),
    ],
    currentIndex: _selectedIndex,
    selectedItemColor: Colors.amber[800],
    onTap: _onItemTapped,
  ),
);
}
void _onItemTapped(int index) {
setState(() {
  _selectedIndex = index;
  if (index == 0){
    appbarTitleString = "Profile" ;
    appBarTitleText = new Text(appbarTitleString);
  }else if (index == 1){
    appbarTitleString = "Home" ;
    appBarTitleText = new Text(appbarTitleString);
  }else if(index == 2){
    appbarTitleString = "More" ;
    appBarTitleText = new Text(appbarTitleString);
  }
});
}
}
 _
0
Sahid rahutomo

たとえば、さまざまな.DartファイルでBottomNavigationBarを区切るには、config.Dart：

import 'package:flutter/material.Dart';

class Config {

  static List<BottomNavigationBarItem> navigationBarItems = [
    BottomNavigationBarItem(
      icon: Icon(
        Icons.date_range,
      ),
      title: Text(
        "Calendar",
      ),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.list, // event_note
      ),
      title: Text(
        "List",
      ),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.bookmark_border, // grid_on 
      ),
      title: Text(
        "Bookmarks",
      ),
    ),
    BottomNavigationBarItem(
      icon: Icon(
        Icons.account_circle,
      ),
      title: Text(
        "Me",
      ),
    ),
  ];

  static BottomNavigationBar navigationBar = BottomNavigationBar(
    items: navigationBarItems,
    type: BottomNavigationBarType.fixed,
    fixedColor: Colors.red,
  );

}

そしてmain.Dartでは：

import 'package:flutter/material.Dart';
import 'config.Dart';

void main() => runApp(App());

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  HomePage({Key key}) : super(key: key);

  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {

  int _index = 0;
  Text _title;

  _onTap(int index) {
    setState(() {
      _index = index;
      _title = Config.navigationBarItems[_index].title;
    });
  }

  @override
  void initState() {
    _title = Config.navigationBarItems[_index].title;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: _title,
      ),
      body: Container(
      ),
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _index,
        type: Config.navigationBar.type,
        fixedColor: Config.navigationBar.fixedColor,
        items: Config.navigationBar.items,
        onTap: _onTap,
      ),
    );
  }
}
0
ohho