프로젝트 설치 & ThemeData로 스타일 분리하는 방법
- 새롭게 프로젝트 만들기
- Flutter로 프로젝트 생성 시 SDK 위치 잘 확인 후 생성하기
- 이후 analysis_options.yaml의 rules 내부에 아래의 코드 넣어서 Lint 우선 끄기
- 추후에 앱 발행 시 다시 true로 돌려서 불필요한 재렌더링 막아서 성능 향샹 시키기!
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
- 우선 해당 강의에서는 인스타를 만들려고 하기에 기본적인 레이아웃을 만들기!
- 그래서 Scaffold() 위젯을 사용하려는데
- 지난 포스팅에서 설명 한 것처럼 Scaffold 위젯은 Material() 위젯 안에 있어야 하기에
- 관리하기 편하도록 MyApp을 감싸는 상위 태그 안에 MaterialApp으로 MyApp을 home에 추가해주기
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(
appBar: AppBar(),
body: Container(),
bottomNavigationBar: Container(),
);
}
}
- 이제 스타일을 추가하려는데 지금까지는 위젯 안에 style과 같은 것을 활용해서 하나씩 변경했는데 그러다보니 관리 또는 확인에 대한 불편함이 있었다.
- 그래서 스타일을 하나로 모아서 관리하기 위해 ThemeData() 위젯을 사용
- HTML의 CSS 또는 style 태그와 같은 것으로 볼 수 있다.
- ThemeData() 위젯을 MaterialApp 안에 theme 파라미터로 추가할 수 있다.
void main() {
runApp(
MaterialApp(
theme: ThemeData(),
home: MyApp()
)
);
}
- 현재 body에 있는 Icon을 style을 사용하지 않고 ThemeData()를 사용해서 색상을 변경하고자 한다면 아래와 같이 구현할 수 있다.
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
iconTheme: IconThemeData( color: Colors.red )
),
home: MyApp()
)
);
}
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Icon(Icons.add_alert_sharp),
);
}
}
- ThemeData() 위젯을 장점
- 공통의 속성(크기, 색상)을 가진 것을 한번에 관리하기 용이하다.
- 다른 파일로 빼서 관리할 수 있기에 코드 가독성이 좋아진다.
- ThemeData() 위젯의 특징
- 위젯은 나랑 가까운 스타일을 가장 먼저 적용
- 복잡한 위젯은 복잡한위젯Theme() 안에서 스타일을 적용하는 것이 더 가깝다.
- 즉 iconTheme와 AppBarTheme가 있을 경우 appBar에 있는 아이콘의 색상을 변경하고자 한다면 iconTheme()보다 AppBarTheme() 안에서 주는 것이 좋다.
- 물론 iconTheme()만 해도 적용은 안됨.
- 그래서 적용이 안된다면 위와 같은 방법으로 적용해보면 좋을듯!
- 이제 ThemeData() 위젯에서 textTheme 파라미터를 사용해보려고 할 때 주의점으로 아래 사진과 같이 정말 여러 종류의 파라미터가 있다.
- 이유로
- Text()는 bodyText2 적용
- ListTile()은 subtitle1 적용
- TextButton()은 button 적용
- AppBar()는 headline6를 적용
- 이처럼 textTheme는 뭔가 사용할 때 불편하기에 원래 Text() 위젯 안에 style을 넣어서 사용하고 해당 style을 변수에 담아서 간단하게 적용하는 방법도 많이 사용한다고 한다.
class MyApp extends StatelessWidget {
MyApp({super.key});
var a = TextStyle( color: Colors.pinkAccent);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Text('안녕하싱싱', style: a,),
// bottomNavigationBar: Container(),
);
}
}
과제
import 'package:flutter/material.dart';
void main() {
runApp(
MaterialApp(
theme: ThemeData(
appBarTheme: AppBarTheme(
titleTextStyle: TextStyle(color: Colors.black, fontSize: 22),
color: Colors.white,
iconTheme: IconThemeData(
size: 30,
color: Colors.black
)
)
),
home: MyApp()
)
);
}
class MyApp extends StatelessWidget {
MyApp({super.key});
var a = TextStyle( color: Colors.pinkAccent);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Instagram'),
actions: [
IconButton(
onPressed: (){},
icon: Icon(Icons.add_box_outlined)
)
],
),
);
}
}
