如何更改BottomNavigationBar背景色？

Question

我用標簽欄制作了一個簡單的應用程序。 我需要將“底部導航欄”的背景顏色更改為藍色。 該應用程序的其余部分應為白色背景，導航欄應為藍色背景。 我應該怎么做？ 在ThemeData中設置canvasColor無效。

這是我的代碼：

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  State<StatefulWidget> createState(){
    return MyAppState();
}
}

class MyAppState extends State<MyApp>{

  int _selectedPage = 0;
  final _pageOptions = [
    Text('Item1'),
    Text('Item2'),
    Text('Item3')
  ];

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'sddsd',

      theme: ThemeData(
        primaryColor: Colors.blueAccent,
        fontFamily: "Google Sans"

      ),

      home: Scaffold(
        appBar: AppBar(
            title:Text("LQ2018"),
            backgroundColor: Colors.blueAccent,
        ),

      body: _pageOptions[_selectedPage],

      bottomNavigationBar: BottomNavigationBar(
        fixedColor: Colors.blueAccent,
        currentIndex: _selectedPage,
        onTap: (int index){
          setState(() {
            _selectedPage= index;
          });
        },
        items: [
          BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players')),
          BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending')),
          BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'))
        ]
      ),
      ),
    );
  }
}

Answer 1

將BottomNavigationBar包裹在主題中，並在主題數據中設置canvasColor。 @override Widget build(BuildContext context) { return Scaffold( bottomNavigationBar: Theme( data: Theme.of(context).copyWith( canvasColor: Colors.blue, textTheme: Theme.of(context) .textTheme .copyWith(caption: TextStyle(color: Colors.black54))), child: BottomNavigationBar( type: BottomNavigationBarType.fixed, currentIndex: currentIndex, fixedColor: Colors.green, onTap: (value) {}, items: [ BottomNavigationBarItem( icon: Icon(Icons.add),), ], )), ); }

Answer 2

嘗試這個

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  State<StatefulWidget> createState(){
    return MyAppState();
  }
}

class MyAppState extends State<MyApp>{

  int _selectedPage = 0;
  final _pageOptions = [
    Text('Item1'),
    Text('Item2'),
    Text('Item3')
  ];

  @override
  Widget build(BuildContext context) {

    return MaterialApp(
      title: 'sddsd',

      theme: ThemeData(
          primaryColor: Colors.blueAccent,
          fontFamily: "Google Sans"

      ),

      home: Scaffold(
        appBar: AppBar(
          title:Text("LQ2018"),
          //backgroundColor: Colors.blueAccent,
        ),

        body: _pageOptions[_selectedPage],

        bottomNavigationBar: BottomNavigationBar(

            //fixedColor: Colors.blueAccent,
            type: BottomNavigationBarType.shifting,

            currentIndex: _selectedPage,
            onTap: (int index){
              setState(() {
                _selectedPage= index;
              });
            },
            items: [
              BottomNavigationBarItem(icon: Icon(Icons.supervised_user_circle), title: Text('Players'),backgroundColor: Colors.blueAccent),
              BottomNavigationBarItem(icon: Icon(Icons.whatshot), title: Text('Trending'),backgroundColor: Colors.blueAccent),
              BottomNavigationBarItem(icon: Icon(Icons.access_time), title: Text('Highlights'),backgroundColor: Colors.blueAccent)
            ]
        ),
      ),
    );
  }
}