[Flutter] ThemeData()

💡 스타일을 넣을 때 위젯마다 하나하나 스타일을 넣으면 코드가 더러워지기 때문에 ThemaData() 사용

사용법

• MaterialApp() 안에 ThemeData() 열기

MaterialApp(
  theme : ThemeData(),
  home : MyApp()
)

적용 후

ThemeData(
  iconTheme: IconThemeData(color: Colors.red, size: 60),
  appBarTheme: AppBarTheme(
    color: Colors.grey,
  ),
)

• 모든 아이콘 빨간색
• AppBar 회색

→ AppBar 안의 actions: [] 아이콘에 빨간색으로 적용이 안된다면?

• AppBarTheme() 안에 아이콘 스타일 지정
  
  

textTheme()

• Text() 스타일 변경 → textTheme 사용하면 됨

ThemeData(
  textTheme: TextTheme(
    bodyText2: TextStyle(
        color : Colors.blue,
    ),
  ),
)

• textTheme 안에는 headline1, headline2, bodyText1 등의 글자 스타일 종류가 있음
• Text 위젯은 bodyText2 사용
  
  

버튼 디자인 변경 - styleFrom()

ThemeData(
  textButtonTheme: TextButtonThemeData(
    style: TextButton.styleFrom(
      primary: Colors.black,
      backgroundColor: Colors.orange,
    )
  ),
)

• styleFrom()은 ButtonStyle() 사본을 하나 생성해주는 함수
  
  

하위 ThemeData() 생성

• 레이아웃 중간에 ThemeData() 하나 생성하면 됨

Container( 
  child : Theme(
    data : ThemeData(글자 파랗게 하는 스타일~~),
    child : Container(
      여기부터는 글자 파래짐~~
    )
  )
)

 

ThemeData() 안의 특정 스타일 불러오기

Text('안녕', style: Theme.of(context).textTheme.bodyText1)

• Theme.of()는 족보를 하나 입력할 수 있음
• 이 족보에서 가장 가까운 ThemeData()를 찾아와 가져와주는 함수
• 위의 예제는 bodyText1에 정의한 스타일을 가져올 수 있음