flutter showPicker not displayed - flutter

Question

I have a chip widget. I have added an InkWell to have OnTap.
But, when OnTap call the class ShowPickerUnit, the ShowPicker is not displayed.
I have tried stateless, void, widget and I am getting the same result.
I just want the user to be able to select between several values.
I do not understand what I am missing. Please, can you help?
Thank you.
Widget chipGoal (){
return Row(
children: [
Wrap(
// space between chips
spacing: 10,
// list of chips
children: [
InkWell(
child: Chip(
label: Text('Working'),
avatar: Icon(
Icons.work,
color: Colors.red,
),
backgroundColor: Colors.amberAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
onTap: (){
ShowPickerUnit();
},
),
Chip(
label: Text('Music'),
avatar: Icon(Icons.headphones),
backgroundColor: Colors.lightBlueAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
Chip(
label: Text('Music'),
avatar: Icon(Icons.headphones),
backgroundColor: Colors.lightBlueAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
]),
],
);
}
class ShowPickerUnit extends StatefulWidget {
const ShowPickerUnit({Key key}) : super(key: key);
#override
_ShowPickerUnitState createState() => _ShowPickerUnitState();
}
class _ShowPickerUnitState extends State<ShowPickerUnit> {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
border: Border(
bottom: BorderSide(
color: Color(0xff999999),
width: 0.0,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CupertinoButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 5.0,
),
),
DefaultTextStyle(
style: TextStyle(fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.bold),
child: Text('Select what you want'),
),
// Text('Energy Needed', style: TextStyle(fontSize: 12.0, color: Colors.black),
// ),
CupertinoButton(
child: Text('Confirm'),
onPressed: () {
setState(() {
});
Navigator.of(context).pop();
},
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 5.0,
),
),
],
),
),
Container(
//width: 360,
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
child:
CupertinoPicker(
children: [
Text("India"),
Text("Usa"),
Text("Uk"),
Text("Australia"),
Text("Africa"),
Text("New zealand"),
Text("Germany"),
Text("Italy"),
Text("Russia"),
Text("China"),
],
onSelectedItemChanged: (value){
},
itemExtent: 25,
)
)]
);
} }

Answer 1

If you want to show it in a dialog, use this showDialog
import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.dark().copyWith(
scaffoldBackgroundColor: darkBlue,
),
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Center(
child: MyWidget(),
),
),
);
}
}
class MyWidget extends StatelessWidget {
#override
Widget build(BuildContext context) {
return chipGoal();
}
}
Widget chipGoal() {
return Builder(
builder: (BuildContext context) {
return Row(
children: [
Wrap(
// space between chips
spacing: 10,
// list of chips
children: [
InkWell(
child: Chip(
label: Text('Working'),
avatar: Icon(
Icons.work,
color: Colors.red,
),
backgroundColor: Colors.amberAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
onTap: () {
showDialog(
context: context,
builder: (BuildContext context) {
return ShowPickerUnit();
},
);
},
),
Chip(
label: Text('Music'),
avatar: Icon(Icons.headphones),
backgroundColor: Colors.lightBlueAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
Chip(
label: Text('Music'),
avatar: Icon(Icons.headphones),
backgroundColor: Colors.lightBlueAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
]),
],
);
},
);
}
class ShowPickerUnit extends StatefulWidget {
const ShowPickerUnit({Key? key}) : super(key: key);
#override
_ShowPickerUnitState createState() => _ShowPickerUnitState();
}
class _ShowPickerUnitState extends State<ShowPickerUnit> {
#override
Widget build(BuildContext context) {
return Column(mainAxisAlignment: MainAxisAlignment.end, children: [
Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
border: Border(
bottom: BorderSide(
color: Color(0xff999999),
width: 0.0,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CupertinoButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 5.0,
),
),
DefaultTextStyle(
style: TextStyle(
fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.bold),
child: Text('Select what you want'),
),
// Text('Energy Needed', style: TextStyle(fontSize: 12.0, color: Colors.black),
// ),
CupertinoButton(
child: Text('Confirm'),
onPressed: () {
setState(() {});
Navigator.of(context).pop();
},
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 5.0,
),
),
],
),
),
Container(
//width: 360,
height: 250,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
child: CupertinoPicker(
children: [
Text("India"),
Text("Usa"),
Text("Uk"),
Text("Australia"),
Text("Africa"),
Text("New zealand"),
Text("Germany"),
Text("Italy"),
Text("Russia"),
Text("China"),
],
onSelectedItemChanged: (value) {},
itemExtent: 25,
))
]);
}
}
It shows the dialog when you tap on "Working"

Answer 2

Use showModalBottomSheet for data selection
Widget chipGoal (){
return Row(
children: [
Wrap(
// space between chips
spacing: 10,
// list of chips
children: [
InkWell(
child: Chip(
label: Text('Working'),
avatar: Icon(
Icons.work,
color: Colors.red,
),
backgroundColor: Colors.amberAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
onTap: (){
showModalBottomSheet<void>(
// context and builder are
// required properties in this widget
context: context,
builder: (BuildContext context) {
return ShowPickerUnit();
},
);
},
),
Chip(
label: Text('Music'),
avatar: Icon(Icons.headphones),
backgroundColor: Colors.lightBlueAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
Chip(
label: Text('Music'),
avatar: Icon(Icons.headphones),
backgroundColor: Colors.lightBlueAccent,
padding: EdgeInsets.symmetric(vertical: 5, horizontal: 10),
),
]),
],
);
}
class ShowPickerUnit extends StatefulWidget {
const ShowPickerUnit({Key? key}) : super(key: key);
#override
_ShowPickerUnitState createState() => _ShowPickerUnitState();
}
class _ShowPickerUnitState extends State<ShowPickerUnit> {
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xffffffff),
border: Border(
bottom: BorderSide(
color: Color(0xff999999),
width: 0.0,
),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
CupertinoButton(
child: Text('Cancel'),
onPressed: () {
Navigator.of(context).pop();
},
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 5.0,
),
),
DefaultTextStyle(
style: TextStyle(fontSize: 16.0,
color: Colors.black,
fontWeight: FontWeight.bold),
child: Text('Select what you want'),
),
// Text('Energy Needed', style: TextStyle(fontSize: 12.0, color: Colors.black),
// ),
CupertinoButton(
child: Text('Confirm'),
onPressed: () {
setState(() {
});
Navigator.of(context).pop();
},
padding: const EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 5.0,
),
),
],
),
),
Expanded(
child: Container(
//width: 360,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(15.0)),
),
child:
CupertinoPicker(
children: [
Text("India"),
Text("Usa"),
Text("Uk"),
Text("Australia"),
Text("Africa"),
Text("New zealand"),
Text("Germany"),
Text("Italy"),
Text("Russia"),
Text("China"),
],
onSelectedItemChanged: (value){
},
itemExtent: 25,
)
),
)]
);
} }