1. Dark portion is continuously circulating.
2. Size of dark portion is proportional to amount of data loaded.

Example:- When 40% data loaded then the dark circulating part is 40% of circumference. When 60% data loaded then the dark circulating part is 60% of circumference. So on.

CodePudding user response：

1st Add this:

dependencies:
  percent_indicator: ^3.4.0

Then Example:

import 'package:flutter/material.dart';
import 'package:percent_indicator_example/sample_circular_page.dart';
import 'package:percent_indicator_example/sample_linear_page.dart';

void main() {
  runApp(MaterialApp(home: Scaffold(body: SamplePage())));
}

class SamplePage extends StatefulWidget {
  @override
  _SamplePageState createState() => _SamplePageState();
}

class _SamplePageState extends State<SamplePage> {
  void _openPage(Widget page) {
    Navigator.push(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) => page,
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MaterialButton(
              color: Colors.blueAccent,
              child: Text("Circular Library"),
              onPressed: () => _openPage(SampleCircularPage()),
            ),
            Padding(
              padding: EdgeInsets.all(20.0),
            ),
            MaterialButton(
              color: Colors.blueAccent,
              child: Text("Linear Library"),
              onPressed: () => _openPage(SampleLinearPage()),
            ),
          ],
        ),
      ),
    );
  }
}

CodePudding user response：

Here is my attempt to create this animation:

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 const MaterialApp(
      home: Scaffold(
        body: HomePage(),
      ),
    );
  }
}

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

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

class _HomePageState extends State<HomePage>
    with SingleTickerProviderStateMixin {
  late final AnimationController controller;
  double percent = 0.5;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )
      ..animateTo(1)
      ..repeat();
  }

  @override
  void dispose() {
    controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          CustomProgressIndicator(
            value: percent,
            color: Colors.orange,
            controller: controller,
            width: 200,
            height: 200,
            strokeWidth: 10,
            curve: Curves.slowMiddle,
          ),
          Slider(
            value: percent,
            onChanged: (v) {
              setState(() {
                percent = v;
              });
            },
          ),
        ],
      ),
    );
  }
}

class CustomProgressIndicator extends StatelessWidget {
  const CustomProgressIndicator({
    Key? key,
    required this.color,
    required this.value,
    required this.controller,
    required this.width,
    required this.height,
    required this.strokeWidth,
    this.curve = Curves.linear,
  }) : super(key: key);
  final Color color;
  final double value;
  final AnimationController controller;
  final double width;
  final double height;
  final double strokeWidth;
  final Curve curve;

  @override
  Widget build(BuildContext context) {
    return RotationTransition(
      turns: CurvedAnimation(
        parent: controller,
        curve: curve,
      ),
      child: SizedBox(
        width: width,
        height: height,
        child: CircularProgressIndicator(
          strokeWidth: strokeWidth,
          color: color,
          backgroundColor: color.withOpacity(.5),
          value: value,
        ),
      ),
    );
  }
}