Flutter Demo: A List show number 1-100

main.dart

import 'package:flutter/material.dart';

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

class InfiniteListView extends StatefulWidget {
  const InfiniteListView({super.key});

  @override
  State<StatefulWidget> createState() {
    return _InfiniteListViewState();
  }
}

class _InfiniteListViewState extends State<InfiniteListView> {
  static const loadingTag = "##londing##";
  var numbers = List<String>.generate(100, (index) => "${index + 1}");
  var words = <String>[loadingTag];

  @override
  Widget build(BuildContext context) {
    return ListView.separated(
        itemBuilder: ((context, index) {
          if (words[index] == loadingTag) {
            if (words.length - 1 < 100) {
              retrieveData();
              return Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child: const SizedBox(
                  width: 24.0,
                  height: 24.0,
                  child: CircularProgressIndicator(strokeWidth: 2.0),
                ),
              );
            } else {
              return Container(
                padding: const EdgeInsets.all(16.0),
                alignment: Alignment.center,
                child:
                    const Text("没有更多了", style: TextStyle(color: Colors.grey)),
              );
            }
          }
          return ListTile(
            title: Text(words[index]),
          );
        }),
        separatorBuilder: (context, index) => const Divider(
              height: .0,
            ),
        itemCount: words.length);
  }

  void retrieveData() {
    Future.delayed(const Duration(seconds: 2)).then((value) {
      setState(
        () {
          words.insertAll(words.length - 1, numbers.getRange(0, 20));
          numbers.removeRange(0, 20);
        },
      );
    });
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key, required this.title});

  final String title;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(title)),
      body: const InfiniteListView(),
    );
  }
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'A List show number 1-100'),
    );
  }
}