Shulou(Shulou.com)06/02 Report--

This article mainly explains "what is the method of Flutter building custom Widgets". The content of the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "what is the method of Flutter to build custom Widgets".

one。 Composite widget implementation

Comparison of 1.android and flutter custom controls

In Android, it is common to inherit View or an existing control, and then override the draw method to implement a custom View. In Flutter, a custom widget is usually implemented by combining other widget rather than inheritance. Let's take a look at how to build a CustomButton that holds a label. This is achieved by combining Text with RaisedButton, rather than inheriting RaisedButton and rewriting its rendering method implementation, eg: custombuttontest.dart

Import 'package:flutter/material.dart'; class CustomButtonTest extends StatelessWidget {final String textStr; CustomButtonTest (this.textStr); @ override Widget build (BuildContext context) {return RaisedButton (onPressed: () {}, child: Text (textStr, textAlign: TextAlign.center,);}}

Once the components are defined above, you can directly realize eg in the method that calls build:

@ override Widget build (BuildContext context) {return new Center (child: new CustomButton ("CustomButton"),);}} two. Implement widgets through custom CustomPainter

Introduction to the main properties of 1.CustomPainter, similar to the custom View in Android development, rendering in Flutter also depends on Canvas and Paint.

1). Canvas / / canvas, which provides developers with drawing methods such as point, line, rectangle, circle, nested rectangle, etc.

2). Paint / / brush, you can set anti-aliasing, brush color, thickness, fill mode and other attributes, painting can define multiple brushes to meet different painting needs. Eg:

Paint _ paint = new Paint ().. color = Colors.red / / Brush Color.. strokeCap = StrokeCap.round / / Brush Stroke types, including (1. Brush-Stroke start and end with semicircular outline; 2. Brush-Stroke start and end edges are flat with no extension 3. IsAntiAlias-the edges of the start and end of the stroke are flat, extending outward to half the width of the brush.). Style=PaintingStyle.fill = true / / whether to start anti-aliasing. Square / / painting style, default is fill There are two blendMode=BlendMode.exclusion / / color mixing modes, fill and stroke. ColorFilter = ColorFilter.mode (Colors.blueAccent, BlendMode.exclusion) / / color rendering mode. MaskFilter = MaskFilter.blur (BlurStyle.inner, 3.0) / / blur mask effect. FilterQuality = the quality of FilterQuality.high// color rendering mode.. strokeWidth = 15.0 / / the width of the brush

3). Offset / / coordinates, which can be used to represent the coordinate position of a point in the canvas.

4). Rect / / rectangle, in the drawing of graphics, it is generally drawn in sub-regions, this area is usually a rectangle, and Rect is usually used to store the location information of drawing.

5)。 Coordinate system / / in Flutter, the origin of the coordinate system (0J0) is located in the upper left corner, the X axis becomes larger to the right, and the Y axis becomes larger downward.

The main method in 2.painting.dart, eg:

Void drawRect (Rect rect, Paint paint) {.} / / draw a rectangle void drawLine (Offset p1, Offset p2, Paint paint) {.} / / draw a line void drawPoints (PointMode pointMode, List points, Paint paint) {.} / / draw a dot void drawCircle (Offset c, double radius, Paint paint) {.} / / draw a circle void drawArc (Rect rect, double startAngle, double sweepAngle, bool useCenter, Paint paint) {.} / / draw an arc three. The pie chart piechart.dart code shows import 'dart:math';import' package:flutter/material.dart'; class PieChartTest extends StatelessWidget {const PieChartTest ({Key? Key}): super (key: key); @ override Widget build (BuildContext context) {return Scaffold (appBar: AppBar (title: const Text ('pie chart'),), body:Container (alignment: Alignment.center, child: CustomPaint (size: const Size (300,300), painter: PieChartPainter (),) }} class PieChartPainter extends CustomPainter {Paint getColoredPaint (Color color) {Paint paint=Paint (); paint.color=color; return paint;} @ override void paint (Canvas canvas, Size size) {double wheelSize=min (size.width, size.height) / 2; double nbElem=8; double radius= (2*pi) / nbElem; Rect boundingRect=Rect.fromCircle (center: Offset (wheelSize,wheelSize), radius: wheelSize); canvas.drawArc (boundingRect, 0, radius, true, getColoredPaint (Colors.orange)) Canvas.drawArc (boundingRect, radius, radius, true, getColoredPaint (Colors.black)); canvas.drawArc (boundingRect, radius*2, radius, true, getColoredPaint (Colors.green)); canvas.drawArc (boundingRect, radius*3, radius, true, getColoredPaint (Colors.red)); canvas.drawArc (boundingRect, radius*4, radius, true, getColoredPaint (Colors.blue)); canvas.drawArc (boundingRect, radius*5, radius, true, getColoredPaint (Colors.yellow)) Canvas.drawArc (boundingRect, radius*6, radius, true, getColoredPaint (Colors.purple)); canvas.drawArc (boundingRect, radius*7, radius, true, getColoredPaint (Colors.white));} @ override bool shouldRepaint (covariant CustomPainter oldDelegate) = > oldDelegateothers;} four. Actual effect drawing, eg:

Attached: the method for the parent widget to call the child widget in Flutter

First, define globalKey, and note that it is the State class.

Final _ childWidgetKey = GlobalKey ()

Initialize the child widget on the parent page

ChildPage (key:_receiveKey)

3.

Class ChildPage extends StatefulWidget {undefinedChildPage ({Key key): super (key: key); @ overrideChildPageState createState () = > ChildPageState ();}

4. The method of calling child widget in the parent interface

_ childWidgetKey.currentState.onRefresh (): thank you for reading. The above is the content of "what is the method for Flutter to build a custom Widgets". After the study of this article, I believe you have a deeper understanding of what is the method for Flutter to build a custom Widgets, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.