Flutter - 如何在 LinearProgressIndicator 中添加跟随进度位置的标签

Question

我认为标题是不言自明的。

基本上我需要有一个 LinearProgressIndicator ，其标签位于与当前进度相同的位置。像这样：

我想我需要使用 aStack来创建Text，但是如何根据栏的进度来定位它？

Answer 1

您可以使用对齐小部件来对齐堆栈中的文本。使用对齐属性为 Alignment.lerp(Alignment.topLeft, Alignment.topRight, _progressValue);\n进度值应从 0 到 1

\n\n

https://dartpad.dev/bbc452ca5e8370bf2fbf48d34d82eb93

\n\n

import \'package:flutter/material.dart\';\n\nvoid main() {\n  runApp(new MaterialApp(\n    debugShowCheckedModeBanner: false,\n    home: new MyApp(),\n  ));\n}\n\nclass MyApp extends StatefulWidget {\n  @override\n  MyAppState createState() => new MyAppState();\n}\n\nclass MyAppState extends State<MyApp> {\n  @override\n  Widget build(BuildContext context) {\n    return new Scaffold(\n      appBar: new AppBar(\n        title: new Text(\'Slider Demo\'),\n      ),\n      body: new Container(\n        color: Colors.blueAccent,\n        padding: new EdgeInsets.all(32.0),\n        child: new ProgressIndicatorDemo(),\n      ),\n    );\n  }\n}\n\nclass ProgressIndicatorDemo extends StatefulWidget {\n  @override\n  _ProgressIndicatorDemoState createState() =>\n      new _ProgressIndicatorDemoState();\n}\n\nclass _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo>\n    with SingleTickerProviderStateMixin {\n  AnimationController controller;\n  Animation<double> animation;\n\n  @override\n  void initState() {\n    super.initState();\n    controller = AnimationController(\n        duration: const Duration(milliseconds: 2000), vsync: this);\n    animation = Tween(begin: 0.0, end: 1.0).animate(controller)\n      ..addListener(() {\n        setState(() {\n          // the state that has changed here is the animation object\xe2\x80\x99s value\n        });\n      });\n    controller.repeat();\n  }\n\n  @override\n  void dispose() {\n    controller.stop();\n    super.dispose();\n  }\n\n  @override\n  Widget build(BuildContext context) {\n    print(animation.value);\n    return new Center(\n        child: new Stack(children: <Widget>[\n      LinearProgressIndicator(\n        value: animation.value,\n      ),\n      Align(\n          alignment :Alignment.lerp(Alignment.topLeft, Alignment.topRight, animation.value),\n          child: Text("xxxxxxxxxxxxxxxxa"),\n        ),\n    ]));\n  }\n}\n

\n