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

Question

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

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



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

Answer 1

您可以使用对齐小部件来对齐堆栈中的文本。使用对齐属性作为 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"),
        ),
    ]));
  }
}