Flutter 플러터에서 AppBar를 변경하지 않고 TabBar의 배경색을 변경하는 방법은 무엇인가요?, How to change background color of TabBar without changing the AppBar in flutter?

질문

TabBar의 배경색을 변경하는 방법은 있지만 AppBar은 변경하지 않을 수 있을까요? TabBar에는 background 속성이 없는데, 해결 방법이 있을까요?

답변

TabBar의 색상을 변경하려면 Theme primaryColor를 변경하면 됩니다:

return MaterialApp(
      theme: ThemeData(
        brightness: Brightness.light,
      // tabBarTheme 추가
      tabBarTheme: const TabBarTheme(
        labelColor: Colors.pink[800],
        labelStyle: TextStyle(color: Colors.pink[800]), // 텍스트 색상
        indicator: UnderlineTabIndicator( // 인디케이터(밑줄) 색상
          borderSide: BorderSide(color: ConstColor.primary))),
        primaryColor: Colors.pink[800], // 구식이며 Tabbar에 영향을 주지 않습니다.
        accentColor: Colors.cyan[600] // 사용이 중지되었습니다.
      ),
      home: DefaultTabController(
        length: 3,
        child: Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              indicatorColor: Colors.lime,
              tabs: [
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_bike)),
              ],
            ),
            title: Text('Tabs Demo'),
          ),
          body: TabBarView(
            children: [
              Icon(Icons.directions_car),
              Icon(Icons.directions_transit),
              Icon(Icons.directions_bike),
            ],
          ),
        ),
      ),
    );

AppBar에서 사용하지 않는 경우 TabBar를 Material 위젯으로 감싸고 color 속성을 설정할 수 있습니다:

class TabBarDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Tabs Demo'),
        ),
        body: DefaultTabController(
          length: 3,
          child: Column(
            children: <Widget>[
              Container(
                constraints: BoxConstraints(maxHeight: 150.0),
                child: Material(
                  color: Colors.indigo,
                  child: TabBar(
                    tabs: [
                      Tab(icon: Icon(Icons.directions_car)),
                      Tab(icon: Icon(Icons.directions_transit)),
                      Tab(icon: Icon(Icons.directions_bike)),
                    ],
                  ),
                ),
              ),
              Expanded(
                child: TabBarView(
                  children: [
                    Icon(Icons.directions_car),
                    Icon(Icons.directions_transit),
                    Icon(Icons.directions_bike),
                  ],
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}