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

How to horizontal list view without fixed height in Flutter?

How can I solve the problem shown in the image below?
In the first case, the elements come to me with a certain height, then at another time the same elements come to me with a height less than the previous one, so an empty space remains at the bottom of the array!

How to avoid this case without using SingleChildScrollView or FittedBox?

enter image description here

The code:

SizedBox(
            height: 500,
            child: ListView.separated(
              itemCount: 5,
              scrollDirection: Axis.horizontal,
              separatorBuilder: (context, index) => const SizedBox(width: 20),
              itemBuilder: (context, index) => Container(),
            ),
          ),

I tried many ways and it didn’t work.

Tags:

2

Answers


  1. 0

    There is a method: Set fixed height for your Container (wrap ListView), then allows your listview item resizeable, eg.

    Container(
      height: 200,
  child: ListView.builder(
      ...
      itemBuilder: (_, index) {
        return Container(
          child: Column(
            mainAxisSize: MainAxisSize.min,
            children: [
              Expanded(
                child: Container(
                         //imgame, avatar...
                ),
              ),
              Text(
                //some text
                ...
                maxLines: 2,
              )
            ],
          ),
        );
      })
    Login or Signup to reply.
  2. 0

    You can replacing ListView.builder with SingleChildScrollView+Row

    Example: Select item and drag Slider to change it height, the parent container will fitted.
    enter image description here

    (open https://dartpad.dev/ and paster this code and press Run.)

    import 'package:flutter/material.dart';

const Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() => runApp(MaterialApp(home: MyApp()));

class Data {
  final int id;
  double height;
  Data(this.id, this.height);
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => MyAppState();
}

class MyAppState extends State<MyApp> {
  var list = List<Data>.generate(100, (i) => Data(i + 1, 150));
  int selectedIndex = 0;

  Widget renderList() {
    Widget renderItem(Data data) {
      return Card(
        child: InkWell(
          onTap: () {
            setState(() {
              selectedIndex = data.id;
            });
          },
          child: SizedBox(
            height: data.height,
            width: 100,
            child: Center(
              child: Text(data.id.toString()),
            ),
          ),
        ),
      );
    }

    return Card(
      child: SingleChildScrollView(
        scrollDirection: Axis.horizontal,
        child: Row(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: list.map((i) => renderItem(i)).toList(),
        ),
      ),
    );
  }

  Widget renderConfigPanel() {
    if (selectedIndex != 0) {
      return Card(
        child: Column(
          children: [
            Slider(
              min: 100,
              max: 300,
              label: "Height",
              value: list[selectedIndex - 1].height,
              onChanged: (newHeight) {
                setState(() {
                  list[selectedIndex - 1] = Data(selectedIndex, newHeight);
                });
              },
            ),
          ],
        ),
      );
    } else {
      return Container();
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(children: [
        renderList(),
        renderConfigPanel(),
      ]),
    );
  }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search