「Flutter/UI/Cupertino/CupertinoPicker」の版間の差分

2019年12月11日 (水) 18:43時点における最新版

サンプル

class HogePageState extends State<HogePage> {
  int _selectedColorIndex = 1;
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _buildColorPicker(context), // 任意の場所に追加
    );
  }
  Widget _buildColorPicker(BuildContext context) {
    const List<String> coolColorNames = <String>[
      'Sarcoline', 'Coquelicot', 'Smaragdine', 'Mikado', 'Glaucous', 'Wenge',
      'Fulvous', 'Xanadu', 'Falu', 'Eburnean', 'Amaranth', 'Australien',
      'Banan', 'Falu', 'Gingerline', 'Incarnadine', 'Labrador', 'Nattier',
      'Pervenche', 'Sinoper', 'Verditer', 'Watchet', 'Zaffre',
    ];
    final FixedExtentScrollController scrollController =
    FixedExtentScrollController(initialItem: _selectedColorIndex);
    return GestureDetector(
      onTap: () async {
        await showCupertinoModalPopup<void>(
          context: context,
          builder: (BuildContext context) {
            return _BottomPicker(
              child: CupertinoPicker(
                scrollController: scrollController,
                itemExtent: _kPickerItemHeight,
                backgroundColor: CupertinoColors.systemBackground.resolveFrom(
                    context),
                onSelectedItemChanged: (int index) {
                  setState(() => _selectedColorIndex = index);
                },
                children: List<Widget>.generate(
                    coolColorNames.length, (int index) {
                  return Center(
                    child: Text(coolColorNames[index]),
                  );
                }),
              ),
            );
          },
        );
      },
      child: _Menu(
        children: <Widget>[
          const Text('Favorite Color'),
          Text(
            coolColorNames[_selectedColorIndex],
            style: TextStyle(color: CupertinoDynamicColor.resolve(
                CupertinoColors.inactiveGray, context)),
          ),
        ],
      ),
    );
  }
}
class _Menu extends StatelessWidget {
  const _Menu({
    Key key,
    @required this.children,
  }) : assert(children != null),
        super(key: key);

  final List<Widget> children;

  @override
  Widget build(BuildContext context) {
    return Container(
      decoration: BoxDecoration(
        color: CupertinoTheme.of(context).scaffoldBackgroundColor,
        border: const Border(
          top: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
          bottom: BorderSide(color: Color(0xFFBCBBC1), width: 0.0),
        ),
      ),
      height: 44.0,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16.0),
        child: SafeArea(
          top: false,
          bottom: false,
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: children,
          ),
        ),
      ),
    );
  }
}
class _BottomPicker extends StatelessWidget {
  const _BottomPicker({
    Key key,
    @required this.child,
  }) : assert(child != null),
        super(key: key);

  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Container(
      height: _kPickerSheetHeight,
      padding: const EdgeInsets.only(top: 6.0),
      color: CupertinoColors.systemBackground.resolveFrom(context),
      child: DefaultTextStyle(
        style: TextStyle(
          color: CupertinoColors.label.resolveFrom(context),
          fontSize: 22.0,
        ),
        child: GestureDetector(
          // Blocks taps from propagating to the modal sheet and popping.
          onTap: () { },
          child: SafeArea(
            top: false,
            child: child,
          ),
        ),
      ),
    );
  }
}
const double _kPickerSheetHeight = 216.0;
const double _kPickerItemHeight = 32.0;

以下flutterについてるexampleから抜粋。

flutter_gallery/lib/demo/cupertino/cupertino_picker_demo.dart