skip to Main Content

Please I am having this error in my flutter code. Below is my code:

return Scaffold(

    appBar: AppBar(

      backgroundColor: Colors.black,
      leading: IconButton(
          onPressed: () {
            Navigator.of(context).pop();
          },
          icon: const Icon(Icons.arrow_back_ios)),
      title: const Text('Categories'),
    ),
    body: Container(
      color: Colors.black,
      height: double.infinity,
      width: double.infinity,
      transformAlignment: Alignment.center,
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          SizedBox(
            child: ListView(
              shrinkWrap: true,
              physics: const BouncingScrollPhysics(),
              children: [
                ListTile(
                  title: const Text(
                    "Option1",
                    style: TextStyle(color: Colors.white),
                  ),
                  onTap: () {},
                ),
                Container(height: 2, color: Colors.white),
                ListTile(
                  title: const Text(
                    "Option2",
                    style: TextStyle(color: Colors.white),
                  ),
                  onTap: () {},
                ),
                Container(height: 2, color: Colors.white),
                ListTile(
                  title: const Text(
                    "Option3",
                    style: TextStyle(color: Colors.white),
                  ),
                  onTap: () {},
                ),
                Container(height: 2, color: Colors.white),
                ListTile(
                  title: const Text(
                    "Option4",
                    style: TextStyle(color: Colors.white),
                  ),
                  onTap: () {},
                ),
              ],
            ),
          ),
          Container(
            color: Colors.white,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Row(
                  children: [
                    GestureDetector(
                      onTap: () {
                        showDialog(
                            context: context,
                            builder: (context) => AlertDialog(
                                  title: const Text('pick color'),
                                  content: SingleChildScrollView(
                                      child: ColorPicker(
                                    pickerColor: pickerColor,
                                    onColorChanged: changeColor,
                                  )),
                                  actions: [
                                    ElevatedButton(
                                      child: const Text("You gerrit now"),
                                      onPressed: () {
                                        setState(() =>
                                            currentColor = pickerColor);
                                        Navigator.of(context).pop();
                                      },
                                    )
                                  ],
                                ));
                      },
                    ),
                    const Text(
                      "colorpicker",
                    ),
                    const Text("stuff",
                        style: TextStyle(
                            color: Colors.white,
                            backgroundColor: Colors.green)),
                  ],
                ),
              ],
            ),
          )
        ],
      ),
    ));

Also, below is the error in my debug console pointing at the point of code flaw:

if (!constraints.hasBoundedHeight) {

      RenderBox node = this;
      while (
          !node.constraints.hasBoundedHeight && node.parent is RenderBox) {
        node = node.parent! as RenderBox;
      }

      information.add(node.describeForError(
          'The nearest ancestor providing an unbounded height constraint is'));
    }
    throw FlutterError.fromParts(<DiagnosticsNode>[
      ...information,
      DiagnosticsProperty<BoxConstraints>(
          'The constraints that applied to the $runtimeType were',
          constraints,
          style: DiagnosticsTreeStyle.errorProperty),
      DiagnosticsProperty<Size>('The exact size it was given was', _size,
          style: DiagnosticsTreeStyle.errorProperty),
      ErrorHint(
          'See https://flutter.dev/docs/development/ui/layout/box-constraints for more information.'),
    ]);
  }

I think it is coming from the listview and I have tried every edit possible, even with online resources, I still end up with the same error.
I changed the container (initially wrapped around the ListView) into sizedBox, and I also set shrinkwrap to true and added the physics key and value too but nothing got better

2

Answers


  1. You can set the height of sizebox for the ListTile:

    height: MediaQuery.of(context).size.height * 0.2,
    
    Login or Signup to reply.
  2. You need to provide child on GestureDetector. Also there are some tweaks you can make like using scaffold backgroundColor.

    Here is a simple structure

      Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
              backgroundColor: Colors.black,
              leading: IconButton(
                  onPressed: () {
                    Navigator.of(context).pop();
                  },
                  icon: const Icon(Icons.arrow_back_ios)),
              title: const Text('Categories'),
            ),
            backgroundColor: Colors.black,
            body: Column(
              mainAxisSize: MainAxisSize.min,
              children: [
                Expanded(
                  child: ListView(
                    physics: const BouncingScrollPhysics(),
                    children: [
                      ListTile(
                        title: const Text(
                          "Option1",
                          style: TextStyle(color: Colors.white),
                        ),
                        onTap: () {},
                      ),
                      Container(height: 2, color: Colors.white),
                      ListTile(
                        title: const Text(
                          "Option2",
                          style: TextStyle(color: Colors.white),
                        ),
                        onTap: () {},
                      ),
                      Container(height: 2, color: Colors.white),
                      ListTile(
                        title: const Text(
                          "Option3",
                          style: TextStyle(color: Colors.white),
                        ),
                        onTap: () {},
                      ),
                      Container(height: 2, color: Colors.white),
                      ListTile(
                        title: const Text(
                          "Option4",
                          style: TextStyle(color: Colors.white),
                        ),
                        onTap: () {},
                      ),
                    ],
                  ),
                ),
                Container(
                  color: Colors.white,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: [
                      GestureDetector(
                        onTap: () {},
                        child: const Text(
                          "colorpicker",
                        ),
                      ),
                      const Text("stuff",
                          style: TextStyle(
                              color: Colors.white, backgroundColor: Colors.green)),
                    ],
                  ),
                )
              ],
            ));
      }
    
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search