Flutter 實現進度條效果

用flutter開發的專案，最大的好處除了跨平臺之外，還有一點就是外掛多，便於很多功能的實現。

畫風（話鋒）一轉，老子說，事物都有兩面性，物極必反。外掛多是多，外掛帶來的問題也是不容小覷，總結下，外掛帶來的幾大問題。

（1）外掛更新不及時

外掛更新不及時，會導致我們連編譯都過不去，甚至要去改外掛的原生程式碼，這個時候，我們可能會自己建立一個github外掛，然後直接引用自己的github外掛地址，算了，真不靠譜的外掛作者！千言萬語盡在不言中。。。

（2）外掛衝突

外掛衝突，有的時候是配置衝突，比如經常遇到的android:resource="@xml/filepaths"/>
 同樣是在manifest裡面，有的外掛配置的是filepaths，有的為file_paths，這個也挺痛苦的。

（3）包體積

外掛用多了，包體積自然就大了，使用者一看這麼大的包，下載半天，算了，當然5G來了咱就另說了。

話不多說，解決之道，就4個字：少用外掛。

比如進度條外掛，之前我還用modal_progress_hud: ^0.1.3，發現沒必要，flutter本來就有LinearProgressIndicator，用來做進度顯示的。幹掉幹掉。

上程式碼：

  LinearProgressIndicator(   value: 0.3,   valueColor: AlwaysStoppedAnimation(Colors.red),   backgroundColor: Colors.blue,  ),

其中，value為進度值，valueColor為已經進行的進度顏色，backgroundColor就是還沒到的那段進度的顏色咯。

不要著急，上個完整的例子，給你們看效果。

  import 'package:flutter/material.dart';    class ProgressDemo extends StatefulWidget {   ProgressDemo({Key key}) : super(key: key);     @override   _ProgressDemoState createState() => _ProgressDemoState();  }    class _ProgressDemoState extends State{   @override   Widget build(BuildContext context) {   return Scaffold(    appBar: AppBar(    title: Text('flutter progress demo'),    ),    body: Container(    margin: EdgeInsets.only(top: 20),    alignment: Alignment.topCenter,    child: FlatButton(     child: Text('進度'),     color: Colors.blue,     onPressed: () {     return showDialog(context: context, builder: (context) {      return AlertDialog(      backgroundColor: Colors.transparent,      title: Text('上傳中...'),      content: LinearProgressIndicator(       value: 0.3,       valueColor: AlwaysStoppedAnimation(Colors.red),       backgroundColor: Colors.blue,      ),      shape: RoundedRectangleBorder(       borderRadius: BorderRadius.all(Radius.circular(10))      ),      );     },);     },    ),    ),   );   }  }

好了，效果如下：