[Flutter] Theme 파일 (사진 첨부)

Flutter에서는 자주 반복되는 글자, 버튼 등의 크기와 색상등의 스타일 옵션값을 Theme으로 설정하여 관리할 수 있습니다.

flutter main 화면

MaterialApp(
  theme: ThemeData(
    colorScheme: ColorScheme.fromSwatch(
      primarySwatch: Colors.blue, // PrimaryColor
    ).copyWith(
      secondary: Colors.green, // accentColor: Colors.cyan[600],
    ),
    textTheme:const TextTheme(bodyText2: TextStyle(color: Colors.purple)), 
  ),
  home: Scaffold(
    appBar: AppBar(
      title:const Text('ThemeData Demo'),
    ),
    floatingActionButton: FloatingActionButton(
      child:const Icon(Icons.add),
      onPressed: () {},
    ),
    body:const Center(
      child: Text('Button pressed 0 times'),
    ),
  ),
);

theme파일 만들고 사용하기

• 앱의 프로젝트 규모가 커질수록 font와 size가 다양해질 수 있다. 그렇기에 fontStyle도 위젯화하여 사용하는 방법이 복잡한 코드를 관리하는데 쉽다.

 

1. TextStyle을 모아둘 dart 파일을 만든다.
2. TextStyle 파일에 class를 만들어 다음 예시 화면과 같은 제목 아래에 TextStyle 함수를 만들어 사용한다.