mini_canvas 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 54

mini_canvas #

利用Canvas绘制控件。

GitHub code size in bytes

导包 #

import 'package:mini_canvas/mini_canvas.dart';

主要实现的内容 #

  • 五角星

  • 仪表盘

  • 圆弧

  • 时钟

  • 水波纹进度

  • 自定义状态图

使用 #

引入库 #

dependencies:
  mini_canvas: ^0.1.0

更多功能clone项目,运行demo

开源不易,老铁们多多支持,点赞也是支持 😃 ! #

image.pngimage.png

0.1.1 #

移除无用代码

0.1.0 #

2020-03-25

  • 五角星
  • 仪表盘
  • 圆弧
  • 时钟
  • 水波纹进度
  • 自定义状态图

example/lib/main.dart

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

import 'time_clock_page.dart';

import 'package:mini_canvas/mini_canvas.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(home: MyHomePage());
}

class MyHomePage extends StatefulWidget {
  @override
  _MyHomePageState 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: Text("MiniCanvas 测试页面")),
        backgroundColor: Colors.grey[300],
        body: SingleChildScrollView(
          child: Column(children: items),
        ));
  }

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

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

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

  void initStringWidget() {
    items.add(_buildItem(
        "旋转字符串",
        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(
          "状态图标",
          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(
          "五角星",
          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]),
              ArcWidget(300, startAngle: 0.0, sweepAngle: 360.0, color: Colors.red, strokeWidth: 10),
              ArcWidget(50, color: Colors.red),
              ArcWidget(50, startAngle: 0.0, sweepAngle: 90.0),
              ArcWidget(50, startAngle: 0.0, sweepAngle: 180.0),
              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)));
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  mini_canvas: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:mini_canvas/mini_canvas.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
8
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
54
Learn more about scoring.

We analyzed this package on May 24, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.1
  • pana: 0.13.8-dev
  • Flutter: 1.17.0

Health suggestions

Format lib/clipper/circle_clipper.dart.

Run flutter format to format lib/clipper/circle_clipper.dart.

Format lib/mini_canvas.dart.

Run flutter format to format lib/mini_canvas.dart.

Format lib/painter/arc_painter.dart.

Run flutter format to format lib/painter/arc_painter.dart.

Fix additional 11 files with analysis or formatting issues.

Additional issues in the following files:

  • lib/painter/clock_painter.dart (Run flutter format to format lib/painter/clock_painter.dart.)
  • lib/painter/dash_board_painter.dart (Run flutter format to format lib/painter/dash_board_painter.dart.)
  • lib/painter/five_star_painter.dart (Run flutter format to format lib/painter/five_star_painter.dart.)
  • lib/painter/wave_progress_painter.dart (Run flutter format to format lib/painter/wave_progress_painter.dart.)
  • lib/utils/painter_util.dart (Run flutter format to format lib/utils/painter_util.dart.)
  • lib/widget/a.dart (Run flutter format to format lib/widget/a.dart.)
  • lib/widget/arc_widget.dart (Run flutter format to format lib/widget/arc_widget.dart.)
  • lib/widget/bash_board_widget.dart (Run flutter format to format lib/widget/bash_board_widget.dart.)
  • lib/widget/clock_widget.dart (Run flutter format to format lib/widget/clock_widget.dart.)
  • lib/widget/string_widget.dart (Run flutter format to format lib/widget/string_widget.dart.)
  • lib/widget/wave_progress.dart (Run flutter format to format lib/widget/wave_progress.dart.)

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12
meta 1.1.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test