分类标签归档:Flutter

Flutter PainterSketch


简介

操作图形的界面;

基本用法

  • canvas + paint + GestureDetector 实现一个 简易的画板;

实例演示

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

class PainterSketchDome extends StatefulWidget {
  PainterSketchDome({Key key, this.title}) : super(key: key);

  final String tit...

阅读全文...

Flutter PainterPath


简介

在 canvas 上绘制的图案,canvas + paint 的应用。

基本用法

  • canvas 的 painter 的自定义绘制线的方法;

绘制简单直线

绘制折线

二阶贝塞尔曲线

三阶贝塞尔曲线

实例演示

import 'dart:ui';
import 'package:flutter/material.dart';
CustomPaint graph;

class CustomViewPage extends StatefulWidget {

  final String type;
  CustomViewPage({this.type...

阅读全文...

Flutter CircleProgressBarPainter


简介

操作图形的界面

基本用法

  • canvas + Animation 实现一个 loading 效果

实例演示

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

class CustomViewPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => CustomViewPageState();
}

class CustomViewPageState exte...

阅读全文...

Flutter Canvas


简介

用于操作图形的界面

  • canvas 对象用于创建图片对象,这些对象本身可以与 SceneBuilder 一起用于构建场景;

基本用法

  • 以下是绘制点,线,面的基本用法

绘制点

  • 绘制点有三种模式, points(点),lines(线,隔点连接),polygon(线,相邻连接)

绘制直线

绘制圆

绘制椭圆

  • 使用左上和右下角坐标来确定矩形的大小和位置,椭圆是在这个矩形之中内切的形状

绘制圆弧

  • Rect 来确认圆弧的位置,还需要开始的弧度、结束的弧度、是否使用中心点绘制、以及 paint 弧度

绘制矩形,圆角矩形

  • 用 Rect构建矩形
  • 根据上面的矩形,构建一个圆角矩形
...

阅读全文...

Flutter ImageIcon


简介

来自ImageProvider的图标,例如AssetImage。

  • 图标由其名称标示

基本用法

  • 创建图像图标,在size和color默认为当前给定的值IconTheme
  • 当你用一个图片时,这个图片会被填充你设置的颜色,只保留图片的形状,
  • 即填充图片像素所在的所有位置

实例演示

import 'package:flutter/material.dart';

class ImageIconDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    //...

阅读全文...

Flutter IconThemeData


简介

IconThemeData为图标提供属性,必须是Icon的父级

  • 图标主题Icon和ImageIcon的依赖,获取当前主题,是用IconTheme.of

基本用法

  • 部分widget无法管理大小,IconThemeData的size属性失效。
  • 通过opacity属性,修改widget透明度,如下图

实例演示

import 'package:flutter/material.dart';

class IconThemeDemo extends StatelessWidget {
  final Color curColor;
  final double cur...

阅读全文...

Flutter IconTheme


简介

用于应用栏图标的颜色,不透明度和大小。

  • 图标主题Icon和ImageIcon的依赖

基本用法

  • 通常,这与backgroundColor,brightness,textTheme一起设置。默认为ThemeData.primaryIconTheme。

实例演示

import 'package:flutter/material.dart';

class IconThemeDemo extends StatelessWidget {
  final Color curColor;

  IconThemeDemo({Key key, this.curColor})...

阅读全文...

Flutter IconData


简介

字体表示符合表示的图标说明

  • 可参考图标

基本用法

  • 多用于图标的使用选择
  • 可对图标设置大小, 颜色, 标签等

实例演示

import 'package:flutter/material.dart';

class IconDataDemo extends StatelessWidget {
  final Color curColor;

  IconDataDemo({Key key, this.curColor}) : super();

  @override
  Widget build(BuildContext context) {
    retu...

阅读全文...

Flutter Icon


简介

使用IconData中描述的字体( 例如素材中预定义的IconDatas) 中的字形绘制的图形图标。

  • 该图标不是交互示, 只是展示图标样式。 如果对于有交互要求, 可以使用IconButton

基本用法

  • 多用于图标的使用选择
  • 可对图标设置大小, 颜色, 标签等

实例演示

import 'package:flutter/material.dart';

class IconDemo extends StatelessWidget {
  final Color curColor;

  IconDemo({Key key, this.curColor}) :...

阅读全文...

Flutter RawImage


简介

一个直接显示dart:ui.Image的widget

基本用法

RawIamge很少使用,推荐使用Image

  • RawImage 是通过 paintImage 绘制出来的Image。这个方法更加详细的描述了各个字段的含义
  • 传递给RawImage中的Image是dart:ui下的Image而不是Material下的Image,见Demo注释

高级用法

关于更多详细介绍,请看paintImage的属性说明

实例演示

import 'dart:async';

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

阅读全文...