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

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

サンプル

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; </pre>