플러터 Tip : Theme 의 primarySwatch 에 black 색 설정 실패

PrimarySwatch 란?
Material 디자인에 주로 활용되는 Color Palette로 MaterialColor 클래스로 정의한다.

1. 문제 상황

플러터 MaterialApp 의 테마 primarySwatch 에 black 을 설정하려 하니 런타임 에러가 발생 했다.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'test',
      theme: ThemeData(
        primarySwatch: Colors.black, // 런타임 에러 발생
      ),
      home: Dashboard(),
    );
  }
}

문제의 핵심은 primarySwatch 는 MaterialColor 를 인자로 받아야 하는데 black 은 그냥 Color 클래스라는것.

════════ Exception caught by widgets library ═══════════════════════════════════
The following _TypeError was thrown building MyApp(dirty):
type 'Color' is not a subtype of type 'MaterialColor?'

The relevant error-causing widget was
MyApp
package:bizbox/main.dart:5
When the exception was thrown, this was the stack
#0      MyApp.build
package:bizbox/main.dart:14
#1      StatelessElement.build
package:flutter/…/widgets/framework.dart:4569
#2      ComponentElement.performRebuild
package:flutter/…/widgets/framework.dart:4495
#3      Element.rebuild
package:flutter/…/widgets/framework.dart:4189
#4      ComponentElement._firstBuild
package:flutter/…/widgets/framework.dart:4474
...
════════════════════════════════════════════════════════════════════════════════

 

2. 해결 방법

1) 쉬운 방법

전체적인 배경만 black 로 바꾸겠다면 귀찮으니까 그냥 primarySwatch 말고 primaryColor를 쓰자.

import 'package:bizbox/bizbox.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'test',
      theme: ThemeData(
        primaryColor: Colors.black,  // primaryColor 를 사용..
      ),
      home: Bizbox(),
    );
  }
}

 

2) 정석적인 방법

직접 Pallete를 만들어서 primarySwatch에 넣는다. 이번 예제에서는 pallete 전체를 검은색으로 설정했다.

MaterialColor 사용 시, 포인트는

• MaterialColor 의 첫 파라미터는 Primary Color 의 color 코드이고 두번째 파라미터가 pallete 색상들이다.
• pallete 생상 중 500번이 1) 방법에서 사용한 primary color 다. 

const MaterialColor primaryBlack = MaterialColor(
  _blackPrimaryValue,
  <int, Color>{
    50: Color(0xFF000000),
    100: Color(0xFF000000),
    200: Color(0xFF000000),
    300: Color(0xFF000000),
    400: Color(0xFF000000),
    500: Color(_blackPrimaryValue),
    600: Color(0xFF000000),
    700: Color(0xFF000000),
    800: Color(0xFF000000),
    900: Color(0xFF000000),
  },
);
const int _blackPrimaryValue = 0xFF000000;

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'test',
      theme: ThemeData(
        primarySwatch: primaryBlack,
      ),
      home: Bizbox(),
    );
  }
}