android - Flutter ListView glitching with items have changeable height after future

Question

I'm not sure what is wrong here

scrolling the list down has no problems; but when scrolling back up the list glitches;

Flutter version 1.22.5 Dart version 2.10.4 Android SDK version 30.0.3 gradle:4.1.2 kotlin:1.4.21 minSdkVersion 21 targetSdkVersion 27 compileSdkVersion 30 buildToolsVersion "30.0.3"

preview

the code I'm using

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage();

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

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Container(
        child: ListView.builder(
          itemCount: 100,
          itemBuilder: (cx, index) {
            return DemoScreen(index);
          },
        ),
      ),
    );
  }
}

class DemoScreen extends StatefulWidget {
  DemoScreen(this.index);

  final int index;

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

class _DemoScreenState extends State<DemoScreen> {
  bool loaded = false;

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(seconds: 1), () {
      loaded = true;
      setState(() {});
    });
  }

  @override
  Widget build(BuildContext context) {
    if (loaded) {
      return Container(
        height: 100,
        color: widget.index % 2 == 0 ? Colors.blue : Colors.green,
        child: Center(child: Text(widget.index.toString())),
      );
    }
    return Container(
      height: 200,
      color: widget.index % 2 == 0 ? Colors.blue : Colors.green,
      child: Center(child: Text(widget.index.toString())),
    );
  }

  @override
  void setState(fn) {
    if (this.mounted) {
      try {
        super.setState(fn);
        setState(fn);
      } catch (e) {}
    }
  }
}

question from:https://stackoverflow.com/questions/65870204/flutter-listview-glitching-with-items-have-changeable-height-after-future

Answer 1

Waitting for answers