如何顺利进步LinearProgressIndicator

Question

所以我尝试在 Flutter 中创建一个线性进度指示器，在 5 秒内顺利填充指示器。目前我的方法如下：

import 'dart:async';

import 'package:flutter/material.dart';

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

  @override
  State<MyFile> createState() => _MyFileState();
}

class _MyFileState extends State<MyFile> {
  double _value = 0.0;

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

    Timer.periodic(const Duration(seconds: 1), (timer) {
      setState(() {
        _value += .2;
      });

      if (_value == 1) {
        timer.cancel();
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: LinearProgressIndicator(
          value: _value,
        ),
      ),
    );
  }
}

这可行，但进度是按步骤显示的，而不是平滑地填充进度指示器。我有什么办法可以做到这一点吗？谢谢你

Answer 1

要创建一个在一段时间内逐渐填充的平滑 LinearProgressIndicator，您可以使用

动画控制器 和 TweenAnimationBuilder

更精确、更流畅的动画。

import 'package:flutter/material.dart';

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

  @override
  State<MyFile> createState() => _MyFileState();
}

class _MyFileState extends State<MyFile> with SingleTickerProviderStateMixin {
  late AnimationController _controller;

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

    // Initialize the AnimationController
    _controller = AnimationController(
      vsync: this,
      duration: const Duration(seconds: 5), // total duration for the progress
    )..forward(); // start the animation immediately
  }

  @override
  void dispose() {
    _controller.dispose(); // Always dispose of the controller when not needed
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: SafeArea(
        child: Center(
          child: AnimatedBuilder(
            animation: _controller,
            builder: (context, child) {
              return LinearProgressIndicator(
                value: _controller.value, // This value changes smoothly over time
              );
            },
          ),
        ),
      ),
    );
  }
}

动画控制器

：我们用它来控制动画。它会在您指定的一段时间内（在本例中为 5 秒）平滑地将其值从 0.0 更改为 1.0。

前进（）

：这会在创建控制器后立即启动动画。

动画生成器

：只要动画的值发生变化，此小部件就会重建 LinearProgressIndicator，从而提供平滑的过渡。

处置（）

：我们确保在不再需要时将其丢弃，以防止内存泄漏。