Flutter layout issue with Card

Question

Why if I replace Text with Card, I will get error?

return Column(
                  mainAxisSize: MainAxisSize.min,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Expanded(
                        child: ListView.builder(
                      shrinkWrap: true,
                      scrollDirection: Axis.horizontal,
                      itemCount: snapshot.data.entity.workforce.length,
                      itemBuilder: (context, index) {
                        var item = snapshot.data.entity.workforce[index];
                        return Text(item['work_force_name']);
                      },
                    ))
                  ]);

The above code works. But if I change Text to Card , I get error

  return Card(
        elevation: 2,
        child: ListTile(
        dense: true,
        title: Text(item['work_force_name'].toString()),
        subtitle: Text(item['no_work_force'].toString()),
     ));

Error

RenderBox was not laid out: RenderRepaintBoundary#88567 relayoutBoundary=up15 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE
'package:flutter/src/rendering/box.dart':
Failed assertion: line 1785 pos 12: 'hasSize'
The relevant error-causing widget was
    ListView 
lib/ui/edit_status_esite_diary.dart:74
════════════════════════════════════════════════════════════════════════════════

════════ Exception caught by rendering library ═════════════════════════════════
'package:flutter/src/rendering/sliver_multi_box_adaptor.dart': Failed assertion: line 545 pos 12: 'child.hasSize': is not true.
The relevant error-causing widget was
    ListView 
lib/ui/edit_status_esite_diary.dart:74
════════════════════════════════════════════════════════════════════════════════
Reloaded 194 of 1766 libraries in 10,279ms.

Answer 1

Since you are using a horizontal ListView (no width limit) and a Card takes the maximum width by default, you should restrict the width of the Card s.

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      title: 'Flutter Demo',
      home: Scaffold(
        body: MyWidget(),
      ),
    ),
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final List<Map<String, String>> items = List.generate(10, (index) {
      return {
        'work_force_name': 'Work Force $index',
        'no_work_force': 'x00000$index',
      };
    }).toList();
    return SizedBox(
      height: 100,
      child: ListView.builder(
        shrinkWrap: true,
        scrollDirection: Axis.horizontal,
        itemCount: items.length,
        itemBuilder: (context, index) {
          var item = items[index];
          return SizedBox(
            width: 150,
            child: Card(
              elevation: 2,
              child: ListTile(
                dense: true,
                title: Text(item['work_force_name'].toString()),
                subtitle: Text(item['no_work_force'].toString()),
              ),
            ),
          );
        },
      ),
    );
  }
}