title: How to display progress indicator in button widget (as shown in image)
body: <p>I am new in flutter. I have implemented a button and i want to progress indicator like below on click of the button.</p>
  
  <p><a href="https://i.stack.imgur.com/TChBL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/TChBL.png" alt="enter image description here"></a></p>
  
  <p>I have already use <a href="https://pub.dev/packages/percent_indicator#-readme-tab-" rel="nofollow noreferrer">percent indicator</a> package to implement but it's not archive properly.</p>
  
  <p>my code is, </p>
  
  <pre><code>class DownloadIndicatorWidget extends StatefulWidget {
    bool download = false;
  
    @override
    _DownloadIndicatorWidgetState createState() =&gt; _DownloadIndicatorWidgetState();
  }
  
  class _DownloadIndicatorWidgetState extends State&lt;DownloadIndicatorWidget&gt; {
  
    @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), //                   &lt;--- 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
              ),
            ),
          ),
        ),
      );
    }
  }
  
  </code></pre>
  
  <p>So, how to implement properly to archive like image ? and if there is any other way to achieve it, please do suggest me i really need this.
  Thanks in advance!</p>