Flutter - CupertinoPicker in an alert dialog

2.1k views Asked by At

I am stuck right now with the little app that I am trying to create.

The user when he will tap on an icon is supposed to get an alert dialog with 2 buttons (OK and Cancel), and in the body of the alert box, a Cupertino Picker. Below you will find the code. I am getting this error message.

Failed assertion: line 85 pos 15: 'children != null': is not true.

    class Engage extends StatefulWidget {
  Engage ({Key key}) : super(key:key);
  @override
  _EngageState createState() => _EngageState();
}

class _MyEngageState extends State<MyEngage> {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(10.0),
      decoration: BoxDecoration(
          border: Border.all(color: Colors.grey[350])),
      child: Column(
       children: [
         Padding(
           padding: const EdgeInsets.all(3.0),
           child: Container(
              // margin: const EdgeInsets.all(30.0),
               padding: const EdgeInsets.all(10.0),
               decoration: BoxDecoration(
                   border: Border.all(color: Colors.grey[350])
               ),
              child : Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  GestureDetector(
                    child: Column(
                      children: [
                        IconButton(
                         splashColor: Colors.lightGreenAccent,
                          icon : Image.asset('assets/icons/icon1',
                          height: iconHeighEngage,),
                           onPressed:(){
                              showDialog(
                              context: context,
                              builder: (BuildContext context) {
                              return AlertDialog(
                                 title: Text('TEST'),
                                   content: Container(
                              height: 350,
                                     child: Column(
                              children: <Widget>[
                                       CupertinoPicker(),
                                     FlatButton(
                                      child: Text("OK"),
                              onPressed: () {
                              Navigator.pop(context);
                              },
                              )
                              ],
                              ),
                              ));
                              });
                              },
                              ),
                           Text('TEST')],
                    ),
                    ),
1

There are 1 answers

6
Maz341 On

Give it a try to this!

Padding(
  padding: const EdgeInsets.all(3.0),
  child: Container(
    // margin: const EdgeInsets.all(30.0),
    padding: const EdgeInsets.all(10.0),
    decoration: BoxDecoration(
        border: Border.all(color: Colors.grey[350])),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        GestureDetector(
          child: Column(
            children: [
              IconButton(
                splashColor: Colors.lightGreenAccent,
                icon: Icon(
                  Icons.add,
                ),
                onPressed: () {
                  showDialog(
                      context: context,
                      builder: (BuildContext ctx) {
                        return AlertDialog(
                            title: Text('My Titile'),
                            content: Container(
                              height: 350,
                              width: 350.0,
                              child: Column(
                                children: <Widget>[
                                  CupertinoPicker(
                                    itemExtent: 200.0,
                                    onSelectedItemChanged:
                                        (int value) {
                                      print("Test");
                                    },
                                    children: <Widget>[
                                      FlatButton(
                                        child: Container(
                                          color:
                                              Colors.orangeAccent,
                                          width: 350.0,
                                          height: 160.0,
                                          child: Center(
                                              child: Text(
                                            "OK",
                                            style: TextStyle(
                                                fontSize: 20.0),
                                          )),
                                        ),
                                        onPressed: () {
                                          Navigator.pop(context);
                                        },
                                      )
                                    ],
                                  ),
                                ],
                              ),
                            ),
                        );
                      },
                  );
                },
              ),
              Text('TEST')
            ],
          ),
        ),
      ],
    ),
  ),
)

Note: The problem was, you weren't passing the parameters of CupertinoPicker()

EDIT :

First Initialize

int selected = 0;

and then:

Padding(
  padding: const EdgeInsets.all(3.0),
  child: Container(
    padding: const EdgeInsets.all(10.0),
    decoration:
        BoxDecoration(border: Border.all(color: Colors.grey[350])),
    child: Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        GestureDetector(
          child: Column(
            children: [
              IconButton(
                splashColor: Colors.lightGreenAccent,
                icon: Icon(
                  Icons.add,
                ),
                onPressed: () {
                  showDialog(
                    context: context,
                    builder: (BuildContext ctx) {
                      return StatefulBuilder(
                        builder: (context, setState) {
                          return AlertDialog(
                            backgroundColor: Colors.lightBlueAccent,
                            title: Text(
                              'My Dialog',
                              style: TextStyle(
                                color: Colors.white,
                                fontSize: 30.0,
                                fontWeight: FontWeight.bold,
                              ),
                            ),
                            content: Container(
                              height: 350.0,
                              width: 350.0,
                              child: Column(
                                children: <Widget>[
                                  Expanded(
                                    child: CupertinoPicker(
                                      useMagnifier: true,
                                      magnification: 1.5,
                                      backgroundColor: Colors.white,
                                      itemExtent: 40.0,
                                      onSelectedItemChanged: (int index) {
                                        print(selected);
                                        setState(() {
                                          selected = index;
                                        });
                                        print(selected);
                                      },
                                      children: <Widget>[
                                        Text(
                                          "Text 1",
                                          style: TextStyle(
                                              color: selected == 0
                                                  ? Colors.blue
                                                  : Colors.black,
                                              fontSize: 22.0),
                                        ),
                                        Text(
                                          "Text 2",
                                          style: TextStyle(
                                              color: selected == 1
                                                  ? Colors.blue
                                                  : Colors.black,
                                              fontSize: 22.0),
                                        ),
                                        Text(
                                          "Text 3",
                                          style: TextStyle(
                                              color: selected == 2
                                                  ? Colors.blue
                                                  : Colors.black,
                                              fontSize: 22.0),
                                        ),
                                      ],
                                    ),
                                  )
                                ],
                              ),
                            ),
                          );
                        },
                      );
                    },
                  );
                },
              ),
              Text('Add')
            ],
          ),
        ),
      ],
    ),
  ),
),

Screenshot

The code is tested and working pretty fine now!