hero_linear_progress_indicator.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Boxy Demo',
      theme: ThemeData.dark(),
      home: const MyPage(index: 0),
    );
  }
}

const numPages = 6;

class MyPage extends StatelessWidget {
  const MyPage({Key? key, required this.index}) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Page ${index + 1}')),
      body: Column(
        children: [
          Piggy(index: index),
          if (index != numPages - 1)
            ElevatedButton(
              onPressed: () {
                Navigator.of(context).push(CupertinoPageRoute(
                    builder: (context) => MyPage(index: index + 1)));
              },
              child: const Text('Next'),
            )
        ],
      ),
    );
  }
}

class Piggy extends StatelessWidget {
  const Piggy({Key? key, required this.index}) : super(key: key);

  final int index;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(32),
      child: Hero(
        tag: 'hi',
        child: LinearProgressIndicator(
          value: index / (numPages - 1),
          color: Colors.pink,
        ),
        flightShuttleBuilder: (
          context,
          animation,
          flightDirection,
          fromHeroContext,
          toHeroContext,
        ) {
          return AnimatedBuilder(
            animation: animation,
            builder: (context, child) {
              return LinearProgressIndicator(
                value: Tween(
                  begin: (flightDirection == HeroFlightDirection.push
                          ? index - 1
                          : index) /
                      (numPages - 1),
                  end: (flightDirection == HeroFlightDirection.push
                          ? index
                          : index + 1) /
                      (numPages - 1),
                ).evaluate(animation),
                color: Colors.pink,
              );
            },
          );
        },
      ),
    );
  }
}