添加 ButtonBarTheme、CupertinoDialogAction、PerformanceOverlay、RawImage、TooltipTheme

This commit is contained in:
toly
2020-08-11 21:09:48 +08:00
parent 433664c27a
commit b32595ac9f
16 changed files with 631 additions and 3 deletions

Binary file not shown.

View File

@@ -0,0 +1,22 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 312 PerformanceOverlay 性能浮层 6 可以非常方便地开启性能监测的两个柱图,方便查看刷新界面时帧率的变化情况。
// {
// "widgetId": 312,
// "name": "PerformanceOverlay基本使用",
// "priority": 1,
// "subtitle": "使用PerformanceOverlay.allEnabled可以开始所有的监测项。",
// }
class PerformanceOverlayDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return PerformanceOverlay.allEnabled(
);
}
}

View File

@@ -0,0 +1,100 @@
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 313 RawImage 6 是实现Image组件的核心组件可以显示ui的Image,基本属性同Image,一般很少单独使用。
// {
// "widgetId": 313,
// "name": "RawImage基本使用",
// "priority": 1,
// "subtitle": "【image】 : 图片 【ui.Image】\n"
// "【width】 : 宽 【int】\n"
// "【height】: 高 【int】\n"
// "【isAntiAlias】: 是否抗锯齿 【bool】\n"
// "【filterQuality】: 过滤质量 【FilterQuality】\n"
// "很多属性同Image,详见之.",
// }
class RawImageDemo extends StatefulWidget {
@override
_RawImageDemoState createState() => _RawImageDemoState();
}
class _RawImageDemoState extends State<RawImageDemo> {
ui.Image _image;
@override
void initState() {
super.initState();
_loadImageFromAssets('assets/images/icon_head.png');
}
@override
Widget build(BuildContext context) {
if (_image == null)
return Container(
width: 80,
height: 80,
);
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Column(
mainAxisSize: MainAxisSize.min,
children: [
RawImage(
image: _image,
width: 150,
height: 150,
isAntiAlias: true,
filterQuality: FilterQuality.high,
),
Text('isAntiAlias: true'),
Text('FilterQuality.high')
],
),
Column(
mainAxisSize: MainAxisSize.min,
children: [
RawImage(
image: _image,
width: 150,
height: 150,
isAntiAlias: false,
),
Text('isAntiAlias: false'),
Text('FilterQuality.low')
],
),
],
);
}
void _loadImageFromAssets(String name) async {
_image = await loadImageByProvider(AssetImage(name));
setState(() {});
}
//通过ImageProvider读取Image
Future<ui.Image> loadImageByProvider(
ImageProvider provider, {
ImageConfiguration config = ImageConfiguration.empty,
}) async {
Completer<ui.Image> completer = Completer<ui.Image>(); //完成的回调
ImageStreamListener listener;
ImageStream stream = provider.resolve(config); //获取图片流
listener = ImageStreamListener((ImageInfo frame, bool sync) {
//监听
final ui.Image image = frame.image;
completer.complete(image); //完成
stream.removeListener(listener); //移除监听
});
stream.addListener(listener); //添加监听
return completer.future; //返回
}
}

View File

@@ -0,0 +1,46 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 338 ButtonBarTheme 5 主要用于为后代的ButtonBar组件统一设置默认属性,也可以通过该组件获取默认ButtonBarTheme的属性。
// {
// "widgetId": 338,
// "name": "ButtonBarTheme基本使用",
// "priority": 1,
// "subtitle": "可指定ButtonBarThemeData数据属性为【后代】的ButtonBar组件设置默认样式如对齐方式、样式、边距等。也可以用ButtonBarTheme.of获取ButtonBar的主题属性。",
// }
class ButtonBarThemeDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ButtonBarTheme(
child: TempButtonBar(),
data: ButtonBarTheme.of(context).copyWith(
alignment: MainAxisAlignment.center,
buttonPadding: EdgeInsets.symmetric(horizontal: 6),
overflowDirection: VerticalDirection.up,
buttonMinWidth: 150,
buttonHeight: 30,
buttonTextTheme: ButtonTextTheme.primary));
}
}
class TempButtonBar extends StatelessWidget {
@override
Widget build(BuildContext context) {
return ButtonBar(
alignment: MainAxisAlignment.center,
children: <Widget>[
RaisedButton(
color: Colors.blue, child: Text("1.Raised"), onPressed: () {}),
OutlineButton(child: Text("2.Outline"), onPressed: () {}),
FlatButton(
color: Colors.blue,
onPressed: () {},
child: Text("3.Flat"),
)
],
);
}
}

