When i try to use a ListView which contains checkboxes with scrollDirection set to Axis.horizontal inside a SimpleDialog throws an error: RenderShrinkWrappingViewport does not support returning intrinsic dimensions. I tried wrapping the ListView with Containers, Flexible.. but it still thorws an error.

If i set the scrollDirection to Axis.vertical it works fine. I am guessing the problem is with it being inside a dialog.

 @override
  Widget build(BuildContext context) => SimpleDialog(
          backgroundColor: Color.fromARGB(255, 229, 233, 240),
          contentPadding: EdgeInsets.zero,
          children: [
            Expanded(
              child: ListView(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                children: [
                  ...personCheckboxes.map(buildCheckboxes).toList(),
                ],
              ),
            ),

The buildCheckboxes function:

  Widget buildCheckboxes(CheckBoxState checkbox) => CheckboxListTile(
        controlAffinity: ListTileControlAffinity.leading,
        activeColor: Colors.blue,
        value: checkbox.checked,
        title: Text(checkbox.title, style: const TextStyle(fontSize: 12)),
        onChanged: (value) => setState(() {
          checkbox.checked = value!;
          if (checkbox.value == 'M') {
            maleChecked = checkbox.checked;
          } else if (checkbox.value == 'F') {
            femaleChecked = checkbox.checked;
          }
          checkResults();

          setState(() {});
          //runFilterCheckbox(checkbox.value, value);
        }),
      );

I have tried wrapping the ListView widget with different widgets (Container). It still produces an error.

Widget build(BuildContext context) => SimpleDialog(
          backgroundColor: Color.fromARGB(255, 229, 233, 240),
          contentPadding: EdgeInsets.zero,
          children: [
            Container(
              height: 100.0,
              width: 100.0,
              child: ListView(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                children: [
                  ...personCheckboxes.map(buildCheckboxes).toList(),
                ],
              ),
            ),

Even after wrapping the listView with SizedBox, the problem persist:

@override
  Widget build(BuildContext context) => SimpleDialog(
          backgroundColor: Color.fromARGB(255, 229, 233, 240),
          contentPadding: EdgeInsets.zero,
          children: [
            SizedBox(
              height: 20.0,
              width: double.maxFinite,
              child: ListView(
                shrinkWrap: true,
                scrollDirection: Axis.horizontal,
                children: [
                  ...personCheckboxes.map(buildCheckboxes).toList(),
                ],
              ),
            ),

CodePudding user response：

Wrap your Listview in a Sizedbox and give it some height to it and add width as width: double.maxFinite,. It should work after you add width as AlertDialog uses an IntrinsicWidth widget that does not allow ListView.builder.

Use Alert Dialog instead of using SimpleDialog. Check below code for alertdialog implementation:

showDialog(
   context: context,
   builder: (BuildContext context) {
      return AlertDialog(
         content: Container(
            width: double.maxFinite,
            child: ListView(
               children: <Widget>[]
            ),
         ),
      );
   }
);

CodePudding user response：

On horizontal list and CheckboxListTile are trying to get infinite width. You can wrap the CheckboxListTile with SizedBox widget and provide width. You can take help of MediaQuery.of(context).size.width. And for the ListView It also required height and width on case and can be used SizedBox with height and width.

SizedBox(
  height: MediaQuery.of(context).size.height*.5,
  width: 200, //or 
  child: ListView(

buildCheckboxes(...)=> SizedBox(
      width: 200,
      child: CheckboxListTile(
          controlAffinity: ListTileControlAffinity.leading,

Also you can follow other widget like AlertDialog. or just

showDialog(
  context: context,
  builder: (context) => SizedBox(
    height: MediaQuery.of(context).size.height * .5,
    width: 200, //or
    child: Material(..