美文网首页
flutter 环形图

flutter 环形图

作者: huisedediao | 来源:发表于2024-02-08 17:20 被阅读0次

    安装

    flutter pub add xb_chart
    



    源码:https://github.com/huisedediao/xb_annulus_chart

    image.png
    import 'package:flutter/material.dart';
    import 'package:xb_custom_widget_cabin/annulus_chart/annulus_chart_vm.dart';
    import 'package:xb_custom_widget_cabin/annulus_chart/xb_annulus_chart/xb_annulus_chart.dart';
    import 'package:xb_custom_widget_cabin/annulus_chart/xb_annulus_chart/xb_annulus_chart_model.dart';
    import 'package:xb_scaffold/xb_scaffold.dart';
    
    class AnnulusChart extends XBPage<AnnulusChartVM> {
      const AnnulusChart({super.key});
    
      @override
      generateVM(BuildContext context) {
        return AnnulusChartVM(context: context);
      }
    
      @override
      String setTitle(AnnulusChartVM vm) {
        return "环形图demo";
      }
    
      @override
      Widget buildPage(vm, BuildContext context) {
        final models = [
          XBAnnulusChartModel(name: '张益达', color: Colors.orange, value: 10),
          XBAnnulusChartModel(name: 'snack', color: Colors.purple, value: 10),
          XBAnnulusChartModel(name: '吕小布', color: Colors.green, value: 10),
          XBAnnulusChartModel(name: '曾小贤', color: Colors.blue, value: 10),
          XBAnnulusChartModel(name: '吴彦祖', color: Colors.greenAccent, value: 10),
          XBAnnulusChartModel(name: '张震', color: Colors.red, value: 10)
        ];
    
        return Center(
          child: Padding(
            padding: const EdgeInsets.all(8.0),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(10),
              child: Container(
                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.all(8.0),
                  child: XBAnnulusChart(
                    annulusRadius: 100,
                    models: models,
                  ),
                ),
              ),
            ),
          ),
        );
      }
    }
    
    

    相关文章

      网友评论

          本文标题:flutter 环形图

          本文链接:https://www.haomeiwen.com/subject/mpmkadtx.html