🎨
【Flutter】パッケージ『flutter_colorpicker』を利用したサンプルコード
パッケージ『flutter_colorpicker』を利用してアプリ内UIの背景色変える簡単なサンプルコードを書いていきます!
↓こんな感じになります
パッケージ『flutter_colorpicker』の導入
カラーピッカーのUIを実装する為、
下記コードをVScodeのターミナルへコピペしてエンターキーを押下する
$ flutter pub add flutter_colorpicker
パッケージ『shared_preferences』の導入
カラーピッカーで選択したカラーコードをアプリ内に保存する為、
下記コードをVScodeのターミナルへコピペしてエンターキーを押下する
$ flutter pub add 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上にて公開しております。
アプリ上で動かしてみたい方はぜひお試しください。
Discussion