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

Question

我认为标题很容易解释。

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

我想我需要使用Stack来创建Text，但是如何根据栏的进度来放置它呢？

Answer 1

您可以使用Align小部件来对齐堆栈中的文本。使用对齐属性作为Alignment.lerp（Alignment.topLeft，Alignment.topRight，_progressValue）; 进度值应为0到1

https://dartpad.dev/bbc452ca5e8370bf2fbf48d34d82eb93

import 'package:flutter/material.dart';

void main() {
  runApp(new MaterialApp(
    debugShowCheckedModeBanner: false,
    home: new MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  @override
  MyAppState createState() => new MyAppState();
}

class MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text('Slider Demo'),
      ),
      body: new Container(
        color: Colors.blueAccent,
        padding: new EdgeInsets.all(32.0),
        child: new ProgressIndicatorDemo(),
      ),
    );
  }
}

class ProgressIndicatorDemo extends StatefulWidget {
  @override
  _ProgressIndicatorDemoState createState() =>
      new _ProgressIndicatorDemoState();
}

class _ProgressIndicatorDemoState extends State<ProgressIndicatorDemo>
    with SingleTickerProviderStateMixin {
  AnimationController controller;
  Animation<double> animation;

  @override
  void initState() {
    super.initState();
    controller = AnimationController(
        duration: const Duration(milliseconds: 2000), vsync: this);
    animation = Tween(begin: 0.0, end: 1.0).animate(controller)
      ..addListener(() {
        setState(() {
          // the state that has changed here is the animation object’s value
        });
      });
    controller.repeat();
  }

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

  @override
  Widget build(BuildContext context) {
    print(animation.value);
    return new Center(
        child: new Stack(children: <Widget>[
      LinearProgressIndicator(
        value: animation.value,
      ),
      Align(
          alignment :Alignment.lerp(Alignment.topLeft, Alignment.topRight, animation.value),
          child: Text("xxxxxxxxxxxxxxxxa"),
        ),
    ]));
  }
}