ํ๋ฌํฐ๋ฅผ ํ๋ฉด์ ์ ์ฒด์ ์ธ ํ ๋ง๋ฅผ ๋ฐ๊พธ๋ ๋ฒ์ ๊ณต๋ถํ๋๋ก ํ์
Flutter ์ THEME๋ ์ฑ์ ์ฒด์์ ํน์ ํ ์์์ด๋ ๊ธ๊ผด์ ํต์ผ์์ผ์ฃผ๊ธฐ ์ํด์ ์ฌ์ฉ์ด ๋์ด์ง๋ค. ๋ํ ์ ์ฒด๊ฐ ์๋ ์ค์ ํ THEME๋ฅผ ํตํด ๋ถ๋ถ์ ์ผ๋ก ๋ณํ๋ฅผ ์ฃผ๊ฑฐ๋, ๋ถ๋ถ์ ์ผ๋ก ์ ์ฉ์ด ๊ฐ๋ฅํ๊ธฐ๋ ํ๋ค.
1. ์์์ฝ๋
์์ ์ฝ๋๋ ์๋์ ๊ฐ๋ค.
main.dart์์๋ first_page.dart๋ฅผ ๋ถ๋ฅธ๋ค.
first_page์์๋ ๋ฉ์ธ์์ ์ ์ธํ ํ ๋ง๋ค์ ์ฌ์ฉํ์ง ์์๊ฒ์ ๋ณด์ฌ์ฃผ๋ ค ํ๋ค.
second_page์์๋ ๋ฉ์ธ์์ ์ ์ธํ ํ ๋ง๋ค์ ์ฌ์ฉํ๋๋ฒ์ ๋ณด์ฌ์ฃผ๋ ค ํ๋ค.
- main.dart
import 'package:flutter/material.dart';
import 'first_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
home: MyFirstPage(),
);
}
}
- first_page.dart
import 'package:flutter/material.dart';
import 'second_page.dart';
class MyFirstPage extends StatefulWidget {
@override
_MyFirstPageState createState() => _MyFirstPageState();
}
class _MyFirstPageState extends State<MyFirstPage> {
@override
Widget build(BuildContext context) {
//TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('First page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('์ ์ฒด ํ
๋ง๋ฅผ ์ ์ฉํ๊ธฐ์ '),
RaisedButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (BuildContext context) => MySecondPage()));
},
child: Text('๋ค์ ํ์ด์ง'),
),
],
),
),
);
}
}
- second_page.dart
import 'package:flutter/material.dart';
class MySecondPage extends StatefulWidget {
_MySecondPageState createState() => _MySecondPageState();
}
class _MySecondPageState extends State<MySecondPage> {
@override
Widget build(BuildContext context) {
//TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Second page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text('์ ์ฒด ํ
๋ง๋ฅผ ์ ์ฉํ ํ'),
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('์ด ํ์ด์ง'),
),
],
),
),
);
}
}
2. main์ ์ฌ๋ฌ ํ ๋ง๋ค์ ์ ์ธํ์ฌ ์ค๋ค.
ThemeData๋ฅผ ๋ค์ด๊ฐ์ ๋ณด๊ฒ ๋๋ฉด ์ ๋ง๋ง์ ํ ๋ง๋ค์ ์ค์ ํ ์ ์์์ ์์๊ฐ ์๋ค. ์ด๊ฒ์ main.dart์์ ๋ค์๊ณผ ๊ฐ์ด ์ฌ์ฉ์ ํ๋ค. ๋ค์๊ณผ ๊ฐ์ด ์ค์ ์ ๋ชจ๋ appbar์ ๋ฐฐ๊ฒฝ์์ด deep orange์์ผ๋ก ๋ฐ๋๊ฒ ๋๋ค. ํ์ง๋ง ๊ธ์๋ค์ ์์ง ์๋ฌด ๋ณํ๊ฐ ์์๊ฒ์ด๋ค.
import 'package:flutter/material.dart';
import 'first_page.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
// This widget is the root of your application.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
appBarTheme: AppBarTheme(
color: Colors.deepOrange,
),
textTheme: TextTheme(
display1: TextStyle(
fontSize: 30,
color: Colors.deepOrange,
),
),
),
home: MyFirstPage(),
);
}
}
3. ํน์ ํ์ด์ง์ ํน์ ํ ๋ง ์ค์ ํ๋๋ฒ
TextStyle๊ณผ ๊ฐ์ ๊ฒ๋ค์ main์์ ์ค์ ํ์ฌ ์ค๊ฒ๋ค์ ๋ถ๋ฌ์์ ์ฌ์ฉํ๋ ํํ์ธ๋ฐ ํ ์คํธ ์คํ์ผ์ ๊ฒฝ์ฐ 5๊ฐ ๊น์ง ์ค์ ์ ๋ฏธ๋ฆฌ ํด๋์๊ฐ ์๋ค. ์ด๊ฒ์ ๋ค๋ฅธ ํ์ด์ง์์ ์ฌ์ฉ์ ํ๋ ๋ฐฉ๋ฒ์ Theme.of(context).textTheme.display1 ๊ณผ ๊ฐ์ ํ์์ด๋ค. second_page.dart์์ Text๋ถ๋ถ์ style์ ์ ์ฉ์ ์์ผฐ๋ค.
- second_page.dart
import 'package:flutter/material.dart';
class MySecondPage extends StatefulWidget {
_MySecondPageState createState() => _MySecondPageState();
}
class _MySecondPageState extends State<MySecondPage> {
@override
Widget build(BuildContext context) {
//TODO: implement build
return Scaffold(
appBar: AppBar(
title: Text('Second page'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'์ ์ฒด ํ
๋ง๋ฅผ ์ ์ฉํ ํ',
style: Theme.of(context).textTheme.display1,
///Theme.of(context).textTheme.display1.copyWith(color: Colors.blue),
),
RaisedButton(
onPressed: () {
Navigator.pop(context);
},
child: Text('์ด ํ์ด์ง'),
),
],
),
),
);
}
}
์ฌ๊ธฐ์ main์์ ์ค์ ํ ํ ์คํธ์คํ์ผ์ ์กฐ๊ธ์๋ณด๊ฑฐ๋ ์ถ๊ฐํ๊ณ ์ถ์ ์กฐ๊ฑด์ด ์์๋๋
Theme.of(context).textTheme.display1.copyWith(์์ ์ด ์ํ๋ ์ต์ : ์ต์ ๊ฐ) ์ ์ค์ ํ์ฌ ์ฃผ๋ฉด ๋๋ค.
์ด ์ธ์๋ buttonTheme, primaryColor, backgroundColor, dividerTheme๋ฑ ์ ๋ง ๋ง์ ๊ฒ๋ค์ด ์๊ณ ์ด๋ค์ ํตํด ์ฑ์ ๋ ํต์ผ์ฑ ์๊ฒ ๋ง๋ค์๊ฐ ์๋ค.