[Flutter]CupertinoPickerの使い方

どうも、ちょげ(@chogetarou)です。

CupertinoPickerの使い方を解説します。

方法
使用例

方法

CupertinoPickerを使うには、次の３つの引数を使います。

itemExtent : アイテムの高さ
children : ピッカーで表示するアイテムのリスト
onSelectedItemChanged : 選択されたアイテムが変更された時に呼び出す処理

まず、選択されたアイテムを保持するための変数を用意します。

var _selectedValue = 0;

次に、CupertinoPickerを配置したい場所に指定します。

そして、引数「itemExtent」に１つ１つのアイテムの高さ、引数「children」に表示するアイテムの一覧を指定します。

CupertinoPicker(
  itemExtent: /*アイテムの高さ*/,
  children: [
    Text("アイテム１"),
    Text("アイテム２"),
     ・・・・
  ],
),

最後に、引数「onSelectedItemChanged」に値を保持する変数を更新する処理を指定します。

CupertinoPicker(
  ・・・
  onSelectedItemChanged: (newValue) {
    setState(() {
      _selectedValue = newValue;
    });
  },
),

引数「onSelectedItemChanged」に指定する関数の引数では、選択されたアイテムのインデックスが格納されます。

使用例

以下は、使用例です。

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  var _selectedValue = 0;

  final _fruits = [
    "Apple",
    "Banana",
    "StrawBerry",
    "Orange",
    "Watermelon",
  ];

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: CupertinoPageScaffold(
        child: Center(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('${_fruits[_selectedValue]}'),
              Container(
                height: 200,
                child: CupertinoPicker(
                  itemExtent: 30.0,
                  children: _fruits.map((e) => Text(e)).toList(),
                  onSelectedItemChanged: (newValue) {
                    setState(() {
                      _selectedValue = newValue;
                    });
                  },
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}
),