[Flutter]CupertinoでiOSのピッカー(Picker)を表示するには？

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

CupertinoでiOSのピッカーを表示する方法を紹介します。

方法
使用例

方法

CupertinoでiOSのピッカーを表示するには、CupertinoPickerウェジェットを使います。

まず、Cupertinoをインポートします。

import 'package:flutter/cupertino.dart';

そして、iOSのピッカーを表示したい場所に、CupertinoPickerを配置します。

CupertinoPicker(
  itemExtent: /*要素の高さ*/,
  onSelectedItemChanged: (index) { //引数で選択された要素のインデックスを受け取る
    //選択中の要素が変化した時の処理
  },
  children: [/*ピッカーで選択肢として表示するウェジェット*/],
),

CupertinoPickerを使えば、CupertinoでiOSのピッカーを表示することが出来ます。

使用例

以下は、使用例です。

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

class _MyHomePageState extends State<MyHomePage> {
  final _fruits = [
    "Apple",
    "Banana",
    "Grape",
    "Orange",
    "Watermelon",
  ];

  var _currentIndex = 0;
  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      child: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(_fruits[_currentIndex]),
            SizedBox(
              height: 10,
            ),
            SizedBox(
              height: 200,
              child: CupertinoPicker(
                itemExtent: 30,
                onSelectedItemChanged: (index) {
                  setState(() {
                    _currentIndex = index;
                  });
                },
                children: _fruits.map((e) => Text(e)).toList(),
              ),
            ),
          ],
        ),
      ),
    );
  }
}