「Flutter/UI/Cupertino/CupertinoPicker」の版間の差分
提供: 初心者エンジニアの簡易メモ
(ページの作成:「==サンプル== class HogePageState extends State<HogePage> { int _selectedColorIndex = 1; @override Widget build(BuildContext context) { return Scaffold(...」) |
(→サンプル) |
||
行1: | 行1: | ||
==サンプル== | ==サンプル== | ||
+ | <pre> | ||
class HogePageState extends State<HogePage> { | class HogePageState extends State<HogePage> { | ||
int _selectedColorIndex = 1; | int _selectedColorIndex = 1; |
2019年12月11日 (水) 18:40時点における版
サンプル
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;