flutter에서 다크모드 테마 적용하기

플러터로 만든 앱에 다크모드와 같은 테마를 적용하기 위해선 MyApp의 MaterialApp에 theme 파라메터만 설정해주면 된다.
ThemeData 객체에 원하는값을 셋팅해준 후 theme(기본테마)와 dartTheme(다크테마)에 설정해주도록 하자.

class MyApp extends StatelessWidget {  
  const MyApp({Key? key}) : super(key: key);  

  // This widget is the root of your application.  
  @override  
  Widget build(BuildContext context) {  
    return MaterialApp(  
      title: 'Flutter Demo',  
      theme: ThemeData(  
        brightness: Brightness.light,  
        primarySwatch: Colors.blue,  
        scaffoldBackgroundColor: Colors.white,  
        floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor:Colors.blue),  
        appBarTheme: const AppBarTheme(  
          backgroundColor: Colors.white,  
          foregroundColor: Colors.blue,  
          elevation: 0.2,  
        ),  

        useMaterial3: true,  
      ),  
      darkTheme: ThemeData(  
        brightness: Brightness.dark,  
        primarySwatch: Colors.blue,  
        scaffoldBackgroundColor: Colors.black,  
        floatingActionButtonTheme: const FloatingActionButtonThemeData(backgroundColor:Colors.blue),  
        appBarTheme: const AppBarTheme(  
          backgroundColor: Colors.black,  
          foregroundColor: Colors.blue,  
          shadowColor: Colors.black,  
          elevation: 0.2,
        ),  
      ),  
      themeMode: ThemeMode.system,  
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );  
  }  
}

마지막으로 themeMode에 ThemeMode.system을 설정하면 사용자가 다크모드를 설정했는지에 따라서 자동으로 테마가 바뀌고 themeMode: ThemeMode.dark 로 변경하면 항상 다크모드가, themeMode: ThemeMode.light 로 설정하면 항상 기본 테마모드가 설정된다.