Theme, ThemeData 살펴보기 + Hex 값으로 Color 사용하기

ThemeData

 

살펴보니 ThemeData.dark()를 통해서 나이트 모드를 만들기에 좋아 보인다.

다른 프레임워크 같았으면 일일히 배경색을 바꿔야 했을 것이다.

 

ThemeData class - material library - Dart API

 

property 부분을 보면 알겠지만 커스터마이징의 수준이 꽤 높다.  appBarTheme, bannerTheme, buttonColor...

필요 때마다 찾아서 적용해보자.

 

themedata에서 white를 사용하기 위해 Material Color 정의하기

 

themedata에서 white를 사용하는 것을 불가능합니다. Colors. 에서 사용하는 MaterialColor에는 흰색이 없기 때문에 직접 만들어줘야 합니다.

 

직접 Color 상수를 만들어서 할당해주는 것도 안됩니다. 그건 Color지 MaterialColor가 아니기 때문입니다.

 

 흰색을 다음과 같이 정의해줄 수 있습니다. 따로 상수를 관리하는 폴더를 만들어서 관리해주면 됩니다.

import 'package:flutter/material.dart';

const MaterialColor white = const MaterialColor(
  0xffffffff,
  <int, Color>{
    50: Color(0x0fffffff),
    100: Color(0x1fffffff),
    200: Color(0x2fffffff),
    300: Color(0x3fffffff),
    400: Color(0x4fffffff),
    500: Color(0x5fffffff),
    600: Color(0x6fffffff),
    700: Color(0x7fffffff),
    800: Color(0x8fffffff),
    900: Color(0x9fffffff),
  },
);

 

 

 

 

.copyWith

 

만약, 기본으로 ThemeData.dark()를 적용하고 부분적으로 다른 부분을 커스터마이징하고 싶다면 다음과 같이 .copyWith를 활용하면 된다. 

 

    return MaterialApp(
      home: InputPage(),
      theme: ThemeData.dark().copyWith(
          primaryColor: Color(0xff0E101C),
          scaffoldBackgroundColor: Color(0xff0E101C),
          textTheme: TextTheme(body1: TextStyle(color: Color(0xffffffff)))),
    );

 

 

Theme 위젯으로 감싸기

 

만약 특정 위젯만 커스터마이징하고 싶다면 해당 위젯을 감싼 후 data 속성에 ThemeData 위젯을 설정하여 커스터마이징할 수 있다.

 

      floatingActionButton: Theme(
        data: ThemeData(accentColor: Colors.purple),
        child: FloatingActionButton(
          onPressed: () {},
          child: Icon(Icons.add),
        ),

 

 

Hex값 사용하기

 

보통 Colors.white 와 같이 컬러를 사용했는데 알다시피 색은 rgba나 hex값을 훨씬 더 많이 사용하게 된다.

 

Color class - dart:ui library - Dart API

 

플러터 홈페이지에서는 다음과 같이 예시를 보여주고 있다.

Color c = const Color(0xFF42A5F5);
Color c = const Color.fromARGB(0xFF, 0x42, 0xA5, 0xF5);
Color c = const Color.fromARGB(255, 66, 165, 245);
Color c = const Color.fromRGBO(66, 165, 245, 1.0);

 

여기 Hex값에서 추가로 더 알아둬야 할 것은, 0xff 이다.

 

아이드라퍼로 색을 찍어보면 보통 2E2E2C와 같은 값을 준다. 이 값들은 각 2개씩 RGB를 의미한다. 즉,  (2E)(2E)(2C) 가 R,G,B에 해당하는 것이다. 물론 이 Hex 값을 10진수로 변환하면 우리가 아는 rgb(125, 125, 125)와 같은 값이 된다.

 

Hex값 앞에 0xff를 붙여서 이 갚이 Hex라는 걸 알려주자 보통 다른 언어에서는 #2E2E2C로 입력하면 알아듣지만 flutter에서는 0xff을 붙여줘야한다.. 

 

그런데, 0xff에서 뒷 두자리 ff는 a, 즉 투명도를 나타낸다. ff는 불투명하다는 의미이다.(본래 색이 나옴) 29 정도 주면 투명해진다. 각 속성이 이미 가지고 있는 불투명도를 사용하는 게 좋다.