facebook twitter hatena line email

「Flutter/外部ライブラリ/colorpicker」の版間の差分

提供: 初心者エンジニアの簡易メモ
移動: 案内検索
(サンプル)
 
行69: 行69:
 
)
 
)
 
<pre>
 
<pre>
 +
 +
縦長のpicker
 +
<pre>
 +
import 'package:flutter_colorpicker/material_picker.dart';
 +
    showDialog(
 +
      context: context,
 +
      child: AlertDialog(
 +
        title: const Text('Pick a color!'),
 +
        content: SingleChildScrollView(
 +
          child: MaterialPicker(
 +
            pickerColor: pickerColor,
 +
            onColorChanged: changeColor,
 +
            enableLabel: true, // only on portrait mode
 +
          ),
 +
</pre>
 +
ブロック型のpicker
 +
<pre>
 +
import 'package:flutter_colorpicker/block_picker.dart';
 +
 +
    showDialog(
 +
      context: context,
 +
      child: AlertDialog(
 +
        title: const Text('Pick a color!'),
 +
        content: SingleChildScrollView(
 +
          child: BlockPicker(
 +
            pickerColor: currentColor,
 +
            onColorChanged: changeColor,
 +
          ),
 +
</pre>

2019年11月14日 (木) 11:11時点における最新版

colorpickerとは

色選択ライブラリ

公式

https://pub.dev/packages/flutter_colorpicker

準備

pubspec.yaml

dependencies:
  flutter_colorpicker: any
flutter packages get
flutter packages upgrade

サンプル

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

// create some values
Color pickerColor = Color(0xff443a49);
Color currentColor = Color(0xff443a49);

// ValueChanged<Color> callback
void changeColor(Color color) {
  setState(() => pickerColor = color);
}

// raise the [showDialog] widget
showDialog(
  context: context,
  child: AlertDialog(
    title: const Text('Pick a color!'),
    content: SingleChildScrollView(
      child: ColorPicker(
        pickerColor: pickerColor,
        onColorChanged: changeColor,
        enableLabel: true,
        pickerAreaHeightPercent: 0.8,
      ),
      // Use Material color picker:
      //
      // child: MaterialPicker(
      //   pickerColor: pickerColor,
      //   onColorChanged: changeColor,
      //   enableLabel: true, // only on portrait mode
      // ),
      //
      // Use Block color picker:
      //
      // child: BlockPicker(
      //   pickerColor: currentColor,
      //   onColorChanged: changeColor,
      // ),
    ),
    actions: <Widget>[
      FlatButton(
        child: const Text('Got it'),
        onPressed: () {
          setState(() => currentColor = pickerColor);
          Navigator.of(context).pop();
        },
      ),
    ],
  ),
)
<pre>

縦長のpicker
<pre>
import 'package:flutter_colorpicker/material_picker.dart';
    showDialog(
      context: context,
      child: AlertDialog(
        title: const Text('Pick a color!'),
        content: SingleChildScrollView(
          child: MaterialPicker(
            pickerColor: pickerColor,
            onColorChanged: changeColor,
            enableLabel: true, // only on portrait mode
          ),

ブロック型のpicker

import 'package:flutter_colorpicker/block_picker.dart';

    showDialog(
      context: context,
      child: AlertDialog(
        title: const Text('Pick a color!'),
        content: SingleChildScrollView(
          child: BlockPicker(
            pickerColor: currentColor,
            onColorChanged: changeColor,
          ),