From 78c9aa3071070f4001a9cc0832ad6fc3432a1ca0 Mon Sep 17 00:00:00 2001 From: zhangmeng <494089941@qq.com> Date: Wed, 25 Aug 2021 19:00:15 +0800 Subject: [PATCH] add circle chart --- example/lib/main_home.dart | 10 +++-- example/lib/widgets/example_button.dart | 6 +++ example/lib/widgets/example_chart.dart | 37 ++++++++++++++++ lib/buttons/as_button.dart | 22 +++++++++- lib/chart/circle_chart_widget.dart | 56 +++++++++++++++++++++++++ lib/painters/circle_chart_painter.dart | 37 ++++++++++++++++ 6 files changed, 164 insertions(+), 4 deletions(-) create mode 100644 example/lib/widgets/example_chart.dart create mode 100644 lib/chart/circle_chart_widget.dart create mode 100644 lib/painters/circle_chart_painter.dart diff --git a/example/lib/main_home.dart b/example/lib/main_home.dart index 6214ecc..b6549e1 100644 --- a/example/lib/main_home.dart +++ b/example/lib/main_home.dart @@ -1,6 +1,7 @@ import 'package:example/widgets/example_bottom_button.dart'; import 'package:example/widgets/example_box.dart'; import 'package:example/widgets/example_button.dart'; +import 'package:example/widgets/example_chart.dart'; import 'package:example/widgets/example_dialog.dart'; import 'package:example/widgets/example_divider.dart'; import 'package:example/widgets/example_drawer.dart'; @@ -16,9 +17,8 @@ import 'package:example/widgets/example_tag.dart'; import 'package:example/widgets/example_text_field.dart'; import 'package:example/widgets/example_toast.dart'; import 'package:flutter/material.dart'; -import 'package:get/get.dart'; - import 'package:flutter_screenutil/flutter_screenutil.dart'; +import 'package:get/get.dart'; class MainHome extends StatefulWidget { MainHome({Key key}) : super(key: key); @@ -110,10 +110,14 @@ class _MainHomeState extends State { title: 'Toast', onPressed: () => Get.to(ExampleToast()), ), - _innerButton( + _innerButton( title: 'Divider', onPressed: () => Get.to(ExampleDivider()), ), + _innerButton( + title: 'chart', + onPressed: () => Get.to(ExampleChart()), + ), ], ); } diff --git a/example/lib/widgets/example_button.dart b/example/lib/widgets/example_button.dart index e8e3edb..6e10aad 100644 --- a/example/lib/widgets/example_button.dart +++ b/example/lib/widgets/example_button.dart @@ -69,6 +69,12 @@ class _ExampleButtonState extends State { trailing: ASButton.order( title: '立即下单', )), + ListTile( + title: Text('yellowHollow'), + trailing: ASButton.yellowHollow( + title: '立即下单', + onPressed: () {}, + )), SizedBox(height: 12.w), Row( children: [ diff --git a/example/lib/widgets/example_chart.dart b/example/lib/widgets/example_chart.dart new file mode 100644 index 0000000..556bdb2 --- /dev/null +++ b/example/lib/widgets/example_chart.dart @@ -0,0 +1,37 @@ +import 'package:ansu_ui/ansu_ui.dart'; +import 'package:ansu_ui/chart/circle_chart_widget.dart'; +import 'package:flutter/material.dart'; + +class ExampleChart extends StatefulWidget { + const ExampleChart({Key key}) : super(key: key); + + @override + _ExampleChartState createState() => _ExampleChartState(); +} + +class _ExampleChartState extends State { + @override + Widget build(BuildContext context) { + return ASScaffold( + title: 'chart', + body: ListView( + children: [ + 20.hb, + ListTile( + title: Text('circle chart'), + trailing: Container( + width: 50.w, + height: 50.w, + child: CircleChart( + size: 40.w, + color: Colors.red, + aboveStrokeWidth: 10.w, + core: '65%'.text.size(20.sp).color(kTextColor).make(), + aspectRato: 0.65, + ), + )), + ], + ), + ); + } +} diff --git a/lib/buttons/as_button.dart b/lib/buttons/as_button.dart index cd055b3..2415a63 100644 --- a/lib/buttons/as_button.dart +++ b/lib/buttons/as_button.dart @@ -1,6 +1,6 @@ +import 'package:ansu_ui/styles/as_colors.dart'; import 'package:flutter/material.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart'; -import 'package:ansu_ui/styles/as_colors.dart'; ///安速按钮 class ASButton extends StatelessWidget { @@ -43,6 +43,7 @@ class ASButton extends StatelessWidget { final Color? disableTextColor; final Color? splashColor; + ASButton({ Key? key, this.bgcolor, @@ -110,6 +111,7 @@ class ASButton extends StatelessWidget { outline = false, this.splashColor = ColorTool.getSplashColor(kPrimaryColor), super(key: key); + ASButton.operation( {Key? key, this.radius, @@ -126,6 +128,7 @@ class ASButton extends StatelessWidget { textColor = kTextColor, outline = false, super(key: key); + ASButton.order({ Key? key, required this.title, @@ -143,6 +146,23 @@ class ASButton extends StatelessWidget { padding = EdgeInsets.symmetric(vertical: 8.w), super(key: key); + ASButton.yellowHollow( + {Key? key, + this.radius, + this.textStyle, + this.padding, + required this.title, + this.onPressed, + this.width, + this.disableColor, + this.splashColor}) + : outline = true, + outlineColor = kPrimaryColor, + bgcolor = Colors.white, + textColor = kPrimaryColor, + disableTextColor = kPrimaryColor, + super(key: key); + @override Widget build(BuildContext context) { return MaterialButton( diff --git a/lib/chart/circle_chart_widget.dart b/lib/chart/circle_chart_widget.dart new file mode 100644 index 0000000..cc24a88 --- /dev/null +++ b/lib/chart/circle_chart_widget.dart @@ -0,0 +1,56 @@ +import 'package:ansu_ui/painters/circle_chart_painter.dart'; +import 'package:flutter/material.dart'; +import 'package:flutter_screenutil/flutter_screenutil.dart'; + +class CircleChart extends StatelessWidget { + final double? size; + + ///角度 + final double aspectRato; + + ///底部圆圈的宽度 + final double? underStrokeWidth; + + ///弧的宽度 + final double? aboveStrokeWidth; + + ///弧的颜色 + final Color color; + + ///圆圈中间显示的组件 + final Widget core; + + const CircleChart( + {Key? key, + this.size, + required this.aspectRato, + this.underStrokeWidth, + this.aboveStrokeWidth, + required this.color, + required this.core}) + : super(key: key); + + double get customSize => size ?? 100.w; + + double get customUnderWidth => underStrokeWidth ?? 5.w; + + double get customAboveWidth => aboveStrokeWidth ?? 15.w; + + @override + Widget build(BuildContext context) { + return SizedBox( + width: customSize, + height: customSize, + child: CustomPaint( + painter: CircleChartPainter( + underStrokeWidth: customUnderWidth, + aboveStrokeWidth: customAboveWidth, + radius: aspectRato, + aboveColor: color), + child: Align( + alignment: Alignment.center, + child: core, + )), + ); + } +} diff --git a/lib/painters/circle_chart_painter.dart b/lib/painters/circle_chart_painter.dart new file mode 100644 index 0000000..68791f9 --- /dev/null +++ b/lib/painters/circle_chart_painter.dart @@ -0,0 +1,37 @@ +import 'dart:math'; + +import 'package:flutter/material.dart'; + +class CircleChartPainter extends CustomPainter { + final double underStrokeWidth; + final double aboveStrokeWidth; + final double radius; + final Color aboveColor; + + CircleChartPainter( + {required this.underStrokeWidth, + required this.aboveStrokeWidth, + required this.radius, + required this.aboveColor}); + + @override + void paint(Canvas canvas, Size size) { + var offset = Offset(size.width / 2, size.height / 2); + var paint = Paint() + ..strokeWidth = underStrokeWidth + ..style = PaintingStyle.stroke + ..color = Color(0xFFCECECE); + canvas.drawCircle(offset, size.width / 2, paint); + paint + ..strokeWidth = aboveStrokeWidth + ..strokeCap = StrokeCap.round + ..color = aboveColor; + var rect = Rect.fromCircle(center: offset, radius: size.width / 2); + canvas.drawArc(rect, -pi / 2, 2 * pi * radius, false, paint); + } + + @override + bool shouldRepaint(covariant CustomPainter oldDelegate) { + return false; + } +}