首页 > 技术文章 > 进度条

braveheart007 2019-04-19 13:51 原文

进度条代码:

直线进度条和圆圈进度环,用法一样,里边都有个参数value这个就是进度,从0-1。下面就是一个完整的示例:



import 'package:flutter/material.dart';

void main()=>runApp(MyApp());

class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: HomePage(),
),
);
}
}

class HomePage extends StatefulWidget {
@override
_HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
var _currentvalue=0.0;
@override
Widget build(BuildContext context) {
return Center(
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.only(top:100,bottom: 100,),
child: LinearProgressIndicator(
value: _currentvalue,
backgroundColor: Colors.deepOrange,
valueColor: AlwaysStoppedAnimation(Colors.lightGreen),
),
),
CircularProgressIndicator(
value:_currentvalue,
),
GestureDetector(
onTap: (){setState(() {
if(_currentvalue>=1.0){
_currentvalue=0.01;
}else{
_currentvalue+=0.01;
}
});},
child: Image.network(
'http://www.ecobentech.com/img/a.jpg',
width: 100.0,
height: 200.0,
),
),
],
),
);
}
}
 

推荐阅读