Flutter：具有不同高度约束的水平 ListView 视图

Question

I have a horizontal list bar with fixed height 100 (used inside Column). Height 100 is good for iPhone8. But the pixel overflows in iPhone-X due to limited 100 height. If I make it 140, both are good. But the bar looks no good in iphone8. So I want 120 height in one device and 140 in other device. I thought I could achieve it using ConstrainedBox like below:

ConstrainedBox(constraints: BoxConstraints(minHeight: 100, maxHeight: 140), child: ListView(...))

But listview goes with 140 height all the time. So How to achive dynamic height contraint for different device?

Sample widget:

class MyHorizontalBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      height: 100, // 140
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          _myCard(),
          _myCard(),
          _myCard(),
        ],
      ),
    );
  }

  Widget _myCard(){
    return Container(
      width: 115,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text('Top', style: TextStyle(fontSize: 12)),
          Text('Middle', style: TextStyle(fontSize: 25)),
          Text('Bottom', style: TextStyle(fontSize: 18)),
        ],
      ),
    );
  }
}

Answer 1

Try using MediaQuery.of(context).size.height or width in place of constant height and width.

Answer 2

You can use LayoutBuilder widget. But such problems are usually solved with a flexible layout .

eg defining your horizontal bar height as 1/3 of available height.

Answer 3

Use MediaQuery.of(context)

try the following code.

class MyHorizontalBar extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    double magicNumber = 5; // Try playing with this number to get the appearence. 
    return SizedBox(
      height: MediaQuery.of(context).size.height / magicNumber, 
      child: ListView(
        scrollDirection: Axis.horizontal,
        children: [
          _myCard(),
          _myCard(),
          _myCard(),
        ],
      ),
    );
  }

  Widget _myCard() {
    return Container(
      width: 115,
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
              Text('Top', style: TextStyle(fontSize: 12)),
              Text('Middle', style: TextStyle(fontSize: 25)),
              Text('Bottom', style: TextStyle(fontSize: 18)),
            ],
          ),
        );
      }
    }

Try playing with the variable magicNumber.