import 'package:flutter/material.dart';
import 'dart:math';

void main() {
  runApp(
    MaterialApp(
      home: MyApp(),
    ),
  );
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        brightness: Brightness.dark,
      ),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int data = 0;
  int count = 12;

  @override
  void initState() {
    super.initState();
    fetchData();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Last $count Post'),
      ),
      body: RefreshIndicator(
        onRefresh: fetchData,
        child: data == 0
            ? LinearProgressIndicator()
            : ListView.builder(
                itemCount: count,
                itemBuilder: (context, index) {
                  return ListTile(title: Text('Post ID ${data - index}'));
                },
              ),
      ),
    );
  }

  Future<void> fetchData() async {
    int last = data;
    data = 0;

    setState(() {});
    Future.delayed(Duration(seconds: 3), () {
      data = last + count + (Random().nextInt(count));
      setState(() {});
    });
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.