[Flutter] 새 프로젝트 생성 및 스타일 분리

프로젝트 초기 세팅

프로젝트 생성

• File > New > New Flutter Project
• Flutter SDK Path 확인
• 프로젝트명 작명 > Create

lint 끄기

analysis_options.yaml 파일 내 rules: 밑에 코드 추가

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

const 부분은 재랜더링을 줄임, 앱 발행 전 true 시도해보기

main.dart

죄다 지우고 stless 위젯 대충 만들어서 시작
MaterialApp은 미리 빼두는게 편할듯

import 'package:flutter/material.dart';

void main() {
  runApp(MaterialApp(home: MyApp()));
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

스타일 분리: Themedata()

사용법

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
      theme: ThemeData(
        iconTheme: IconThemeData(color: Colors.blue),
        appBarTheme: AppBarTheme(color: Colors.grey),
      ),
    ),
  );
}

특징

• 위젯 본인과 가장 가까운 스타일을 먼저 적용
• 복잡한 위젯(규칙X, 찾아보며 습득)은 복잡한위젯Theme() 에 넣어야 먹을 때가 있음
  ex) IconThemeData(color: Colors.blue)이 있어도 appBar: AppBar(actions: [Icon(Icons.star)]), 속의 star는 blue가 아님

ThemeData 디자인 반영안됨

기존 코드

theme: ThemeData(
  iconTheme: IconThemeData(color: Colors.amber),
  appBarTheme: AppBarTheme(color: Colors.grey),
),

생김새

변경 코드

theme: ThemeData(
  iconTheme: IconThemeData(color: Colors.amber),
  appBarTheme: AppBarTheme(
    color: Colors.grey,
    actionsIconTheme: IconThemeData(color: Colors.amber),
  ),
),

생김새

TextThemeData 활용

• Text()는 bodyText2를 사용하는 등 내부적으로 정의된 값 존재
• 전체 Text 설정이라면 ThemeData 안에 넣어도 되지만 var text1 = TextStyle(); Text('', style: text1) 처럼 변수로 빼서 쓰는 게 나을지도