Getting some erros when building GridView

Question

I have been recently getting this errors in my GridView, but only when running it on Real Devices(Happens with Android and iPhone devices).

Errors:

════════ Exception caught by rendering library ═════════════════════════════════
The following assertion was thrown during performLayout():
Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget (see https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1722 pos 7: 'tileWidth != leadingSize.width || tileWidth == 0.0'


Either the assertion indicates an error in the framework itself, or we should provide substantially more information in this error message to help you determine and fix the underlying cause.
In either case, please report this assertion by filing a bug on GitHub:
  https://github.com/flutter/flutter/issues/new?template=2_bug.md

The relevant error-causing widget was
ListTile
When the exception was thrown, this was the stack
#2      _RenderListTile.performLayout
#3      RenderObject.layout
#4      RenderPadding.performLayout
#5      RenderObject.layout
#6      RenderPadding.performLayout
...
The following RenderObject was being processed when the exception was fired: _RenderListTile#3da4d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
RenderObject: _RenderListTile#3da4d NEEDS-LAYOUT NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
    parentData: offset=Offset(0.0, 0.0) (can use size)
    constraints: BoxConstraints(w=68.0, h=54.7)
    size: MISSING
    leading: RenderParagraph#bed81 relayoutBoundary=up1 NEEDS-PAINT
        parentData: offset=Offset(0.0, 0.0) (can use size)
        constraints: BoxConstraints(0.0<=w<=68.0, 0.0<=h<=54.7)
        size: Size(68.0, 32.0)
        textAlign: center
        textDirection: ltr
        softWrap: wrapping at box width
        overflow: clip
        locale: en_US
        maxLines: unlimited
        text: TextSpan
            debugLabel: ((englishLike body1 2014).merge(blackMountainView bodyText2)).copyWith
            inherit: false
            color: Color(0xdd000000)
            family: Roboto
            size: 14.0
            weight: 400
            baseline: alphabetic
            decoration: TextDecoration.none
            "No parking spot"
    title: RenderConstrainedBox#fbbdc NEEDS-LAYOUT NEEDS-PAINT
        parentData: offset=Offset(0.0, 0.0)
        constraints: MISSING
        size: MISSING
        additionalConstraints: BoxConstraints(unconstrained)
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderListTile#3da4d NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#0b1e1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#0be47 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#459a2 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPointerListener#91e94 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#c896d NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderMouseRegion#0b93c NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#16727 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'No parking spot'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#55a96 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'No parking spot'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderInkFeatures#3a146 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'No parking spot'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#0921c NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'No parking spot'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#377a7 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'No parking spot'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#4b4f6 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'No parking spot'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#00a52 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
GridView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#b4962 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
GridView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
Leading widget consumes entire tile width. Please use a sized widget, or consider replacing ListTile with a custom widget (see https://api.flutter.dev/flutter/material/ListTile-class.html#material.ListTile.4)
'package:flutter/src/material/list_tile.dart':
Failed assertion: line 1722 pos 7: 'tileWidth != leadingSize.width || tileWidth == 0.0'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderListTile#d708a NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#b33e9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#a83e1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#96675 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPointerListener#d189c NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#1e85d NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderMouseRegion#ec538 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
ListTile
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#31b1d NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'More Than 5 Totes'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#d4c29 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'More Than 5 Totes'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: _RenderInkFeatures#d2bdf NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'More Than 5 Totes'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderCustomPaint#c0642 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'More Than 5 Totes'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPhysicalShape#c75f1 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'More Than 5 Totes'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderPadding#44309 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
Card-[<'More Than 5 Totes'>]
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderSemanticsAnnotations#0cbe8 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
GridView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
RenderBox was not laid out: RenderRepaintBoundary#e40ed NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1930 pos 12: 'hasSize'

The relevant error-causing widget was
GridView
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 544 pos 12: 'child.hasSize': is not true.
The relevant error-causing widget was
GridView
════════════════════════════════════════════════════════════════════════════════

This the code where I am building this GridView.

Widget build(BuildContext context) {
return Column(children: [
  Expanded(
    child: GridView.builder(
      //physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      //scrollDirection: Axis.vertical,
      itemCount: 6,
      gridDelegate: new SliverGridDelegateWithFixedCrossAxisCount(
        crossAxisCount: 3,
        childAspectRatio: MediaQuery.of(context).size.width /
            (MediaQuery.of(context).size.height / 3),
      ),
      itemBuilder: (BuildContext context, int index) {
        return Card(
            key: ValueKey(options[index].description),
            margin: const EdgeInsets.all(10),
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(10)),

            // The color depends on this is selected or not
            color: options[index].isSelected == true
                ? Colors.amber
                : Colors.white,
            child: ListTile(
              onTap: () {
                // if this item isn't selected yet, "isSelected": false -> true
                // If this item already is selected: "isSelected": true -> false
                setState(() {
                  options[index].isSelected = !options[index].isSelected;
                  //selectedItems[index] = options[index].description;
                  selectedItems[index] = options[index].description;
                });
              },
              leading: Text(
                options[index].description.toString(),
                textAlign: TextAlign.center,
              ),
              /*title: Text(
            options[index].description, 
                        ),*/
            ));
      },
    ),
  ),
  ElevatedButton(
    //onPressed: () => insertText('Drop \n', textController),
    //onPressed: () => showModalOptions(context),
    onPressed: () => {
      InsertText().insertText(
          'Drop Number: ' + widget.dropsController.text + '\n',
          widget.textController),
      for (var i = 0; i < selectedItems.length; i++)
        {
          if (selectedItems[i].isNotEmpty)
            if (i == 0)
              {
                InsertText().insertText(
                    selectedItems[i] + ' + ', widget.textController),
              }
            else if (i != selectedItems.length)
              {
                InsertText().insertText(
                    selectedItems[i] + ' ', widget.textController)
              }
        },
      setState(() {
        for (var i = 0; i < options.length; i++) {
          options[i].isSelected = false;
          selectedItems[i] = '';
        }
      })
    },
    child: Text('Add Drop'),
  ),
]);

This is where I am calling on Main.dart

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: DefaultTabController(
        length: 2,
        child: Scaffold(
          appBar: AppBar(
            title: Text('Driver Notes'),
            bottom: TabBar(
              tabs: [
                Icon(Icons.notes),
                Icon(Icons.ac_unit),
              ],
            ),
          ),
          body: TabBarView(children: [
            // Action Tab
            Column(
              children: [
                Row(children: [
                  Container(
                    child: SizedBox(
                      width: 150,
                      child: TextField(
                        decoration: InputDecoration(labelText: 'Starting Date'),
                        controller: startDate,
                        onTap: _startDatePicker,
                      ),
                    ),
                  ),
                  SizedBox(
                    width: 150,
                    child: TextField(
                      decoration: InputDecoration(labelText: 'Starting Time'),
                      controller: startTime,
                      onTap: _startTimePicker,
                    ),
                  ),
                ]),
                Row(children: [
                  SizedBox(
                    width: 150,
                    child: TextField(
                      decoration: InputDecoration(labelText: 'Finising Date'),
                      controller: finishDate,
                      onTap: _finishDatePicker,
                    ),
                  ),
                  SizedBox(
                    width: 150,
                    child: TextField(
                      decoration: InputDecoration(labelText: 'Finising Time'),
                      controller: finishTime,
                      onTap: _finishTimePicker,
                    ),
                  ),
                ]),
                TextField(
                  decoration: InputDecoration(labelText: 'Drop Number'),
                  keyboardType: TextInputType.number,
                  controller: dropController,
                ),
                Expanded(
                  child: ReasonSelection(textController, dropController),
                ),
                
              ],
            ),
            // Result Tab
            NotesTab(
                textController, startDate, startTime, finishDate, finishTime),
          ]),
        ),
      ),
    );
  }
}

Running on Android emulator:

I have tried some solutions like using Expanded, SizedBox, setting shrinkWrap to true, no sucess until now. Any idea of what is happening or how to fix it?

Thanks.

Answer 1

I think you can use CustomScrollView and add slivers for this case