joe
joe

Reputation: 9503

How to edit the height of item in the `ListView`?

The official docs has put height in the container, but when I repeat the code. I found that no matter small of big value it is. My item's height does not change. Here is my code

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:tweet_ui/embedded_tweet_view.dart';
import 'package:tweet_ui/models/api/tweet.dart';

class HerrListView extends StatefulWidget {
  final List<Tweet> items;
  final int extent;

  HerrListView({Key key, @required this.items, this.extent}) : super(key: key);

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

class _ListViewState extends State<HerrListView> {
  String title = 'Long List';
  String prevTitle = '';
  List<Tweet> items;
  double itemSize;

  // List<String> duplicateItems;
  TextEditingController textController;
  ScrollController con;

  @override
  void initState() {
    super.initState();
    items = widget.items;
    // duplicateItems = List.from(items);
    textController = TextEditingController();
    prevTitle = title;
    con = ScrollController();
    con.addListener(() {
      if (con.offset >= con.position.maxScrollExtent &&
          !con.position.outOfRange) {
        setState(() {
          title = "reached the bottom";
        });
      } else if (con.offset <= con.position.minScrollExtent &&
          !con.position.outOfRange) {
        setState(() {
          title = "reached the top";
        });
      } else {
        setState(() {
          title = prevTitle;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        title: title,
        home: Scaffold(
          appBar: AppBar(
            title: Text(title),
          ),
          body: ListView.builder(
            padding: const EdgeInsets.all(10),
            controller: con,
            itemExtent: widget.extent.toDouble(),
            itemCount: items.length,
            itemBuilder: (context, index) {
              return Container(
                height: 100,
                color: Colors.amber[index * 100],
                child: Text('Hi'),
              );
              // return Expanded(
              //   child: EmbeddedTweetView.fromTweet(widget.items[index]),
              // );
              // return Card(
              //   child: Padding(
              //     padding: const EdgeInsets.all(16.0),
              //     child: Text(
              //       '${items[index].text}',
              //       style: TextStyle(fontSize: 22.0),
              //     ),
              //   ),
              // );
            },
          ),
        ));
  }

  void dispose() {
    // Don't forget to dispose the ScrollController.
    con.dispose();
    super.dispose();
  }
}

Attempt: I had tried putting resizeToAvoidBottomPadding: false, in the Scaffold, but does not work

Question: How to edit the ListView item's height?

items in ListView

Upvotes: 0

Views: 819

Answers (1)

Erkan
Erkan

Reputation: 766

ListView.itemExtend property forces the children to have the given extent.

Remove this line

itemExtent: widget.extent.toDouble(),

for more info: https://api.flutter.dev/flutter/widgets/ListView/itemExtent.html

Upvotes: 1

Related Questions