View File

@@ -0,0 +1,51 @@
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 333 TooltipTheme 5 主要用于为后代的Tooltip组件统一设置默认属性,也可以通过该组件获取默认TooltipTheme的属性。
// {
// "widgetId": 333,
// "name": "TooltipTheme基本使用",
// "priority": 1,
// "subtitle": "可指定TooltipThemeData数据属性为【后代】的Tooltip组件设置默认样式如装饰、文字样式、显示时长、边距等。也可以用TooltipTheme.of获取Tooltip的主题属性。",
// }
class TooltipThemeDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return TooltipTheme(
child: TempTooltip(),
data: TooltipTheme.of(context).copyWith(
preferBelow: false,
padding: EdgeInsets.all(5),
verticalOffset: 20,
margin: EdgeInsets.all(2),
textStyle: TextStyle(
color: Colors.red,
shadows: [Shadow(color: Colors.white, offset: Offset(1, 1))]),
decoration: BoxDecoration(boxShadow: [
BoxShadow(
color: Colors.orangeAccent,
offset: Offset(1, 1),
blurRadius: 8)
])));
}
}
class TempTooltip extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Tooltip(
message: "天王盖地虎",
child: Icon(Icons.info_outline)),
Tooltip(
message: "宝塔镇河妖",
child: Icon(Icons.info_outline)),
],
);
}
}

View File

@@ -0,0 +1,26 @@
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明:
import 'package:flutter/material.dart';
import 'node1_base.dart';
import 'node2_save.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: Scaffold(
appBar: AppBar(),
body: Center(child: RepaintBoundarySave()),
));
}
}

View File

