flutter circularprogressindicator加文案

flutter circularprogressindicator加文案
要在Flutter 中使用CircularProgressIndicator并添加文案，你可以使
用Column和Row布局来放置进度指示器和文本。

下面是一个简单的示例代码：
dart
import'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Circular Progress Indicator with Text',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(
title: Text('Circular Progress Indicator with Text'),
),
body: Center(
child: CircularProgressIndicatorWithText(),
),
),
);
}
}
class CircularProgressIndicatorWithText extends StatefulWidget{ @override
_CircularProgressIndicatorWithTextState createState() =>
_CircularProgressIndicatorWithTextState();
}
class_CircularProgressIndicatorWithTextState extends
State<CircularProgressIndicatorWithText> {
double _progress = 0.0;
void _incrementProgress() {
if (_progress < 1.0) {
setState(() {
_progress += 0.01;
});
} else {
_progress = 0.0;
}
}
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(
value: _progress,
color: Colors.green,
strokeWidth: 2.0,
),
Text(
'Loading ${_progress * 100}%', // 将进度值转换为百分比并显示在文本中
style: TextStyle(fontSize: 20.0),
),
RaisedButton(
child: Text('Increase Progress'),
onPressed: _incrementProgress,
),
],
);
}
}
在上面的代码中，我们创建了一个简单的Flutter 应用，其中包含一
个CircularProgressIndicator和一个文本，显示进度的百分比。

我们使
用Column和Row布局将它们放置在一起。

CircularProgressIndicator的值
由_progress变量控制，通过setState()方法更新进度值。

文本通过Text组件显示，其中包含了进度的百分比。

最后，我们添加了一个RaisedButton，用于增加进度。