Flutter Listview inside column not taking full height

Issue

enter image description here

Above one is requirement. Actually requirement is that first widget (Vertical List header with below list view should take full height) means if list view has 18 items. It should show 18 items. Then below that it should show horizontal scroll.

I tried in my way but due to column list view taking same height as other element due to which its not showing all item all the way. It takes half of height of screen and user need to scroll in that height itself.

Need your help to sort out it. As first listview should take full height and second widget should come below that.

Please see below code.

import 'dart:math';

import 'package:flutter/material.dart';

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          "Flutter test",
          style: TextStyle(color: Colors.black),
        ),
        elevation: 5,
        backgroundColor: Colors.white,
      ),
      body: Column(
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.start,
        children: [
          ListHeader("Vertical List Header"),
          VerticalList(),
          ListHeader("Horizontal List Header"),
          HorizontalList(),
          ListHeader("Vertical List Header"),
          VerticalList(),
          ScrollUp()
        ],
      ),
    );
  }
}

class ScrollUp extends StatelessWidget {
  const ScrollUp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        alignment: Alignment.bottomCenter,
        width: double.infinity,
        height: 50,
        child: Center(
          child: Text(
            "Click to scroll up",
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
      ),
    );
  }
}

class ListHeader extends StatelessWidget {
  final String title;
  const ListHeader(String title) : title = title;

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(fontSize: 18),
    );
  }
}

class HorizontalList extends StatelessWidget {
  const HorizontalList({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 30,
          itemBuilder: (BuildContext context, int index) => Container(
                margin:
                    const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                width: 30,
                height: 20,
                color: Colors.grey,
              )),
    );
  }
}

class VerticalList extends StatelessWidget {
  const VerticalList({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Expanded(
      child: ListView.builder(
        shrinkWrap: true,
        itemBuilder: (ctx, int) {
          return Container(
            margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
            width: double.infinity,
            height: 50,
            color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
          );
        },
        itemCount: 8,
      ),
    );
  }
}

Solution

Change the Column widget with a ListView widget.

And add shrinkWrap: true to its child ListView's'.

Remove the Expanded widget on both ListView.Builder

The horizontal ListView.Builder must have a Fixed height ( Link )

Add physics: NeverScrollableScrollPhysics() to the vertical ListView.Builder

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  Scaffold(
        appBar: AppBar(
          title: Text(
            "Flutter test",
            style: TextStyle(color: Colors.black),
          ),
          elevation: 5,
          backgroundColor: Colors.white,
        ),
        body: ListView(
          children: [
            ListHeader("Vertical List Header"),
            VerticalList(),
            ListHeader("Horizontal List Header"),
            HorizontalList(),
            ListHeader("Vertical List Header"),
            VerticalList(),
            ScrollUp()
          ],
        ),
      );
    
  }
}

class ScrollUp extends StatelessWidget {
  const ScrollUp({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return InkWell(
      child: Container(
        alignment: Alignment.bottomCenter,
        width: double.infinity,
        height: 50,
        child: Center(
          child: Text(
            "Click to scroll up",
            style: TextStyle(
              fontSize: 18,
            ),
          ),
        ),
      ),
    );
  }
}

class ListHeader extends StatelessWidget {
  final String title;
  const ListHeader(String title) : title = title;

  @override
  Widget build(BuildContext context) {
    return Text(
      title,
      style: TextStyle(fontSize: 18),
    );
  }
}

class HorizontalList extends StatelessWidget {
  const HorizontalList({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: ListView.builder(
          shrinkWrap: true,
          scrollDirection: Axis.horizontal,
          itemCount: 30,
          itemBuilder: (BuildContext context, int index) => Container(
                margin:
                    const EdgeInsets.symmetric(vertical: 20, horizontal: 10),
                width: 30,
                height: 20,
                color: Colors.grey,
              )),
    );
  }
}

class VerticalList extends StatelessWidget {
  const VerticalList({
    Key key,
  }) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      physics: NeverScrollableScrollPhysics(),
      shrinkWrap: true,
      itemBuilder: (ctx, int) {
        return Container(
          margin: const EdgeInsets.symmetric(vertical: 10, horizontal: 20),
          width: double.infinity,
          height: 50,
          color: Colors.primaries[Random().nextInt(Colors.primaries.length)],
        );
      },
      itemCount: 8,
    );
  }
}

Answered By – ibrahimxcool

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *