mini_canvas 3.1.0

Canvas completed widgets. Such as pentagram, dashboard, dial, etc.

example/lib/main.dart

import 'package:flutter/material.dart';

import 'time_clock_page.dart';

import 'package:mini_canvas/mini_canvas.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) => const MaterialApp(home: MyHomePage());
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final List<Widget> _items;

  @override
  void didChangeDependencies() {
    super.didChangeDependencies();
    _items = [
      _buildItem(
          '波浪进度',
          ListView(
            children: <Widget>[
              const WaveProgress(
                100,
                20,
                label: '空置面积剩余',
                subLabel: '5000㎡',
              ),
              const WaveProgress(
                300,
                20,
                label: '进度',
              ),
              WaveProgress(
                MediaQuery.sizeOf(context).width,
                70,
                label: '出勤率',
              ),
            ],
          )),
      _buildItem(
          '仪表盘',
          ListView(
            children: <Widget>[
              const BashBoardWidget(100,
                  strokeWidth: 8, label: '收缴率', value: 68.23),
              const BashBoardWidget(300,
                  strokeWidth: 10, label: '出勤率', value: 100),
              BashBoardWidget(MediaQuery.sizeOf(context).width,
                  strokeWidth: 20, label: '出租率', value: 35.33),
            ],
          )),
      _buildItem('时钟', const TimeClockPage()),
      _buildItem(
          '旋转字符串',
          const Stack(
            children: <Widget>[
              StringWidget(
                '↖',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.left,
                verticalAlign: VerticalAlign.top,
              ),
              StringWidget(
                '↑',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.center,
                verticalAlign: VerticalAlign.top,
              ),
              StringWidget(
                '↗',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.right,
                verticalAlign: VerticalAlign.top,
              ),
              StringWidget(
                '←',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.left,
                verticalAlign: VerticalAlign.center,
              ),
              StringWidget(
                '+',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.center,
                verticalAlign: VerticalAlign.center,
              ),
              StringWidget(
                '→',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.right,
                verticalAlign: VerticalAlign.center,
              ),
              StringWidget(
                '↙',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.left,
                verticalAlign: VerticalAlign.bottom,
              ),
              StringWidget(
                '↓',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.center,
                verticalAlign: VerticalAlign.bottom,
              ),
              StringWidget(
                '↘',
                width: 100,
                height: 100,
                horizontalTextAlign: TextAlign.right,
                verticalAlign: VerticalAlign.bottom,
              )
            ],
          )),
      _buildItem(
          '状态图标',
          const Wrap(
            children: <Widget>[
              StateWidget('进行中', color: Colors.blue, size: 60),
              StateWidget('已删除', color: Colors.red, size: 100, fontSize: 18),
              StateWidget('已完成', color: Colors.green, size: 180, fontSize: 38)
            ],
          )),
      _buildItem(
          '五角星',
          const Wrap(
            children: <Widget>[
              FiveStarWidget(50),
              FiveStarWidget(50, rotateAngle: 30),
              FiveStarWidget(50, rotateAngle: 60, color: Colors.blue),
              FiveStarWidget(50, rotateAngle: 90, color: Colors.blue),
              FiveStarWidget(50, rotateAngle: 120),
              FiveStarWidget(50, rotateAngle: 140)
            ],
          )),
      _buildItem(
          '圆弧、圆',
          Wrap(
            children: <Widget>[
              ArcWidget(50,
                  startAngle: 0.0,
                  sweepAngle: 300.0,
                  color: Colors.red,
                  strokeWidth: 15,
                  borderColor: Colors.grey.shade200),
              ArcWidget(100,
                  startAngle: 0.0,
                  sweepAngle: 90.0,
                  color: Colors.red,
                  strokeWidth: 15,
                  borderColor: Colors.grey.shade200),
              ArcWidget(200,
                  startAngle: 270.0,
                  sweepAngle: 90.0,
                  color: Colors.red,
                  strokeWidth: 15,
                  borderColor: Colors.grey.shade200),
              const ArcWidget(300,
                  startAngle: 0.0,
                  sweepAngle: 360.0,
                  color: Colors.red,
                  strokeWidth: 10),
              const ArcWidget(50, color: Colors.red),
              const ArcWidget(50, startAngle: 0.0, sweepAngle: 90.0),
              const ArcWidget(50, startAngle: 0.0, sweepAngle: 180.0),
              const ArcWidget(50, startAngle: 0.0, sweepAngle: 270.0),
            ],
          )),
    ];
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(title: const Text('MiniCanvas 测试页面')),
        backgroundColor: Colors.grey[300],
        body: SingleChildScrollView(
          child: Column(children: _items),
        ));
  }

  Widget _buildItem(String title, Widget widget) =>
      ListTile(title: Text(title), onTap: () => gotoPage(widget, title));

  void gotoPage(Widget widget, String title) => Navigator.push(
      context,
      MaterialPageRoute(
          builder: (ctx) =>
              Scaffold(appBar: AppBar(title: Text(title)), body: widget)));
}