Flutter 플러터에서 BottomNavigationBar 스타일, Style BottomNavigationBar in Flutter

질문

저는 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(),
    );
  }
}

답변

BottomNavigationBar의 배경색을 지정할 수 있는 옵션이 없지만 canvasColor를 변경할 수 있습니다. 전체 앱을 엉망으로 만들지 않고 원하는 canvasColor를 가진 Theme으로 BottomNavigationBar를 감싸면 이를 구현할 수 있습니다.

예시:

  bottomNavigationBar: new Theme(
    data: Theme.of(context).copyWith(
        // `BottomNavigationBar`의 배경색을 설정합니다.
        canvasColor: Colors.green,
        // `Brightness`가 light일 경우 `BottomNavigationBar`의 활성 색상을 설정합니다.
        primaryColor: Colors.red,
        // `BottomNavigationBar`의 비활성 색상을 설정합니다.
        textTheme: Theme
            .of(context)
            .textTheme
            .copyWith(caption: new TextStyle(color: Colors.yellow))),
    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"),
        )
      ],
    ),
  ),