Flutter Themes, Theme widget, ThemeData

Flutter Themes, Theme widget, ThemeData

 

[Ko]

 - app frame 상태에서의 파란색 app bar 와 파란색 floating action button은 flutter의 default theme인 flutter light theme이 적용되어 있는 것임.

 - theme을 적용하기 위해서는 MaterialApp widget의 theme property에 ThemeData를 이용해서 설정함.

 - 기본적으로 builtin dark theme을 사용하면서 특정 theme만을 변경해서 사용하려면

 —> ThemeData.dark().copyWith(~~~customtheme setup~~~)

 

MaterialApp(

//      theme: ThemeData.dark(),

      theme: ThemeData.dark().copyWith(

        primaryColor: Color(0xFF0A0E21),

        scaffoldBackgroundColor: Color(0xFF0A0E21),

      ),

      home: InputPage(),

    );

 

 - 전체 app theme 외에 특정 widget에는 다른 theme을 적용하고 싶다면, 해당 위젯을 Theme 위젯으로 감싸고, data property의 값으로 ThemeData widget의k property들을 설정해서 넣어줌.

 

floatingActionButton: Theme(

  data: ThemeData(accentColor: Colors.purple),

  child: FloatingActionButton(

    child: Icon(Icons.add),

  ),

 

[En]

 - The blue app bar and the blue floating action button in the app frame state are applied to the flutter light theme, which is the default theme of flutter.
 - To apply the theme, set it using ThemeData in the theme property of the MaterialApp widget.
 - To use only a specific theme while using the builtin dark theme by default
 —> ThemeData.dark (). CopyWith (~~~ customtheme setup ~~~)

 

MaterialApp(

//      theme: ThemeData.dark(),

      theme: ThemeData.dark().copyWith(

        primaryColor: Color(0xFF0A0E21),

        scaffoldBackgroundColor: Color(0xFF0A0E21),

      ),

      home: InputPage(),

    );

 

- If you want to apply a different theme to a specific widget in addition to the entire app theme, wrap the widget with a Theme widget and set the k properties of the ThemeData widget as the value of the data property.

 

floatingActionButton: Theme(

  data: ThemeData(accentColor: Colors.purple),

  child: FloatingActionButton(

    child: Icon(Icons.add),

  ),