Flutter Theme(테마) 변경

플러터에서는 테마 지정이 엄청 쉽다.

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 에 있는 자료를 활용한다.