@@ -0,0 +1,182 @@
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 264 RepaintBoundary 重绘边界 为子组件创建一个单独的显示列表,提升性能。源码中在TextField、DrawerController、Scrollbar、Sliver等组件中均有应用。
// {
// "widgetId": 264,
// "name": "RepaintBoundary基本使用",
// "priority": 1,
// "subtitle": "【child】 : 子组件 【Widget】\n"
// "比如上面的绘制视图即使shouldRepaint为false,在滑动中会也会不断执行paint方法,使用RepaintBoundary可以避免不必要的绘制。",
// }
class RepaintBoundaryDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return RepaintBoundary(
child: TempPlayBezier3Page(),
);
}
}
class TempPlayBezier3Page extends StatefulWidget {
@override
_TempPlayBezier3PageState createState() => _TempPlayBezier3PageState();
}
class _TempPlayBezier3PageState extends State<TempPlayBezier3Page> {
List<Offset> _pos = <Offset>[];
int selectPos;
@override
void initState() {
_initPoints();
super.initState();
}
void _initPoints() {
_pos = List<Offset>();
_pos.add(Offset(0, 0));
_pos.add(Offset(60, -60));
_pos.add(Offset(-90, -90));
_pos.add(Offset(-120, -40));
}
@override
Widget build(BuildContext context) {
return Container(
height: 200,
width: MediaQuery.of(context).size.width,
child: CustomPaint(
painter: TempBezierPainter(pos: _pos, selectPos: selectPos),
),
);
}
}
class TempBezierPainter extends CustomPainter {
Paint _gridPaint;
Path _gridPath;
Paint _mainPaint;
Path _mainPath;
int selectPos;
Paint _helpPaint;
List<Offset> pos;
TempBezierPainter({this.pos, this.selectPos}) {
_gridPaint = Paint()..style = PaintingStyle.stroke;
_gridPath = Path();
_mainPaint = Paint()
..color = Colors.orange
..style = PaintingStyle.stroke
..strokeWidth = 2;
_mainPath = Path();
_helpPaint = Paint()
..color = Colors.purple
..style = PaintingStyle.stroke
..strokeWidth = 2
..strokeCap = StrokeCap.round;
}
@override
void paint(Canvas canvas, Size size) {
print('----------Paint-------');
canvas.clipRect(Offset.zero & size);
canvas.translate(size.width / 2, size.height / 2);
_drawGrid(canvas, size); //绘制格线
_drawAxis(canvas, size); //绘制轴线
_mainPath.moveTo(pos[0].dx, pos[0].dy);
_mainPath.cubicTo(
pos[1].dx, pos[1].dy, pos[2].dx, pos[2].dy, pos[3].dx, pos[3].dy);
canvas.drawPath(_mainPath, _mainPaint);
_drawHelp(canvas);
_drawSelectPos(canvas);
}
@override
bool shouldRepaint(CustomPainter oldDelegate) => false;
void _drawGrid(Canvas canvas, Size size) {
_gridPaint
..color = Colors.grey
..strokeWidth = 0.5;
_gridPath = _buildGridPath(_gridPath, size);
canvas.drawPath(_buildGridPath(_gridPath, size), _gridPaint);
canvas.save();
canvas.scale(1, -1); //沿x轴镜像
canvas.drawPath(_gridPath, _gridPaint);
canvas.restore();
canvas.save();
canvas.scale(-1, 1); //沿y轴镜像
canvas.drawPath(_gridPath, _gridPaint);
canvas.restore();
canvas.save();
canvas.scale(-1, -1); //沿原点镜像
canvas.drawPath(_gridPath, _gridPaint);
canvas.restore();
}
void _drawAxis(Canvas canvas, Size size) {
canvas.drawPoints(
PointMode.lines,
[
Offset(-size.width / 2, 0),
Offset(size.width / 2, 0),
Offset(0, -size.height / 2),
Offset(0, size.height / 2),
Offset(0, size.height / 2),
Offset(0 - 7.0, size.height / 2 - 10),
Offset(0, size.height / 2),
Offset(0 + 7.0, size.height / 2 - 10),
Offset(size.width / 2, 0),
Offset(size.width / 2 - 10, 7),
Offset(size.width / 2, 0),
Offset(size.width / 2 - 10, -7),
],
_gridPaint
..color = Colors.blue
..strokeWidth = 1.5);
}
Path _buildGridPath(Path path, Size size, {step = 20.0}) {
for (int i = 0; i < size.height / 2 / step; i++) {
path.moveTo(0, step * i);
path.relativeLineTo(size.width / 2, 0);
}
for (int i = 0; i < size.width / 2 / step; i++) {
path.moveTo(step * i, 0);
path.relativeLineTo(
0,
size.height / 2,
);
}
return path;
}
void _drawHelp(Canvas canvas) {
canvas.drawPoints(PointMode.lines, pos, _helpPaint..strokeWidth = 1);
canvas.drawPoints(PointMode.points, pos, _helpPaint..strokeWidth = 8);
}
void _drawSelectPos(Canvas canvas) {
if (selectPos == null) return;
canvas.drawCircle(
pos[selectPos],
10,
_helpPaint
..color = Colors.green
..strokeWidth = 2);
}
}

View File

