如何在按钮小部件中显示进度指示器（如图所示）

Posted 2023-02-23

【中文标题】如何在按钮小部件中显示进度指示器（如图所示）

【英文标题】：How to display progress indicator in button widget (as shown in image)

【发布时间】：2020-09-04 13:08:18

【问题描述】：

我是 Flutter 的新手。我已经实现了一个按钮，我想在点击按钮时像下面这样进度指示器。

我已经使用percent indicator包实现了，但是没有正确存档。

我的代码是，

class DownloadIndicatorWidget extends StatefulWidget 
  bool download = false;

  @override
  _DownloadIndicatorWidgetState createState() => _DownloadIndicatorWidgetState();


class _DownloadIndicatorWidgetState extends State<DownloadIndicatorWidget> 

  @override
  Widget build(BuildContext context) 
    return widget.download?ClipRRect(
      borderRadius: BorderRadius.circular(10),
      child: Container(
        height: 40,
      decoration: BoxDecoration(
          border: Border.all(
            color: Color(0xff9F00C5), //                   <--- border color
            width: 10.0,
          ),
          borderRadius: BorderRadius.circular(10.0)
      ),
        child: LinearPercentIndicator(
//      width: MediaQuery.of(context).size.width -
//        width:107,
          animation: true,
          lineHeight: 40.0,
          animationDuration: 2500,
          percent: 1,
          center: Text(
              "Downloading...",
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: Colors.black,
                  fontWeight: FontWeight.w800,
                  fontSize: 14
              )),
          linearStrokeCap: LinearStrokeCap.roundAll,
          progressColor: Color(0xff9F00C5),
          backgroundColor: Colors.white,
        ),
      ),
    ):RaisedButton(
      onPressed: () 
        setState(() 
          widget.download = true;
        );
      ,
      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10.0)),
      padding: EdgeInsets.all(0.0),
      child: Ink(
        decoration: BoxDecoration(
            gradient: LinearGradient(colors: [Color(0xff9F00C5), Color(0xff9405BD),Color(0xff7913A7),Color(0xff651E96), Color(0xff522887)],
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
            ),
            borderRadius: BorderRadius.circular(10.0)
        ),
        child: Container(
          constraints: BoxConstraints(maxWidth: 300.0, minHeight: 50.0),
          alignment: Alignment.center,
          child: Text(
            "Download",
            textAlign: TextAlign.center,
            style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.w800,
                fontSize: 18
            ),
          ),
        ),
      ),
    );
  

那么，如何正确实现像图像一样存档？如果有任何其他方法可以实现它，请建议我我真的需要这个。 提前致谢！

【参考方案1】：

此代码可能会对您有所帮助。

import 'dart:async';

import 'package:flutter/material.dart';

class Progress extends StatefulWidget 
  @override
  _ProgressState createState() => _ProgressState();


class _ProgressState extends State<Progress> 
  double progress = 0;

  void initState() 
    super.initState();

    Timer.periodic(Duration(milliseconds: 100), (Timer t) 
      setState(() 
        if (progress > 120) 
          progress = 0;
         else 
          progress += 5;
        
      );
    );
  

  @override
  Widget build(BuildContext context) 
    return Center(
      child: FlatButton(
        onPressed: () ,
        child: ClipRRect(
            borderRadius: BorderRadius.circular(10),
            child: Container(
                height: 45,
                width: 120,
                decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(10),
                    border: Border.all(
                      color: Colors.indigo,
                      width: 1,
                    )),
                child: Stack(
                  children: <Widget>[
                    AnimatedContainer(
                      color: Colors.indigo,
                      width: progress,
                      duration: Duration(milliseconds: 100),
                      curve: Curves.fastOutSlowIn,
                    ),
                    Center(child: Text("Downloading...")),
                  ],
                ))),
      ),
    );
  

【讨论】：

是的，很有用非常感谢@VasilKanev