Flutter 전체 테마 설정하기

 학교에서 2명의 사람과 함께 산학프로젝트를 하면서 각자 맡은 부분에대해 UI를 만든적이 있다. 이때 각자 디자인을 보고 다른 글자크기, 자간, 색상등을 사용하여 나중에 통일시키는 작업을 하는데 큰 애를 먹었었다(아직도 그런 곳들이 있어서 너무 힘들다...언제 다 통일을 시키지...). 이와 같은 번거로운 일을 하지 않기 위해서는 Theme을 사용하는것이 중요하다.

 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등 정말 많은 것들이 있고 이들을 통해 앱을 더 통일성 있게 만들수가 있다.