@@ -0,0 +1,68 @@
import 'dart:io';
import 'dart:typed_data';
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:path_provider/path_provider.dart';
import 'dart:ui' as ui;
import 'node1_base.dart';
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明:
// {
// "widgetId": 264,
// "name": "保存Widget成为图片",
// "priority": 2,
// "subtitle": "通过RenderRepaintBoundary可以获取子组件的Image信息从而获取字节保存为图片文件。",
// }
class RepaintBoundarySave extends StatelessWidget {
final GlobalKey _globalKey = GlobalKey();
@override
Widget build(BuildContext context) {
return Stack(
children: [
RepaintBoundary(
key: _globalKey,
child: TempPlayBezier3Page(),
),
Positioned(right: -10, child: _buildButton3(context))
],
);
}
Widget _buildButton3(context) => MaterialButton(
child: Icon(
Icons.save_alt,
size: 15,
color: Colors.white,
),
color: Colors.green,
shape: CircleBorder(
side: BorderSide(width: 2.0, color: Color(0xFFFFDFDFDF)),
),
onPressed: () async {
var bits = await _widget2Image(_globalKey);
var dir = await getApplicationSupportDirectory();
var file = File(dir.path + "/save_img.png");
var f = await file.writeAsBytes(bits);
Scaffold.of(context).showSnackBar(SnackBar(
backgroundColor: Theme.of(context).primaryColor,
content: Text('保存成功后! 路径为:${f.path}'),
));
});
Future<Uint8List> _widget2Image(GlobalKey key) async {
RenderRepaintBoundary boundary = key.currentContext.findRenderObject();
//获得 ui.image
ui.Image img = await boundary.toImage();
//获取图片字节
var byteData = await img.toByteData(format: ui.ImageByteFormat.png);
Uint8List bits = byteData.buffer.asUint8List();
return bits;
}
}

View File

@@ -0,0 +1,44 @@
import 'dart:async';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'dart:ui' as ui;
/// create by 张风捷特烈 on 2020/7/22
/// contact me by email 1981462002@qq.com
/// 说明: 352 CupertinoDialogAction 0 一个简单的按钮通常用于CupertinoAlertDialog中一般不单独使用。
// {
// "widgetId": 352,
// "name": "CupertinoDialogAction基本使用",
// "priority": 1,
// "subtitle": "【isDefaultAction】 : 是否是默认性操作 【bool】\n"
// "【isDestructiveAction】 : 是否是毁灭性操作 【bool】\n"
// "【textStyle】: 文字样式 【TextStyle】\n"
// "【onPressed】: 点击事件 【VoidCallback】\n"
// "【child】: 子组件 【Widget】",
// }
class CupertinoDialogActionDemo extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Column(
children: [
CupertinoDialogAction(
isDestructiveAction: false,
onPressed: ()=>_toast(context),
child: Text('CupertinoDialogAction'),
),
CupertinoDialogAction(
isDestructiveAction: true,
onPressed: ()=>_toast(context),
child: Text('CupertinoDialogAction'),
),
],
);
}
_toast(BuildContext context){
Scaffold.of(context).showSnackBar(SnackBar(
backgroundColor: Theme.of(context).primaryColor,
content: Text('CupertinoDialogAction'),));
}
}

View File

@@ -6,4 +6,6 @@ library other_unit.dart;
export '../Other/ErrorWidget/node1_base.dart';
export '../Other/Table/node1_base.dart';
export '../Other/Table/node1_base.dart';
export '../Other/RawImage/node1_base.dart';
export '../Other/PerformanceOverlay/node1_base.dart';

View File

@@ -22,4 +22,6 @@ export '../ProxyWidget/ChipTheme/node1_base.dart' hide CustomFilterChip;
export '../ProxyWidget/ListTileTheme/node1_base.dart';
export '../ProxyWidget/MaterialBannerTheme/node1_base.dart';
export '../ProxyWidget/PopupMenuTheme/node1_base.dart';
export '../ProxyWidget/ToggleButtonsTheme/node1_base.dart';
export '../ProxyWidget/ToggleButtonsTheme/node1_base.dart';
export '../ProxyWidget/ButtonBarTheme/node1_base.dart';
export '../ProxyWidget/TooltipTheme/node1_base.dart';

View File

