web-dev-qa-db-ja.com

FlutterのスタイルBottomNavigationBar

Flutterを試し、アプリのBottomNavigationBarの色を変更しようとしていますが、BottomNavigationItem（アイコンとテキスト）の色を変更するだけでした。

BottomNavigationBarを宣言する場所は次のとおりです。

class _BottomNavigationState extends State<BottomNavigationHolder>{

  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: const Icon(Icons.home),
              title: new Text("Home")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.work),
              title: new Text("Self Help")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.face),
              title: new Text("Profile")
          )
        ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
      ),
    );
  }

以前、メインアプリのテーマでcanvasColorを編集して緑色にすることで理解できたと思っていましたが、アプリの配色全体を台無しにしました。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Flutter Demo',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        canvasColor: Colors.green
      ),
      home: new FirstScreen(),
    );
  }
}
dartflutterbottomnavigationview
26
spongyboss

BottomNavigationBarの背景色を指定するオプションはありませんが、canvasColorを変更することはできます。アプリ全体を台無しにすることなくそれを達成できる1つの方法は、BottomNavigationBarをThemeに必要なcanvasColorでラップすることです。

例：

  bottomNavigationBar: new Theme(
    data: Theme.of(context).copyWith(
        // sets the background color of the `BottomNavigationBar`
        canvasColor: Colors.green,
        // sets the active color of the `BottomNavigationBar` if `Brightness` is light
        primaryColor: Colors.red,
        textTheme: Theme
            .of(context)
            .textTheme
            .copyWith(caption: new TextStyle(color: Colors.yellow))), // sets the inactive color of the `BottomNavigationBar`
    child: new BottomNavigationBar(
      type: BottomNavigationBarType.fixed,
      currentIndex: 0,
      items: [
        new BottomNavigationBarItem(
          icon: new Icon(Icons.add),
          title: new Text("Add"),
        ),
        new BottomNavigationBarItem(
          icon: new Icon(Icons.delete),
          title: new Text("Delete"),
        )
      ],
    ),
  ),

お役に立てば幸いです！

76
Hemanth Raj

enter image description here

以前は色を直接設定する方法はありませんでしたが、今では使用できます。

BottomNavigationBar(
  backgroundColor: Colors.red,
  selectedItemColor: Colors.black,
  unselectedItemColor: Colors.white,
  ...
)
5
CopsOnRoad

受け入れられた答えは完全に間違っているわけではありません。ただし、BottomNavigationBarには実際にはbackgroundColorのプロパティがあります。ドキュメントに従って

タイプがBottomNavigationBarType.shiftingで、itemsにBottomNavigationBarItem.backgroundColorが設定されている場合、アイテムのbackgroundColorがスプラッシュし、この色を上書きします。

これは、デフォルトのタイプがBottomNavigationBarType.shiftingであるため、BottomNavigationのbackgroundColorが個々の項目backgroundColorによってオーバーライドされることを意味します。

これを修正するには、宣言されたBottomNavigationbarウィジェットに次のプロパティを追加するだけです。

type: BottomNavigationBarTyle.fixed,

注：ただし、シフト効果が必要な場合は、各アイテムの色を宣言するか、子ウィジェットの背景色をオーバーライドできるウィジェットをラップする必要があります。

つまり、Containerウィジェットのようなものです。

1
MagicMike

BottomNavigationBarをContainerにラップしてから、colorを設定してください。

例：

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new Container(
        color: Colors.green,
        child: BottomNavigationBar(
          items: <BottomNavigationBarItem>[
            new BottomNavigationBarItem(
                icon: const Icon(Icons.home),
                title: new Text("Home")
            ),
            new BottomNavigationBarItem(
                icon: const Icon(Icons.work),
                title: new Text("Self Help")
            ),
            new BottomNavigationBarItem(
                icon: const Icon(Icons.face),
                title: new Text("Profile")
            )
          ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        ),
      );
    );
  };
0
Billybogz

backgroundColorプロパティをBottomNavigationBarwidgetに追加するだけです。

@override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: null,
      body: pages(),
      bottomNavigationBar:new BottomNavigationBar(
        items: <BottomNavigationBarItem>[
          new BottomNavigationBarItem(
              icon: const Icon(Icons.home),
              title: new Text("Home")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.work),
              title: new Text("Self Help")
          ),
          new BottomNavigationBarItem(
              icon: const Icon(Icons.face),
              title: new Text("Profile")
          )
        ],
        currentIndex: index,
        onTap: (int i){setState((){index = i;});},
        fixedColor: Colors.white,
        backgroundColor: Colors.black45,
      ),
    );
  }
0
mjhansen3