CODEWITHSUNDEEP
flutterdart
Gatonito
Gatonito

Reputation: 2164

Container inside ListView will expand even though it has height

The following Container inside a ListView, won't have a height, even though I specified one. Instead it expands to the entire ListView's height

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: ListView(
        scrollDirection: Axis.horizontal,
        shrinkWrap: true,
        children: [
          Container(
            width: 100,
            height: 20,
            color: Colors.red)
        ])
                                    
    );
  }
}

According to https://api.flutter.dev/flutter/widgets/Container-class.html,

If the widget has no child and no alignment, but a height, width, or constraints are provided, then the Container tries to be as small as possible given the combination of those constraints and the parent's constraints.

so shouldn't the Container be as small as possible, since it has constraints?

Upvotes: 2

Views: 1725

Answers (3)

Thierry
Thierry

Reputation: 8383

Have a look at Understanding Constraints in Flutter Docs.

The constraints given by the ListView to its children is too exactly fill the cross axis. Your Container cannot decide to have a size out of these constraints.

Remember, constraints go down, sizes go up.

You should position your Containers inside the ListView. In the following example, the first Container (Red) is not positioned, the second (Green) is Centered and the last (Blue) is Aligned on topLeft:

Center andAlign widgets both will take maximum height and give flexibility to their child, your Container.

enter image description here

Full source code:

import 'dart:math' show Random;

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;
  MyHomePage({Key? key, required this.title}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        color: Colors.grey.shade200,
        child: ListView(
          scrollDirection: Axis.horizontal,
          shrinkWrap: true,
          children: [
            Container(width: 100, height: 20, color: Colors.red),
            Center(
              child: Container(width: 100, height: 10, color: Colors.green),
            ),
            Align(
              alignment: Alignment.topLeft,
              child: Container(width: 100, height: 20, color: Colors.blue),
            ),
          ],
        ),
      ),
    );
  }
}

Upvotes: 5

Abdelrahman Sherif
Abdelrahman Sherif

Reputation: 2248

The ListView will take up all available space unless constrained, constraining the height of the ListView would fix the issue. You can wrap the ListView in a container with certain height (20, in your case).

Upvotes: 0

dariowskii
dariowskii

Reputation: 315

Try to wrap the ListView with a Container with a fixed height.

Upvotes: 1

Related Questions