Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How to fix RenderFlex children have non-zero flex but incoming height constraints are unbounded when using column inside singlechildview and list?

I have the following code

import 'package:flutter/material.dart';

class AddListingScreen extends StatefulWidget {
  const AddListingScreen({super.key});

  @override
  State<AddListingScreen> createState() => _AddListingScreenState();
}

class _AddListingScreenState extends State<AddListingScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo')),
      body: SingleChildScrollView(
          padding: const EdgeInsets.all(Dimens.spacingMedium),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            mainAxisSize: MainAxisSize.min,
            children: [
              Text('Search todo'),
              ListView.separated(
                  itemBuilder: (context, index) => Text(demo[index]),
                  separatorBuilder: (context, index) =>
                  const SizedBox(
                    height: Dimens.spacingSmall,
                  ),
                  itemCount: demo.length),
              // I plan to add more items here, and might have another ListView as well afterward
              // Idea is to have only 1 single scroll for the entire page!
            ],
          )),
    );
  }
}

final List<String> demo = ['a', 'b', 'c'];

If I comment out the ListView the page renders fine.

I tried

  1. Wrapping ListView with Expanded and did not work
  2. Using ConstrainBox on the Column, did not work
  3. ALMOST WORKS
    Adding
shrinkWrap: true,

to the ListView.separated works partially.
The render error is fixed, there is only one scrollbar but I can’t scroll until the bottom!

Any ideas ?

Tags:

2

Answers


  1. 0

    SingleChildScrollView and ListView both trying to get infinite height(size) which is causing the layout issue. I will suggest using CustomScrollView in this case.

    Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Demo')),
    body: Padding(
      padding: const EdgeInsets.all(Dimens.spacingMedium),
      child: CustomScrollView(
        slivers: [
          const SliverToBoxAdapter(child: Text('Search todo')),
          SliverList.separated(
            itemBuilder: (context, index) => Text(demo[index]),
            separatorBuilder: (context, index) =>
                const SizedBox(height: Dimens.spacingSmall),
            itemCount: demo.length,
          ),
        ],
      ),
    ),
  );
}
    Login or Signup to reply.
  2. 0

    in the second listView:

    • shrinkWrap: true
    • physics: NeverScrollableScrollPhysics()

    `

    class AddListingScreen extends StatefulWidget {
  const AddListingScreen({super.key});

  @override
  State<AddListingScreen> createState() => _AddListingScreenState();
}

class _AddListingScreenState extends State<AddListingScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Demo')),
      body: SingleChildScrollView(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          mainAxisSize: MainAxisSize.min,
          children: [
            Text('Search todo'),
            ListView.separated(
              shrinkWrap: true, // Add this line
              physics: NeverScrollableScrollPhysics(), // Add this line
              itemBuilder: (context, index) => Text(demo[index]),
              separatorBuilder: (context, index) => const SizedBox(
                height: 8.0,
              ),
              itemCount: demo.length,
            ),
         
          ],
        ),
      ),
    );
  }
}

final List<String> demo = ['a', 'b', 'c'];
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search