Flutter import문법과 ThemeData

디자인하다보면 css처럼 코드가 많아지는데

웹 개발에서 style.css 파일 불러오는 것 처럼 미리 디자인 파일을 작성하여 불러와보자.

1.main.dart가 있는 폴더에 style.dart 생성 및 코드작성

import 'package:flutter/material.dart';

//다른 파일에서 쓸 수 없는 문법
//var _var1;

var theme =
  ThemeData(
    textButtonTheme: TextButtonThemeData(
      style: TextButton.styleFrom(
        backgroundColor: Colors.grey,
      )
    ),//버튼 스타일

    appBarTheme: AppBarTheme(
    color: Colors.white,
    elevation: 1,
    titleTextStyle: TextStyle(color: Colors.black, fontSize: 25),
    actionsIconTheme: IconThemeData(color: Colors.black,),
    ),
    textTheme: TextTheme(
      bodyText2: TextStyle(color: Colors.black),
      bodyText1: TextStyle(color: Colors.blue),

    ),
    bottomNavigationBarTheme: BottomNavigationBarThemeData(
      selectedItemColor: Colors.black,
      unselectedItemColor: Colors.grey,
    ),

  );

• 자세한 디자인 방법은 gpt에게 물어보자.

2. main.dart에서 style.dart불러오기 및 코드사용

import 'package:flutter/material.dart';
import './style.dart' as style; //style.dart를 style 이라는 변수에 담겠다.

void main() {
  runApp(
      MaterialApp(
        theme: style.theme, //디자인 테마를 style.dart파일안에 있는 theme변수를 불러와 적용한다.
        home: MyApp()
      )
  );
}

...이하 생략

• 이렇게 하면 코드 양을 줄일 수 있어 가독성이 좋아지고 하나하나 디자인을 안해도 된다.