@@ -29,6 +29,8 @@ export '../SingleChildRenderObjectWidget/Align/node1_base.dart';
export '../SingleChildRenderObjectWidget/Align/node2_other.dart';
export '../SingleChildRenderObjectWidget/CustomSingleChildLayout/node1_base.dart';
export '../SingleChildRenderObjectWidget/CustomSingleChildLayout/node2_offset.dart';
export '../SingleChildRenderObjectWidget/RepaintBoundary/node1_base.dart';
export '../SingleChildRenderObjectWidget/RepaintBoundary/node2_save.dart';
export '../SingleChildRenderObjectWidget/ConstrainedBox/node1_base.dart';
export '../SingleChildRenderObjectWidget/FractionalTranslation/node1_base.dart';

View File

@@ -11,6 +11,7 @@ export '../StatelessWidget/PreferredSize/node1_base.dart';
export '../StatelessWidget/PreferredSize/node2_adapter.dart';
export '../StatelessWidget/Builder/node1_base.dart';
export '../StatelessWidget/NavigationToolbar/node1_base.dart';
export '../StatelessWidget/CupertinoDialogAction/node1_base.dart';
export '../StatelessWidget/CheckboxListTile/node1_base.dart';
export '../StatelessWidget/CheckboxListTile/node2_select.dart';

View File

@@ -103,10 +103,30 @@ class WidgetsMap {
return [
ToggleButtonsThemeDemo(),
];
case "PerformanceOverlay":
return [
PerformanceOverlayDemo(),
];
case "NavigationToolbar":
return [
NavigationToolbarDemo(),
];
case "CupertinoDialogAction":
return [
CupertinoDialogActionDemo(),
];
case "ButtonBarTheme":
return [
ButtonBarThemeDemo(),
];
case "RawImage":
return [
RawImageDemo(),
];
case "TooltipTheme":
return [
TooltipThemeDemo(),
];
case "CupertinoTextField":
return [
CupertinoTextFieldDemo(),
@@ -134,7 +154,7 @@ class WidgetsMap {
return [
CustomFadeInImage(),
];
case "InteractiveViewer":
case "InteractiveViewer":
return [
InteractiveViewerDemo(),
InteractiveViewerDemo2(),
@@ -149,6 +169,11 @@ class WidgetsMap {
CustomVisibility(),
ReplacementVisibility(),
];
case "RepaintBoundary":
return [
RepaintBoundaryDemo(),
RepaintBoundarySave(),
];
case "Chip":
return [
CustomChip(),

View File

@@ -99,6 +99,13 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.1.0"
file:
dependency: transitive
description:
name: file
url: "https://pub.flutter-io.cn"
source: hosted
version: "5.2.1"
flutter:
dependency: "direct main"
description: flutter
@@ -177,6 +184,41 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.7.0"
path_provider:
dependency: "direct main"
description:
name: path_provider
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.6.11"
path_provider_linux:
dependency: transitive
description:
name: path_provider_linux
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.0.1+2"
path_provider_macos:
dependency: transitive
description:
name: path_provider_macos
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.0.4+3"
path_provider_platform_interface:
dependency: transitive
description:
name: path_provider_platform_interface
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.0.2"
platform:
dependency: transitive
description:
name: platform
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.2.1"
plugin_platform_interface:
dependency: transitive
description:
@@ -184,6 +226,13 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "1.0.2"
process:
dependency: transitive
description:
name: process
url: "https://pub.flutter-io.cn"
source: hosted
version: "3.0.13"
provider:
dependency: transitive
description:
@@ -350,6 +399,13 @@ packages:
url: "https://pub.flutter-io.cn"
source: hosted
version: "2.0.8"
xdg_directories:
dependency: transitive
description:
name: xdg_directories
url: "https://pub.flutter-io.cn"
source: hosted
version: "0.1.0"
sdks:
dart: ">=2.9.0-14.0.dev <3.0.0"
flutter: ">=1.12.13+hotfix.5 <2.0.0"

View File

@@ -31,6 +31,7 @@ dependencies:
url_launcher: ^5.4.2 # url
share: ^0.6.3+6
intl: ^0.16.1
path_provider: ^1.6.11
connectivity: ^0.4.8+6 #网络状态
flutter_spinkit: ^4.1.2+1 #loading
dio: ^3.0.9 #dio