1

I'm trying to create a horizontal list view with some card. I want the list view to have height X and the cards to have height Y, I don't know why but the cards are getting the height of the list view. This is what I have:

class FinanceApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SafeArea(
        child: Container(
          color: Color(0x180000),
          child: Column(
            children: <Widget>[
              Header(),
              SizedBox(
                height: 20,
              ),
              Expanded(
                child: Container(
                  width: double.infinity,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.circular(32.0),
                      topRight: Radius.circular(32.0),
                    ),
                  ),
                  child: Column(
                    children: <Widget>[
                      Container(
                        height: 250,
                        child: ListView(
                          scrollDirection: Axis.horizontal,
                          children: <Widget>[
                            CustomCard(),
                            CustomCard(),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

EDIT: The only thing that kinda works for me, Is to wrap the card container in another container, use padding to get the size I want, but it does not seem like a great solution.

John Doah
  • 1,839
  • 7
  • 25
  • 46
  • Same question with no perfect answer https://stackoverflow.com/questions/50155738/flutter-minimum-height-on-horizontal-list-view – Phani Rithvij Apr 30 '20 at 09:36
  • I think I saw that thread when I looked for an answer, tried what was there but still nothing. Thanks, that's so weird that there is no answer to that yet. – John Doah Apr 30 '20 at 09:44
  • filed an issue at flutter repo https://github.com/flutter/flutter/issues/56028 we might need help from the flutter team. – Phani Rithvij Apr 30 '20 at 09:56

1 Answers1

3

Check this out:

      import 'package:flutter/material.dart';


      class StackOverFlow extends StatefulWidget {
        @override
        _StackOverFlowState createState() => _StackOverFlowState();
      }

      class _StackOverFlowState extends State<StackOverFlow> {
        @override
        Widget build(BuildContext context) {
          return Scaffold(
            body:

            Center(
              child: Container(
                color: Colors.blue,
                height: 200.0,
                width: double.infinity,
                child: ListView.builder(
                  physics: BouncingScrollPhysics(),
                  scrollDirection: Axis.horizontal,
                  padding: const EdgeInsets.all(16.0),
                  itemCount: 100,
                  itemBuilder: _buildItem,
                ),
              ),
            ),
          );
        }

        Widget _buildItem (BuildContext context, int index) {
          return Center(
            child: Card(
              child: Text(index.toString()),
            ),
          );
        }
      }

enter image description here

And for giving children same size consider wrapping the cards with a Container:

        Widget _buildItem (BuildContext context, int index) {
          return Center(
            child: Container(
              height: 100.0,
              width: 100.0,
              child: Card(
                child: Center(child: Text(index.toString())),
              ),
            ),
          );
        }

enter image description here

Taba
  • 3,850
  • 4
  • 36
  • 51