Flutter圆形渐变进度条插件circular_gradient_progress的使用
Flutter圆形渐变进度条插件circular_gradient_progress的使用
使用
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.3,
sweepAngles: const [600, 720, 860],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
)
完整示例代码
import 'package:circular_gradient_progress/circular_gradient_progress.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
void main(List<String> args) {
runApp(const MainApp());
SystemChrome.setEnabledSystemUIMode(SystemUiMode.immersive);
}
class MainApp extends StatelessWidget {
const MainApp({super.key});
[@override](/user/override)
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(
useMaterial3: false,
),
home: const PaintApp(),
);
}
}
class PaintApp extends StatefulWidget {
const PaintApp({super.key});
[@override](/user/override)
State<PaintApp> createState() => _PaintAppState();
}
class _PaintAppState extends State<PaintApp> {
[@override](/user/override)
Widget build(BuildContext context) {
// 定义背景颜色
final backgroundColors = [
const Color(0xffE00213).withOpacity(0.22),
const Color(0xff3BDD00).withOpacity(0.22),
const Color(0xff02BBE1).withOpacity(0.22),
];
// 定义渐变颜色
const gradientColors = [
[Color(0xffE00213), Color.fromARGB(255, 245, 62, 138)],
[Color(0xff3BDD00), Color(0xffB6FE02)],
[Color(0xff02BBE1), Color(0xff00FCD0)],
];
// 动画时长
const duration = Duration(seconds: 3);
return Scaffold(
backgroundColor: Colors.black,
body: Center(
child: SingleChildScrollView(
child: Column(
children: [
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
// 第一个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.3,
sweepAngles: const [-1, -1, -1],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
// 第二个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
sweepAngles: const [30, 70, 100, 300, 20, 10, 10],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
// 第三个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.3,
sweepAngles: const [600, 720, 860],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
// 第四个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.3,
sweepAngles: const [600, 720, 860],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
// 第五个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.3,
sweepAngles: const [300, 120, 260],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
// 第六个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.3,
sweepAngles: const [330, 330, 330],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
// 第七个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.3,
gapRatio: 0.2,
sweepAngles: const [400, 500, 600],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
// 第八个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.6,
gapRatio: 0.2,
sweepAngles: const [400, 500, 600],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
],
),
const SizedBox(height: 10),
Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
// 第九个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0.2,
gapRatio: 0,
sweepAngles: const [400, 500, 600],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
// 第十个圆形渐变进度条
CircularGradientCombineWidget(
size: 120,
duration: duration,
centerCircleSizeRatio: 0,
gapRatio: 0,
sweepAngles: const [400, 500, 600],
backgroundColors: backgroundColors,
gradientColors: gradientColors,
),
],
),
],
),
),
),
);
}
}
更多关于Flutter圆形渐变进度条插件circular_gradient_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
1 回复
更多关于Flutter圆形渐变进度条插件circular_gradient_progress的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html
当然，我可以为你提供一个关于如何使用 circular_gradient_progress Flutter 插件的代码示例。这个插件允许你创建一个具有渐变效果的圆形进度条。以下是一个简单的示例代码，展示如何在你的 Flutter 应用中使用这个插件。
首先，确保你已经在 pubspec.yaml 文件中添加了 circular_gradient_progress 依赖：
dependencies:
flutter:
sdk: flutter
circular_gradient_progress: ^x.y.z # 替换为最新版本号
然后，运行 flutter pub get 来获取依赖。
接下来，在你的 Dart 文件中，你可以按照以下方式使用 CircularGradientProgressIndicator：
import 'package:flutter/material.dart';
import 'package:circular_gradient_progress/circular_gradient_progress.dart';
void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Circular Gradient Progress Demo'),
),
body: Center(
child: CircularGradientProgressExample(),
),
),
);
}
}
class CircularGradientProgressExample extends StatefulWidget {
@override
_CircularGradientProgressExampleState createState() => _CircularGradientProgressExampleState();
}
class _CircularGradientProgressExampleState extends State<CircularGradientProgressExample> with SingleTickerProviderStateMixin {
double _progress = 0.5; // 初始进度值
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 200,
height: 200,
child: CircularGradientProgressIndicator(
progress: _progress,
backgroundColor: Colors.grey[200]!,
gradient: LinearGradient(
colors: [Colors.blue, Colors.red],
begin: Alignment.topLeft,
end: Alignment.bottomRight,
),
width: 20.0,
strokeWidth: 4.0,
center: Text(
'${(_progress * 100).toInt()}%',
style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold, color: Colors.white),
),
),
),
SizedBox(height: 20),
Slider(
value: _progress,
onChanged: (newValue) {
setState(() {
_progress = newValue;
});
},
min: 0.0,
max: 1.0,
),
],
);
}
}
在这个示例中：
CircularGradientProgressIndicator用于创建具有渐变效果的圆形进度条。progress属性设置当前的进度值。backgroundColor属性设置背景颜色。gradient属性设置渐变颜色，从左上角到右下角。width和strokeWidth属性分别设置进度条的宽度和描边宽度。center属性用于在进度条中心显示当前的进度百分比。
此外，还有一个 Slider 小部件，用于动态更改进度条的值，并实时更新界面。
运行这个代码，你将会看到一个带有渐变效果的圆形进度条，以及一个可以调整进度的滑块。
