page_view_progress_indicator_example.dart

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

const darkBlue = Color.fromARGB(255, 18, 32, 47);

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

class AppScrollBehavior extends MaterialScrollBehavior {
  @override
  Set<PointerDeviceKind> get dragDevices => {
        PointerDeviceKind.touch,
        PointerDeviceKind.mouse,
      };
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      scrollBehavior: AppScrollBehavior(),
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

final colors = [
  Colors.purple.shade50,
  Colors.purple.shade100,
  Colors.purple.shade200,
  Colors.purple.shade300,
  Colors.purple.shade400,
  Colors.purple.shade500,
  Colors.purple.shade600,
  Colors.purple.shade700,
  Colors.purple.shade800,
  Colors.purple.shade900,
];

class _MyHomePageState extends State<MyHomePage> {
  final controller = PageController(
    viewportFraction: 0.8,
  );

  @override
  Widget build(BuildContext context) {
    final pages = [
      for (var color in colors)
        Container(
          color: color,
          alignment: Alignment.center,
          margin: const EdgeInsets.all(64),
          child: Text(
            '#${(color.value & 0xFFFFFF).toRadixString(16)}',
            style: const TextStyle(
              fontSize: 24,
              fontWeight: FontWeight.bold,
            ),
          ),
        )
    ];

    return Scaffold(
      body: Column(
        children: [
          Expanded(
            child: PageView(
              controller: controller,
              children: pages,
            ),
          ),
          AnimatedBuilder(
            animation: controller,
            builder: (context, child) {
              return LinearProgressIndicator(
                minHeight: 8.0,
                color: Colors.purple,
                value: (controller.page ?? 0) / (pages.length - 1),
              );
            },
          ),
        ],
      ),
    );
  }
}