Flutter: How to reduce size of CupertinoPicker in ModalBottomSheet? - flutter

Question

Whenever I try to set up a CupertinoPicker in a ModalBottomSheet in a Column, Row, or in a Container it seems to occupy the maximum possible place.
Is there anyway to limit the size/heigt of the ModalBottomSheet to the actual size of the CupertinoPicker, which is obviously much smaller in height than the ModalBottomSheet (as becomes apparent through its grey background color).
Here is my code:
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}
class MyHomePage extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(body:
Center(child: RaisedButton(onPressed: () => showPicker(context),
child: Text('Show Bottom Sheet')),)
);
}
Widget showPicker(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('This is a picker'),
Expanded(
child: Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Container(
height: 100,
child: CupertinoPicker(
itemExtent: 30,
onSelectedItemChanged: (int index) {
print(index);
},
children: <Widget>[
Center(child: Text("Item 1")),
Center(child: Text("Item 2")),
Center(child: Text("Item 3")),
],
),
),
),
],
),
),
],
),
);
});
}
}
This is what I get:
Thank you for any tips, hints and advice!

Answer 1

Widget showPicker(BuildContext context) {
showModalBottomSheet(
context: context,
builder: (context) {
return Container(
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('This is a picker'),
Row(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Expanded(
child: Container(
height: 100,
child: CupertinoPicker(
itemExtent: 30,
onSelectedItemChanged: (int index) {
print(index);
},
children: <Widget>[
Center(child: Text("Item 1")),
Center(child: Text("Item 2")),
Center(child: Text("Item 3")),
],
),
),
),
],
),
],
),
);
});
}
This can solve the issue paste the method, you will get your desired output