테마와 스타일 - 앱 전체에 적용되는 테마와 스타일 정의
반응형
Flutter에서 테마와 스타일을 사용하면 애플리케이션의 전체적인 일관성을 유지하고, 더 나은 사용자 경험을 제공할 수 있습니다. 이 강의에서는 Flutter 앱의 전반적인 테마를 설정하고, 이를 통해 앱의 스타일을 관리하는 방법을 배워보겠습니다.
테마란 무엇인가?
테마는 애플리케이션의 전반적인 색상, 텍스트 스타일, 아이콘 테마 등을 정의하는 설정입니다. Flutter에서는 ThemeData 객체를 사용하여 테마를 정의할 수 있습니다. 이를 통해 앱의 일관된 스타일을 유지할 수 있습니다.
기본 테마 설정
Flutter 애플리케이션에서 기본 테마를 설정하는 방법을 알아보겠습니다.
기본 테마 설정 예제
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Theme Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Text(
'Hello, World!',
style: Theme.of(context).textTheme.headline4,
),
),
);
}
}코드 설명
- ThemeData: ThemeData 객체를 사용하여 앱의 기본 테마를 정의합니다. 여기서는 primarySwatch와 visualDensity를 설정하였습니다.
- Theme.of(context): Theme.of(context)를 사용하여 현재 테마를 가져오고, 이를 통해 텍스트 스타일을 적용합니다.
커스텀 테마 설정
기본 테마 외에도 커스텀 테마를 정의하여 앱의 스타일을 더욱 세밀하게 조정할 수 있습니다.
커스텀 테마 설정 예제
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Custom Theme Demo',
theme: ThemeData(
primaryColor: Colors.green,
accentColor: Colors.amber,
textTheme: TextTheme(
headline1: TextStyle(fontSize: 72.0, fontWeight: FontWeight.bold),
headline6: TextStyle(fontSize: 36.0, fontStyle: FontStyle.italic),
bodyText2: TextStyle(fontSize: 14.0, fontFamily: 'Hind'),
),
),
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'Custom Theme Demo',
style: Theme.of(context).textTheme.headline6,
),
Text(
'This is body text',
style: Theme.of(context).textTheme.bodyText2,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {},
child: Icon(Icons.add),
backgroundColor: Theme.of(context).accentColor,
),
);
}
}코드 설명
- primaryColor: 앱의 주요 색상을 설정합니다.
- accentColor: 강조 색상을 설정합니다.
- textTheme: 텍스트 스타일을 커스터마이징합니다. headline1, headline6, bodyText2 등의 텍스트 스타일을 정의합니다.
- floatingActionButton: 강조 색상을 사용하여 플로팅 액션 버튼의 배경색을 설정합니다.
다크 모드 지원
다크 모드를 지원하는 방법을 알아보겠습니다. Flutter에서는 다크 테마를 쉽게 설정할 수 있습니다.
다크 모드 지원 예제
import 'package:flutter/material.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Dark Theme Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.light,
),
darkTheme: ThemeData(
primarySwatch: Colors.blue,
brightness: Brightness.dark,
),
themeMode: ThemeMode.system,
home: HomeScreen(),
);
}
}
class HomeScreen extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Home Screen'),
),
body: Center(
child: Text(
'Dark Theme Demo',
style: Theme.of(context).textTheme.headline6,
),
),
);
}
}코드 설명
- brightness: Brightness.light와 Brightness.dark를 사용하여 라이트 모드와 다크 모드를 설정합니다.
- darkTheme: 다크 테마를 정의합니다.
- themeMode: 시스템 설정에 따라 테마를 자동으로 전환합니다.
결론
이번 강의를 통해 Flutter 애플리케이션의 테마와 스타일을 설정하는 방법을 배웠습니다. ThemeData를 사용하여 기본 테마를 정의하고, 커스텀 테마를 통해 앱의 스타일을 세밀하게 조정할 수 있었습니다. 또한, 다크 모드를 지원하여 사용자에게 더 나은 경험을 제공할 수 있었습니다. 실습을 통해 테마와 스타일의 중요성을 이해하고, 이를 통해 앱의 일관성과 사용자 경험을 향상시킬 수 있었습니다. 다음 강의에서는 Flutter의 다른 고급 기능을 탐구해보겠습니다. Flutter로 멋진 테마를 만들어보세요!
반응형
댓글