🎨

【Flutter】パッケージ『flutter_colorpicker』を利用したサンプルコード

2023/02/07に公開

パッケージ『flutter_colorpicker』を利用してアプリ内UIの背景色変える簡単なサンプルコードを書いていきます!
↓こんな感じになります

パッケージ『flutter_colorpicker』の導入

カラーピッカーのUIを実装する為、
下記コードをVScodeのターミナルへコピペしてエンターキーを押下する

$ flutter pub add flutter_colorpicker

https://pub.dev/packages/flutter_colorpicker

パッケージ『shared_preferences』の導入

カラーピッカーで選択したカラーコードをアプリ内に保存する為、
下記コードをVScodeのターミナルへコピペしてエンターキーを押下する

$ flutter pub add shared_preferences

https://pub.dev/packages/shared_preferences

具体例(コード)

冒頭のGIFで表示しているアプリは下記コードで実装可能です。

color_picker.dart
import 'package:flutter/material.dart';
import 'package:flutter_colorpicker/flutter_colorpicker.dart';

class MyHomePage2 extends StatefulWidget {
  late final String title;

  @override
  _HomeState createState() => _HomeState();
}

class _HomeState extends State<MyHomePage2> {
  Color mycolor = Colors.lightBlue;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Flutter Color Picker"),
          backgroundColor: Colors.redAccent,
        ),
        body: Container(
            color: mycolor, //background color of app from color picker
            alignment: Alignment.center,
            padding: EdgeInsets.all(20),
            child: Column(children: [
              ElevatedButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('Pick a color!'),
                          content: SingleChildScrollView(
                            child: ColorPicker(
                              pickerColor: mycolor, //default color
                              onColorChanged: (Color color) {
                                //on color picked
                                setState(() {
                                  mycolor = color;
                                });
                              },
                            ),
                          ),
                          actions: <Widget>[
                            ElevatedButton(
                              child: const Text('DONE'),
                              onPressed: () {
                                Navigator.of(context)
                                    .pop(); //dismiss the color picker
                              },
                            ),
                          ],
                        );
                      });
                },
                child: Text("Default Color Picker"),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('Pick a color!'),
                          content: SingleChildScrollView(
                            child: MaterialPicker(
                              pickerColor: mycolor, //default color
                              onColorChanged: (Color color) {
                                //on color picked
                                setState(() {
                                  mycolor = color;
                                });
                              },
                            ),
                          ),
                          actions: <Widget>[
                            ElevatedButton(
                              child: const Text('DONE'),
                              onPressed: () {
                                Navigator.of(context)
                                    .pop(); //dismiss the color picker
                              },
                            ),
                          ],
                        );
                      });
                },
                child: Text("Material Color Picker"),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('Pick a color!'),
                          content: SingleChildScrollView(
                            child: BlockPicker(
                              pickerColor: mycolor, //default color
                              onColorChanged: (Color color) {
                                //on color picked
                                setState(() {
                                  mycolor = color;
                                });
                              },
                            ),
                          ),
                          actions: <Widget>[
                            ElevatedButton(
                              child: const Text('DONE'),
                              onPressed: () {
                                Navigator.of(context)
                                    .pop(); //dismiss the color picker
                              },
                            ),
                          ],
                        );
                      });
                },
                child: Text("Block Color Picker"),
              ),
              ElevatedButton(
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext context) {
                        return AlertDialog(
                          title: Text('Pick a color!'),
                          content: SingleChildScrollView(
                            child: MultipleChoiceBlockPicker(
                              pickerColors: [
                                Colors.red,
                                Colors.orange
                              ], //default color
                              onColorsChanged: (List<Color> colors) {
                                //on colors picked
                                print(colors);
                              },
                            ),
                          ),
                          actions: <Widget>[
                            ElevatedButton(
                              child: const Text('DONE'),
                              onPressed: () {
                                Navigator.of(context)
                                    .pop(); //dismiss the color picker
                              },
                            ),
                          ],
                        );
                      });
                },
                child: Text("Multiple Choice Color Picker"),
              ),
            ])));
  }
}

『flutter_colorpicker』の使い方

今回はカラーピッカーの型を『BlockPicker』にしています。
カラーピッカーの型は数種類選べるようなので詳しくは上記のサイトでご確認ください。

color_picker.dart
content: SingleChildScrollView(
  child: BlockPicker(
         pickerColor: mycolor, //default color
         onColorChanged: (Color color) {
       //on color picked
         setState(() {
         mycolor = color;
              });
             },
            ),
          ),

サンプルコード(Github)

サンプルコードをGithub上にて公開しております。
アプリ上で動かしてみたい方はぜひお試しください。
https://github.com/ios111-arch/flutter_colorpicker_test

Discussion