how to use list view inside an unbounded column?

Question

i have a column that contains a listview and i faced this error : "RenderBox was not laid out: RenderStack#5ba52 relayoutBoundary=up9 NEEDS-PAINT NEEDS-COMPOSITING-BITS-UPDATE"

here is my code:

SingleChildScrollView(
    child: Padding(
      padding: const EdgeInsets.all(
        Constants.mediumSize,
      ),
      child: Column(
        children: [
          TaavLabeledDivider.text(
            'فهرست طبقات',
            textStyle: const TextStyle(
              color: CustomTaavTheme.primaryColor,
            ),
          ),
          Constants.mediumVerticalSpacer,
          Row(
            children: [
              _floorsRemainingDetails(),
              Constants.smallHorizontalSpacer,
              _unitsRemainingDetails(),
            ],
          ),
          Constants.xLargeVerticalSpacer,
          Stack(
            clipBehavior: Clip.none,
            alignment: Alignment.topCenter,
            children: [
              Container(
                decoration: BoxDecoration(
                  border: Border.all(color: CustomTaavTheme.borderColor),
                ),
                child: Padding(
                  padding: const EdgeInsets.all(Constants.mediumSize),
                  child: Column(
                    children: [
                      Constants.smallVerticalSpacer,
                      DoubleChildWidget(
                        first: _floorName(),
                        second: _usageTypes(),
                      ),
                      Constants.mediumVerticalSpacer,
                      DoubleChildWidget(
                        first: _unitCount(),
                        second: const SizedBox.shrink(),
                      ),
                      Constants.mediumVerticalSpacer,
                      _addUnit(),
                      Constants.mediumVerticalSpacer,
                      TaavListView<UnitOwnersViewModel>(
                        key: controller.addUnitList.key,
                        padding: const EdgeInsets.only(
                          top: 8,
                          right: 8,
                          left: 8,
                          bottom: 40,
                        ),
                        scrollDirection: Axis.vertical,
                        hasMoreData: false,
                        items: controller.addUnitList.list,
                        shrinkWrap: true,
                        itemBuilder: (
                            final context,
                            final item,
                            final index,
                            ) =>
                            AddUnitItem(
                              item: item,
                              index: index,
                              onDelete: () => controller.removeItemFromUnitList(index),
                            ),
                      ),
                      Constants.mediumVerticalSpacer,
                    ],
                  ),
                ),
              ),
              _addFloorTitle(),
              _addFloor(),
            ],
          ),
        ],
      ),
    ),
  );

i tried expanded and shrinkwrap but not working but when i wrap it into a sized box with a height its ok but i needs to it fill the remaining space. any idea will be greate.

Answer 1

I think shrinkwrap is indeed what you need.

I simplified your code a bit to make it a Minimal, Complete, Reproducible code sample:

import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);
const jediSkills = [
  'Instinctive Astrogation',
  'Flow-walking',
  'Force Listening',
  'Force Smell',
  'Force meld',
  'Force sense',
  'Precognition',
  'Psychometry',
  'Force empathy',
  'Farsight',
  'Force sight',
  'Force vision',
];

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(
        scaffoldBackgroundColor: darkBlue,
      ),
      debugShowCheckedModeBanner: false,
      home: const HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  const HomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: SingleChildScrollView(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: Column(
              children: [
                const Text(
                  'List of classes',
                  style: TextStyle(color: Colors.teal),
                ),
                const SizedBox(height: 16),
                const Text('Become a Jedi', style: TextStyle(fontSize: 24)),
                const SizedBox(height: 32),
                Column(
                  children: [
                    const Text('with'),
                    const SizedBox(height: 16),
                    const Text('Master Yoda', style: TextStyle(fontSize: 24)),
                    const SizedBox(height: 16),
                    const Text('and Grogu'),
                    const SizedBox(height: 16),
                    ListView.builder(
                      shrinkWrap: true,
                      itemCount: jediSkills.length,
                      itemBuilder: (context, index) {
                        return Padding(
                          padding: const EdgeInsets.symmetric(
                              vertical: 1, horizontal: 4),
                          child: Card(
                            child: ListTile(
                              onTap: () {},
                              title: Text(jediSkills[index]),
                              leading: CircleAvatar(
                                backgroundColor: Colors.purple.shade800,
                                foregroundColor: Colors.purple.shade200,
                                child: Text('$index'),
                              ),
                            ),
                          ),
                        );
                      },
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      ),
    );
  }
}