728x90
플러터에서는 테마 지정이 엄청 쉽다.
Light 테마와 Dark 테마 지정이 코드 몇줄로 쉽게 해결된다.
테마 지정 안된 코드
|
import 'package:flutter/material.dart';
import 'bottom_navi_bar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.lightBlue,
),
home: const BottomNaviBar(title: '플러터 데모 Main'),
);
}
}
|
테마 지정한 코드
|
import 'package:flutter/material.dart';
import 'bottom_navi_bar.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
// 화면 표시에 대한 역할은 Scaffold 위젯이 담당한다.
// MaterialApp 위젯은 화면 이동과 테마 지정이 주요 역할이다.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.lightBlue,
accentColor: Colors.cyan[600],
fontFamily: 'Raleway'),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
home: const BottomNaviBar(title: '플러터 데모 Main'),
);
}
}
|
Custom Color 를 지정하고 싶은 경우에는
https://flutter-color-picker.herokuapp.com/ 에서 색상을 임의로 선택한 다음에 코드를 아래와 같이 변경하면 된다.
primaryColor 의 색에 적용했더니 에러 발생해서, appBarTheme 에 색상 적용 테스트했다.
|
// 화면 표시에 대한 역할은 Scaffold 위젯이 담당한다.
// MaterialApp 위젯은 화면 이동과 테마 지정이 주요 역할이다.
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
brightness: Brightness.light,
appBarTheme: AppBarTheme(
color: Color.fromARGB(131, 52, 215, 229),
),
//primaryColor: Colors.lightBlue,
fontFamily: 'Raleway'),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
home: const BottomNaviBar(title: '플러터 데모 Main'),
);
}
|
이전 게시글의 ListView_Demo 클래스에도 테마를 적용했다.
|
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
// Android Studio 에서 stless 를 입력후 엔터키를 치면
// 자동완성 코드가 작성되고 클래스명을 지정하면 된다.
class ListView_Demo1 extends StatelessWidget {
const ListView_Demo1({Key? key}) : super(key: key);
// ListView 위젯 정적 데모
static const List<String> _data = [
'Mercury(수성)',
'Venus(금성)',
'Earth(지구)',
'Mars(화성)',
'Jupiter(목성)',
'Saturn(토성)',
'Uranus(천왕성)',
'Neptune(해왕성)',
'Pluto(명왕성)',
];
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
brightness: Brightness.light,
primaryColor: Colors.lightBlue,
accentColor: Colors.cyan[600],
fontFamily: 'Raleway'),
darkTheme: ThemeData(
brightness: Brightness.dark,
),
home: Scaffold(
appBar: CupertinoNavigationBar(
leading: CupertinoNavigationBarBackButton(
onPressed: () => Navigator.of(context).pop(),
),
middle: Text('쿠퍼티노 UI'),
trailing: GestureDetector(
child: Icon(CupertinoIcons.search),
onTap: (){},
),
backgroundColor: CupertinoColors.activeGreen,
border: Border(
bottom:BorderSide(
width: 1,
color: CupertinoColors.activeGreen,
style: BorderStyle.solid
)
),
),
//body: _buildStaticListView(),
body: _buildStaticListViewSeperated(),
),
);
}
Widget _buildStaticListView() {
return ListView.builder(
itemCount: _data.length,
itemBuilder: (BuildContext _context, int i) {
return ListTile(
title: Text(_data[i],
style: TextStyle(
fontSize: 23,
)),
trailing: Icon(
Icons.favorite_border,
),
);
},
);
}
Widget _buildStaticListViewSeperated() {
return ListView.separated(
itemCount: _data.length,
itemBuilder: (BuildContext _context, int i) {
return ListTile(
title: Text(_data[i],
style: TextStyle(
fontSize: 23,
)),
trailing: Icon(
Icons.favorite_border,
),
);
},
separatorBuilder: (BuildContext _context, int i) {
return const Divider();
},
);
}
}
|
UI 에 대한 사항을 좀더 알아보고 싶다면....
https://github.com/lohanidamodar/flutter_ui_challenges 에 있는 자료를 활용한다.
'Flutter 앱 > Layout' 카테고리의 다른 글
| Flutter CustomScrollView (0) | 2022.06.21 |
|---|---|
| Flutter Drawer Widget (0) | 2022.06.16 |
| Flutter Layout (0) | 2021.12.26 |
| Flutter BottomNavigationBar 예제 (0) | 2021.12.22 |
| Flutter TabBar (0) | 2021.12.22 |
Link2Me