[flutter] 앱 테마 설정하기

플러터 앱 테마 설정하기 (ThemeData)

플러터는 자주 사용되거나 반복되는 글자, 버튼 등의 크기와 색상, 스타일 옵션 값을 테마로 설정해서 편리하게 사용할 수 있습니다. 테마를 설정하는 방법은 매우 간단해요.

 

아래는 앱 강조색과 배경색, 상단바, 버튼, 글자색 테마 옵션을 설정한 샘플 코드입니다. 이외에도 ThemeData (theme_data.dart) 파일을 참고하면 다양한 위젯 테마 옵션을 확인할 수 있어요.

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Theme Example',
      themeMode: ThemeMode.light,
      theme: ThemeData(
        brightness: Brightness.light,  // 밝기 여부
        primaryColor: Colors.black,  // 강조색
        scaffoldBackgroundColor: Colors.white,  // 앱 배경색
        appBarTheme: const AppBarTheme(
          shadowColor: Colors.white,  
          backgroundColor: Colors.blue,
        ),  // 상단바 그림자, 배경색
        floatingActionButtonTheme: const FloatingActionButtonThemeData(
          backgroundColor: Colors.blue,  
        ),  // 플로팅 버튼 배경색
        textTheme: const TextTheme(
          headline1: TextStyle(
            color: Colors.black,
            fontSize: 42,
            fontWeight: FontWeight.bold,
          ),
          headline2: TextStyle(
            color: Colors.black87,
            fontSize: 28,
            fontStyle: FontStyle.italic,
          ),
          bodyText1: TextStyle(
            fontSize: 16,
          ),
        ),
      ),
      home: const MainPage(),
    );
  }
}

 

위 샘플 코드에서 appBarTheme, floatingActionButtonTheme과 같이 특정 위젯 스타일을 지정하면, 해당 위젯을 사용할 때 더 이상 스타일을 코드를 입력하지 않아도 됩니다.

 

이번에는 글자나 색상을 위젯에서 직접 사용하는 방법을 확인해볼게요.

class MainPage extends StatefulWidget {
  const MainPage({Key? key}) : super(key: key);

  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      ...,
      body: Column(
      	children: [
          Text(
            'headline1',
            style: Theme.of(context).textTheme.headline1, // textTheme > headline1
          ),
          Text(
            'headline2',
            style: Theme.of(context).textTheme.headline2, // textTheme > headline2
          ),
          Text(
            'bodyText1',
            style: Theme.of(context).textTheme.bodyText1,  // textTheme > bodyText1
          ),
        ],
      ),
    );
  }
}

 

한 가지 아쉬운 점은 특정 위젯에 한정된 스타일 테마만 지정할 수 있다는 것인데요. 예를 들어 appBar, floatingActionButton에 색상이 같더라도 appBarTheme, floatingActionButtonTheme 옵션 값에 색상을 각각 지정해줘야 한다는 번거로움이 있어요.

 

그래서 다음 포스팅에는 조금 더 자유롭게 테마를 설정하고 사용하는 방법을 다뤄보려고 합니다.

 

🤭 주의하세요!

참고로 저의 코드는 클린하지 않습니다. 하지만 궁금하신 게 있으시면 댓글 남겨주세요~😄