flutter showPicker not displayed-CodePudding

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,
            )
          )]

    );
  }   }

CodePudding user response：

If you want to show it in a dialog, use this

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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,
          ))
    ]);
  }
}

CodePudding user response：

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,
                    )
                ),
              )]
    
        );
      }   }