Flutter动画里程碑插件animated_milestone的使用

Flutter动画里程碑插件animated_milestone的使用

AnimatedMilestone 是一个轻量级且可定制的 Flutter 包，允许用户轻松创建与里程碑/时间轴相关的用例。

特性

  • 可定制动画：轻松调整动画以满足您的需求。
  • 多用途对齐方式：与不同的用例对齐里程碑。
  • 极简设计：简单而干净的设计，易于集成。

截图

截图 截图 截图

开始使用

要开始使用 AnimatedMilestone，请将依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  animated_milestone:

使用方法

要使用此包，请将其依赖项添加到您的 pubspec.yaml 文件中：

dependencies:
  flutter:
    sdk: flutter
  animated_milestone:

如何使用

以下是一个简单的示例，展示如何使用 MilestoneTimeline 和 Milestone：

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

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

class MyApp extends StatelessWidget {
  [@override](/user/override)
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('AnimatedMilestone 示例'),
        ),
        body: Center(
          child: MilestoneTimeline(
            color: Colors.lightGreen,
            circleRadius: 12,
            activeWithStick: true,
            stickThickness: 3,
            milestones: [
              Milestone(
                title: const Text("订单已提交", style: TextStyle(fontWeight: FontWeight.bold)),
                child: const Text("我们已经收到您的订单。", style: TextStyle(fontSize: 12)),
              ),
              Milestone(
                title: const Text("正在处理", style: TextStyle(fontWeight: FontWeight.bold)),
                child: const Text("您的订单正在处理中。", style: TextStyle(fontSize: 12)),
              ),
              Milestone(
                title: const Text("已完成", style: TextStyle(fontWeight: FontWeight.bold)),
                child: const Text("您的订单已完成。", style: TextStyle(fontSize: 12)),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

更多关于Flutter动画里程碑插件animated_milestone的使用的实战教程也可以访问 https://www.itying.com/category-92-b0.html

1 回复

更多关于Flutter动画里程碑插件animated_milestone的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html


当然，以下是如何在Flutter项目中使用animated_milestone插件来实现动画里程碑效果的示例代码。animated_milestone是一个用于显示动画里程碑的Flutter插件，它通常用于显示用户进度或成就。

首先，确保在你的pubspec.yaml文件中添加animated_milestone依赖：

dependencies:
  flutter:
    sdk: flutter
  animated_milestone: ^最新版本号  # 请替换为实际发布的最新版本号

然后，运行flutter pub get来获取依赖。

接下来，在你的Flutter项目中，你可以按照以下方式使用AnimatedMilestone：

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Animated Milestone Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MilestoneDemo(),
    );
  }
}

class MilestoneDemo extends StatefulWidget {
  @override
  _MilestoneDemoState createState() => _MilestoneDemoState();
}

class _MilestoneDemoState extends State<MilestoneDemo> with SingleTickerProviderStateMixin {
  double _progress = 0.5;  // 初始进度
  AnimationController? _controller;

  @override
  void initState() {
    super.initState();
    _controller = AnimationController(
      duration: const Duration(seconds: 2),
      vsync: this,
    )..repeat(reverse: true);  // 示例动画，可以删除或修改
  }

  @override
  void dispose() {
    _controller?.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Animated Milestone Demo'),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            AnimatedMilestone(
              milestones: [
                Milestone(
                  icon: Icons.star,
                  color: Colors.amber,
                ),
                Milestone(
                  icon: Icons.star,
                  color: Colors.amber,
                ),
                Milestone(
                  icon: Icons.star,
                  color: Colors.amber,
                ),
                Milestone(
                  icon: Icons.star_half,
                  color: Colors.amber.withAlpha(128),
                ),
                Milestone(
                  icon: Icons.star_border,
                  color: Colors.grey,
                ),
              ],
              progress: _progress,
              size: 50.0,
              spacing: 10.0,
              completedColor: Colors.green,
              incompleteColor: Colors.grey,
            ),
            SizedBox(height: 20),
            Slider(
              value: _progress,
              onChanged: (newValue) {
                setState(() {
                  _progress = newValue;
                });
              },
              min: 0.0,
              max: 1.0,
            ),
          ],
        ),
      ),
    );
  }
}

在这个示例中：

  1. AnimatedMilestone小部件接受一个milestones列表，每个Milestone对象包含图标和颜色。
  2. progress属性表示当前进度，从0到1。
  3. size和spacing属性控制里程碑图标的大小和它们之间的间距。
  4. completedColor和incompleteColor属性分别定义已完成和未完成里程碑的颜色。

另外，示例中还包括一个Slider小部件，用于动态更改进度值。

确保在实际项目中替换最新版本号为animated_milestone插件的最新版本。这个示例展示了如何使用animated_milestone插件来创建一个简单的进度里程碑动画。

回到顶部