mini_canvas 3.0.4

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> {
  List<Widget> items = [];

  @override
  Widget build(BuildContext context) {
    items.clear();
    initWaveProgress();
    initBashBoarWidget();
    initClockWidget();
    initArcWidgets();
    initFiveWidgets();
    initStateWidgets();
    initStringWidget();
    return Scaffold(
        appBar: AppBar(title: const Text("MiniCanvas 测试页面")),
        backgroundColor: Colors.grey[300],
        body: SingleChildScrollView(
          child: Column(children: items),
        ));
  }

  void initWaveProgress() {
    items.add(_buildItem(
        "波浪进度",
        ListView(
          children: <Widget>[
            const WaveProgress(
              100,
              20,
              label: '空置面积剩余',
              subLabel: '5000㎡',
            ),
            const WaveProgress(
              300,
              20,
              label: '进度',
            ),
            WaveProgress(
              MediaQuery.of(context).size.width,
              70,
              label: '出勤率',
            ),
          ],
        )));
  }

  void initBashBoarWidget() {
    items.add(_buildItem(
        "仪表盘",
        ListView(
          children: <Widget>[
            const BashBoardWidget(100,
                strokeWidth: 8, label: '收缴率', value: 68.23),
            const BashBoardWidget(300,
                strokeWidth: 10, label: '出勤率', value: 100),
            BashBoardWidget(MediaQuery.of(context).size.width,
                strokeWidth: 20, label: '出租率', value: 35.33),
          ],
        )));
  }

  void initClockWidget() {
    items.add(_buildItem("时钟", const TimeClockPage()));
  }

  void initStringWidget() {
    items.add(_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,
            )
          ],
        )));
  }

  void initStateWidgets() {
    items.add(_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)
          ],
        )));
  }

  void initFiveWidgets() {
    items.add(_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)
          ],
        )));
  }

  void initArcWidgets() {
    items.add(_buildItem(
        "圆弧、圆",
        Wrap(
          children: <Widget>[
            ArcWidget(50,
                startAngle: 0.0,
                sweepAngle: 300.0,
                color: Colors.red,
                strokeWidth: 15,
                borderColor: Colors.grey[200]!),
            ArcWidget(100,
                startAngle: 0.0,
                sweepAngle: 90.0,
                color: Colors.red,
                strokeWidth: 15,
                borderColor: Colors.grey[200]!),
            ArcWidget(200,
                startAngle: 270.0,
                sweepAngle: 90.0,
                color: Colors.red,
                strokeWidth: 15,
                borderColor: Colors.grey[200]!),
            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),
          ],
        )));
  }

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