플러터 프로젝트 시작시 해야할 기본 셋팅, ThemeData() 에서 스타일 관리하기

프로젝트 시작은 main.dart 켜서 

 

import 'package:flutter/material.dart';
 
void main() {
  runApp(
    MaterialApp(
      home : MyApp()
    )
  );
}

class MyApp extends StatelessWidget { 
  MyApp({Key? key}) : super(key: key); 
  @override 
  Widget build(BuildContext context) {

    return Scaffold();

  }
}

이렇게 채우고 시작할겁니다.

왜냐면 MaterialApp() 이건 밖으로 빼야 덜 불편하니까요. 

 

 

그리고 analysis_options.yaml 파일 열어서 

rules:
  prefer_typing_uninitialized_variables: false
  prefer_const_constructors_in_immutables: false
  prefer_const_constructors: false
  avoid_print: false
  prefer_const_literals_to_create_immutables: false 

이거 rules 부분에 추가하고 시작할겁니다. 

const 쓰라고하는건 필요없는 재렌더링을 막아서 쬐끔 성능향상때문에 쓰는건데 

나중에 앱 발행하기 전에 true로 바꿔서 써보든가 해보십시오. 

 

 

 

 

 

ThemeData() 에서 스타일 관리하기

 

스타일을 넣을 때 위젯마다 하나하나 스타일 넣으면

코드가 금방 더러워집니다.

그래서 모든 위젯을 한 번에 스타일 넣을 수 있는 공간이 있는데

MaterialApp() 안에 ThemeData()를 열면 됩니다. 

 

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

theme : ThemeData() 를 넣어보십시오.

이제 거기 안에 스타일 넣으면 모든 위젯들 스타일을 한 번에 결정할 수 있습니다.

 

 

 

 

 

ThemeData() 에 넣을 수 있는 것들 

 

당연히 파라미터 안에 뭐 넣어야 뭐가 되는지 모를 땐

컨트롤 + space 누르면 자동완성되는 것들을 확인하면 됩니다. 

버튼, 글자, AppBar, 아이콘 등 많은 것들이 가능 

 

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

예를 들면

iconTheme : IconThemeData() 여기 안에다가 빨간 스타일 넣으면 이제 모든 아이콘들이 빨개지고 

appBarTheme : AppBarTheme() 여기 안에다가 회색 배경색을 넣으면 모든 AppBar가 회색이 됩니다.

진짜 변했는지 아이콘과 앱바 넣어서 확인해보십시오. 

결론은 통일성 있는 UI 디자인 같은거 원하면 ThemeData 자주 활용해보십시오. 

레이아웃 짜던 코드도 깔끔해지고 좋음 

 

Q. 스타일 중복이 발생하면?

A. 나랑 물리적으로 가까운 스타일을 먼저 적용하려고 합니다.

 

Q. 분명 ThemeData() 에 모든 아이콘을 파란색으로 칠해놨는데

AppBar 안의 actions: [] 아이콘엔 적용이 안되는 것?

 

A. 복잡한 위젯은 복잡한위젯Theme() 안에서 스타일 줘야 잘 작동합니다.

그래서 AppBarTheme() 안에서 아이콘 스타일 주면 됩니다. 

그런 위젯들이 있다고 외울 순 없어서 언제나 검색으로 해결해야합니다. 

 

 

Dialog() 스타일 넣으려면 dialogTheme: DialogTheme(),

SnackBar() 스타일 넣으려면 snackBarTheme : SnackBarThemeData(),

TimePicker() 스타일 넣으려면 timePickerTheme: TimePickerThemeData(),

매우 많습니다. 

 

css랑 비슷한 느낌이 많음

 

 

Text()의 스타일을 변경하고 싶으면

 

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

textTheme 쓰면 됩니다. 

근데 이상하게도 안에서 bodyText2 라는 것의 스타일을 변경해야합니다.

 

textTheme 안에서 정할 수 있는 것들 중에

headline1

headline2

bodyText1

bodyText2

subtitle1

이런 글자 스타일 종류들이 있는데

Text 위젯은 이 중에 bodyText2 스타일을 사용하고 

AppBar와 Dialog 위젯은 이 중에 headline6을 사용하고 

ListTile 위젯은 이 중에 subtitle1을 사용하고

그런 식으로 정해져있습니다. 

 

 

 

그래서 글자스타일은 그냥 변수에 저장해놓고

var text1 = TextStyle(color : Colors.red);
Text('글자', style : text1) 

이렇게 쓰는 식으로 코드짜는게 훨씬 편리합니다. 

변수에 넣어두면 재사용도 편리해지겠군요. 

 

 

ThemeData에서 버튼 디자인 변경하려면

 

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

이런 식으로 쓰면 이제 모든 TextButton 위젯 색이 변합니다. 

(참고) styleFrom()은 ButtonStyle() 사본을 하나 생성해주는 함수입니다.

그냥 요즘 버튼은 이렇게 스타일링하라고 되어있기 때문에 쓰는 것일 뿐

구글이 개같이 만들어놓은 것들은 언제나 구글검색이 필요합니다. 

 

 

 

 

 

 

하위 ThemeData() 생성하고 싶으면

 

코드짜다가 갑자기 

특정 박스 안에서부터는 모두 글자를 파란색으로 만들고 싶은겁니다.

그럼 레이아웃 중간에 ThemeData()를 하나 새로 만들어서 넣으면 됩니다. 

 

 

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

이런 식입니다.

그래서 레이아웃 중간에 전체적인 스타일을 변경하고 싶으면 Theme() 위젯열어서 안에 ThemeData() 쓰면 됩니다.

좀 더 가까운 스타일을 적용하려고 하기 때문에 이제 내부 글자들은 전부 파란색이 될 겁니다. 

하지만 이런거 쓸 일은 거의 없습니다. 

 

 

 

 

 

 

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

 

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

Theme.of()는 족보를 하나 입력할 수 있는데

그 족보에서 가장 가까운 ThemeData()를 찾아서 가져와주는 함수입니다. 

그럼 위 예제처럼 그 안에서 bodyText1에 정의한 스타일을 꺼내올 수도 있는 것임 

원하는 스타일을 딱 집어서 꺼내고 싶은 경우 쓰는 함수입니다.