add circle chart

master
张萌 3 years ago
parent a56a407233
commit 78c9aa3071

@ -1,6 +1,7 @@
import 'package:example/widgets/example_bottom_button.dart'; import 'package:example/widgets/example_bottom_button.dart';
import 'package:example/widgets/example_box.dart'; import 'package:example/widgets/example_box.dart';
import 'package:example/widgets/example_button.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_dialog.dart';
import 'package:example/widgets/example_divider.dart'; import 'package:example/widgets/example_divider.dart';
import 'package:example/widgets/example_drawer.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_text_field.dart';
import 'package:example/widgets/example_toast.dart'; import 'package:example/widgets/example_toast.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
class MainHome extends StatefulWidget { class MainHome extends StatefulWidget {
MainHome({Key key}) : super(key: key); MainHome({Key key}) : super(key: key);
@ -110,10 +110,14 @@ class _MainHomeState extends State<MainHome> {
title: 'Toast', title: 'Toast',
onPressed: () => Get.to(ExampleToast()), onPressed: () => Get.to(ExampleToast()),
), ),
_innerButton( _innerButton(
title: 'Divider', title: 'Divider',
onPressed: () => Get.to(ExampleDivider()), onPressed: () => Get.to(ExampleDivider()),
), ),
_innerButton(
title: 'chart',
onPressed: () => Get.to(ExampleChart()),
),
], ],
); );
} }

@ -69,6 +69,12 @@ class _ExampleButtonState extends State<ExampleButton> {
trailing: ASButton.order( trailing: ASButton.order(
title: '立即下单', title: '立即下单',
)), )),
ListTile(
title: Text('yellowHollow'),
trailing: ASButton.yellowHollow(
title: '立即下单',
onPressed: () {},
)),
SizedBox(height: 12.w), SizedBox(height: 12.w),
Row( Row(
children: [ children: [

@ -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<ExampleChart> {
@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,
),
)),
],
),
);
}
}

@ -1,6 +1,6 @@
import 'package:ansu_ui/styles/as_colors.dart';
import 'package:flutter/material.dart'; import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart'; import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:ansu_ui/styles/as_colors.dart';
/// ///
class ASButton extends StatelessWidget { class ASButton extends StatelessWidget {
@ -43,6 +43,7 @@ class ASButton extends StatelessWidget {
final Color? disableTextColor; final Color? disableTextColor;
final Color? splashColor; final Color? splashColor;
ASButton({ ASButton({
Key? key, Key? key,
this.bgcolor, this.bgcolor,
@ -110,6 +111,7 @@ class ASButton extends StatelessWidget {
outline = false, outline = false,
this.splashColor = ColorTool.getSplashColor(kPrimaryColor), this.splashColor = ColorTool.getSplashColor(kPrimaryColor),
super(key: key); super(key: key);
ASButton.operation( ASButton.operation(
{Key? key, {Key? key,
this.radius, this.radius,
@ -126,6 +128,7 @@ class ASButton extends StatelessWidget {
textColor = kTextColor, textColor = kTextColor,
outline = false, outline = false,
super(key: key); super(key: key);
ASButton.order({ ASButton.order({
Key? key, Key? key,
required this.title, required this.title,
@ -143,6 +146,23 @@ class ASButton extends StatelessWidget {
padding = EdgeInsets.symmetric(vertical: 8.w), padding = EdgeInsets.symmetric(vertical: 8.w),
super(key: key); 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 @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return MaterialButton( return MaterialButton(

@ -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,
)),
);
}
}

@ -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;
}
}
Loading…
Cancel
Save