はじめに

ToDOなどをカテゴリに分類することがあります。カテゴリは名前だけでなく、色を指定することで、一目でどのカテゴリであるかわかりやすくしたいです。色を指定するカラーピッカー機能を作るために自作でウィジェットを作ることを考えましたが手間がかかりそう。その機能を実現してくれるパッケージを探したところ、flutter_colorpickerというパッケージが見つかったので、試してみました。

pub.dev

例

MaterialPicker

BlockPicker

MultipleChoiceBlockPicker

その他、様々な表示が用意されています。下記は公式ページに記載されていたものです。

実装

パッケージの導入

Terminalから追加する場合

# 下記をターミナルで実行
flutter pub add flutter_colorpicker

pubspec.ymlに直接追記する場合

# 下記をymlに追加し、pub getする
dependencies:
  flutter_colorpicker: ^1.0.3

import文の追加

ピッカーを表示したい画面のWidgetに下記を追記

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

ピッカー表示処理の実装例として、TextButtonタップ時のコードを記載しています。 BlockPickerを使い、色をひとつ選択します。

TextButton(
    onPressed: () {
      showDialog(
          builder: (context) => AlertDialog(
            title: const Text('色を選択'),
            content: SingleChildScrollView(
              child: BlockPicker(
                pickerColor: Colors.red,
                onColorChanged: (color) {
                  // TODO: 変更時処理
                },
              ),
            ),
          ), context: context);
    },
    child: const Text('カラーピッカーを表示する'),
),