flutter/ The last widget disappears when you use Align in the itemBuilder in listview

Issue

I used the [HeightFactor] option in the [Align] widget.

Every time I scroll, the bottom widget disappears and appears. How shall I do it?

I tried [cacheExtent] in listview, but I don’t think this is right.

image.

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: ListView.builder(
          padding: const EdgeInsets.only(top: 50),
          itemCount: _color.length,
          itemBuilder: (BuildContext context, int index) {
            return Align(
              heightFactor: 0.6,
              child: Container(
                decoration: BoxDecoration(
                    color: _color[index],
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                alignment: Alignment.center,
                padding: const EdgeInsets.all(30),
                child: Text(
                  'ITEM $index',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
            );
          },
        ),
      ),
    );
  }

Solution

please remove container and replace with SingleChildScrollView in Scaffold body and also added

  shrinkWrap: true,
  physics: ClampingScrollPhysics(),

inside the list view

this is my code

List<Color> _colors = [
    Colors.blue,
    Colors.grey,
    Colors.redAccent,
    Colors.pink,
    Colors.orange,
    Colors.red,
    Colors.amber,
    Colors.blue,
    Colors.blue,
    Colors.grey,
    Colors.redAccent,
    Colors.pink,
    Colors.orange,
    Colors.red,
    Colors.amber,
    Colors.green,
    Colors.blue,
    Colors.grey,
    Colors.redAccent,
    Colors.pink,
    Colors.orange,
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: SingleChildScrollView(
        child: ListView.builder(
          shrinkWrap: true,
          physics: ClampingScrollPhysics(),
          padding: const EdgeInsets.only(top: 50),
          itemCount: _colors.length,
          itemBuilder: (BuildContext context, int index) {
            return Align(
              heightFactor: 0.6,
              child: Container(
                decoration: BoxDecoration(
                    color: _colors[index],
                    borderRadius: BorderRadius.all(Radius.circular(20))),
                alignment: Alignment.center,
                padding: const EdgeInsets.all(30),
                child: Text(
                  'ITEM ${index}',
                  style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
                ),
              ),
            );
          },
        ),
      ),
    );

it will work , please check the out put

https://ibb.co/z25rBvf

Answered By – Jinto Joseph

Answer Checked By – Marilyn (FlutterFixes Volunteer)