본문 바로가기
Flutter/Flutter FAQ

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

by 베타코드 2023. 6. 23.
반응형

질문


저는 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"),
        )
      ],
    ),
  ),
반응형

댓글