Flutter Widget 之package mason实现详解

目录
  • 正文
  • 使用Mason砖块
    • 运行mason make

正文

Flutter有个悠久的传统,便是运行flutter create并删除所有内容,然后在所有标准样板文件(boilerplate)当中尽力复制和粘贴,这很费时又容易出错,而且比报税更无趣,但是是否别无他法?

进入Mason,这是用于欧快速组装新项目或功能的软件包,可以从成为“砖块”的自定义模版中生成代码,而这些模版根据你的项目的特定值呈现

使用Mason砖块

例如想象一下,你正为Flutter新项目使用Mason砖块的pubspec.yaml文件,非常舒适。

有了砖块,看起来就像这样

name: {{ project_name.snakeCasse() }}
dependencies:
    flutter:
        sdk: flutter
    {{#uses_firebase}}
    firebase_core: ^X.Y.Z
    cloud_firestore: ^X.Y.Z
    {{/uses_firebase}}

如果你使用的是Firebase,这将生成包含Firebase依赖项的pubspec.yaml文件

name: socksCatalog
dependencies:
    flutter:
        sdk: flutter
    firebase_core: ^X.Y.Z
    cloud_firestore: ^X.Y.Z

如果你不是使用Firebase,那些依赖项将会被跳过

name: socksCatalog
dependencies:
    flutter:
        sdk: flutter

但是Mason如何知道你的项目名称或你是否使用Firebase?

进入mason_cli 这与flutter_create相似

运行mason make

但因用了Mason及自定义的砖块而更灵活。安装好后,用砖块的名字运行mason make

dart pub global activate mason_cli
mason add --global <BRICK_NAME>
mason make <BRICK_NAME>

Mason会读取砖块的manifest文件并问你一些问题

这里需要知道你的项目名称,以及你是否使用Firebase

Mason_cli支持多种数据类型,包括字符串、布尔值、数字和枚举

如此的话,还有个问题,我们如何找到要使用的砖块名称?

为此,请浏览brickhub.dev并查看公开可用的砖块,世界各地的Flutter开发者已经上传它们自用的样板文件以帮你节省时间

如果没有找到自己喜欢的,请将自己喜欢的Flutter项目结构转为砖块上传以为将来所需节省时间。

顺带一提,砖块大小可任意调整并非只能整个项目

/{{ feature_name}}
   {{ feature_name }}_screen.dart
   {{ feature_name }}_state_management.dart

你是否发现每次开始一个新功能时都会创建相同的启动文件?这种情况也很适合使用砖块

/login
    login_screen.dart
    login_state_management.dart

利用Mason,你可比以往更快地编写应用程序中有趣的部分

如果想了解有关package:mason,或者关于Flutter的其他功能,请访问pub.dev

以上就是Flutter Widget 之package mason实现详解的详细内容,更多关于Flutter Widget package: mason的资料请关注我们其它相关文章!

(0)

相关推荐

  • Flutter Widgets MediaQuery控件屏幕信息适配

    目录 MediaQuery MediaQueryData 使用场景 根据尺寸构建不同的布局 系统字体变化 第三方屏幕的适配框架: 设置字体不随系统字体大小进行改变 APP全局 总结: MediaQuery 通常情况下,不会直接将MediaQuery当作一个控件,而是使用MediaQuery.of获取当前设备的信息,用法如下: var data = MediaQuery.of(context); 此方式必须放在MediaQuery作用域内,否则会抛出异常,MaterialApp和WidgetsAp

  • Flutter Widgets粘合剂CustomScrollView NestedScrollView滚动控件

    目录 概述: CustomScrollView 相互嵌套场景 NestedScrollView 滚动隐藏AppBar SliverAppBar展开折叠 与TabBar配合使用 总结: 概述: Flutter中常用的滑动布局 ScrollView 有 SingleChildScrollView.NestedScrollView.CustomScrollView. SingleChildScrollView 用来处理简单可滑动的页面布局视图,如一般的数据详情页面,当内容足够多时,一屏显示不下时,就需

  • Flutter开发Widgets 之 PageView使用示例

    目录 构造方法以及参数: 基本用法 无限滚动 实现指示器 切换动画 总结: 构造方法以及参数: PageView可用于Widget的整屏滑动切换,如当代常用的短视频APP中的上下滑动切换的功能,也可用于横向页面的切换,如APP第一次安装时的引导页面,也可用于开发轮播图功能. PageView({ Key? key, this.scrollDirection = Axis.horizontal, // 设置滚动方向 垂直 / 水平 this.reverse = false, // 反向滚动 Pag

  • Flutter Widget 之StatefulBuilder构建方法详解

    目录 正文 性能问题解决 正文 你曾否意识到你需要拆分一个大型的构建方法,但又觉得这听起来很费劲? 试试StatefulBuilder 以最小的代价获得一个个单独的小部件的所有性能 想象一下,这样的一个小部件,有一个可以切换单一标志的便宜的子部件,然后是一个昂贵的小部件. 除非绝对必要,否则你不会想要重建它 bool isExpanded = false; Widget build(context) { return Column( children: [ InexpendsiveStatefu

  • flutter InheritedWidget使用方法总结

    目录 引言 didChangeDependencies 如何使用? 结论 引言 InheritedWidget,flutter中非常重要的一个功能组件.比如我们在应用的根 widget 中通过InheritedWidget共享了一个数据,那么我们便可以在任意子 widget 中来获取该共享的数据. didChangeDependencies 说到 InheritedWidget ,我们不得不聊聊 state 对象中的 didChangeDependencies 方法.当子控件依赖使用了父控件中的

  • Flutter Widgets之标签类控件Chip详解

    目录 概述: RawChip Chip InputChip ChoiceChip FilterChip 总结: 概述: Flutter 标签类控件大全ChipFlutter内置了多个标签类控件,但本质上它们都是同一个控件,只不过是属性参数不同而已,在学习的过程中可以将其放在放在一起学习,方便记忆. RawChip Material风格标签控件,此控件是其他标签控件的基类,通常情况下,不会直接创建此控件,而是使用如下控件: Chip InputChip ChoiceChip FilterChip

  • Flutter Widget之FutureBuilder使用示例详解

    目录 正文 正文 本质上Flutter和Dart是异步的,Dart是Futures使你能够管理IO而不用担心线程或死锁. 例如,从应用程序外部加载数据需要时间,而Futures允许Dart先处理其他任务直到请求的数据可用. 但是涉及Future时,你如何构建Flutter小部件呢? 输入FutureBuilder,这是处理Futures的构造器 FutureBuilder( future: _data, builder: _myBuilderFunction, ) FutureBuilder让你

  • Flutter Widget 之FocusableActionDetector使用详解

    目录 Material按钮 GestureDetector自定义按钮 为按钮添加一些条件性的样式 Material按钮 Material按钮会很好 但我们知道它们不一定适合你的应用程序,所以你要自己编写.可悲的是,从头开始编写自己的空间可能是一项艰巨的工作. 桌面用户期待悬停高亮.焦点和键盘快捷键,这是很难做好的. GestureDetector自定义按钮 是这样的,你在你的应用程序中创建一个自定义的按钮, 使用GestureDetector,当你点击它的时候,按钮会做一些事情 GestureD

  • Flutter Widget 之package mason实现详解

    目录 正文 使用Mason砖块 运行mason make 正文 Flutter有个悠久的传统,便是运行flutter create并删除所有内容,然后在所有标准样板文件(boilerplate)当中尽力复制和粘贴,这很费时又容易出错,而且比报税更无趣,但是是否别无他法? 进入Mason,这是用于欧快速组装新项目或功能的软件包,可以从成为“砖块”的自定义模版中生成代码,而这些模版根据你的项目的特定值呈现 使用Mason砖块 例如想象一下,你正为Flutter新项目使用Mason砖块的pubspec

  • Flutter实现底部导航栏创建详解

    目录 添加依赖项 如何使用 功能 属性 主题 预览图 代码 Flutter web问题:Failed to load network image 我的解决办法 参考资料 ConvexBottomBar是一个底部导航栏组件,用于展现凸起的TAB效果,支持多种内置样式与动画交互.你可以在https://appbar.codemagic.app/上找到在线样例. 添加依赖项 在你的项目中去 pubspec.添加依赖项: 添加https://pub.dev/packages/convex_bottom_

  • Flutter绘图组件之CustomPaint使用详解

    目录 简介 CustomPaint介绍 CustomPainter示例 总结 简介 在有些场景中,我们会需要绘制一些高度定制化的组件,比如 UI 设计师给我们出了个难题 —— 弄一个奇形怪状的边框.看在 UI 设计师是一个漂亮小姐姐的份上,又不好意思说这个做不了(那样也很没面子).这个时候我们就不能直接使用 Flutter 自带的那些组件了,而是需要手动绘制组件,那就会需要用到 CuntomPaint 组件.CustomPaint 组件和前端的 Canvas差不多,允许我们在一个画布上绘制各种元

  • flutter自定义InheritedProvider实现状态管理详解

    目录 InheritedWidget简单数据驱动模型 1. 数据存储 2. 变更通知 3. 使用方法 InheritedWidget简单数据驱动模型 基于InheritedWidget,实现简单的数据驱动模型,模型结构如下: 1. 数据存储 使用 InheritedWidget,新建 InheritedProvider import 'package:flutter/material.dart'; class InheritedProvider<T> extends InheritedWidg

  • Android Flutter实现3D动画效果示例详解

    目录 前言 AnimatedWidget 简介 3D 旋转动画的实现 总结 前言 上一篇我们介绍了 Animation 和 AnimationController 的使用,这是最基本的动画构建类.但是,如果我们想构建一个可复用的动画组件,通过外部参数来控制其动画效果的时候,上一篇的方法就不太合适了.在 Flutter 中提供了 AnimatedWidget 组件用于构建可复用的动画组件.本篇我们用 AnimatedWidget 来实现组件的3D 旋转效果,如下图所示. AnimatedWidge

  • Flutter中数据库的使用教程详解

    在Flutter开发过程中,我门有时候需要对一些数据进行本地的持久化存储,使用sp文件形式虽然也能解决问题,但是有时数据量较大的时候,显然我们文件形式就不太合适了,这时候我们就需要使用数据库进行存储,我们知道在原生中有系统提供的轻量级sqlite数据库,在Flutter强大的生态环境中,也有这样一个数据库插件sqflite: ^2.0.2可以同时在Androud.iOS中进行数据库操作. 1. 创建数据库:这里我以存储我的搜索历史记录为例. 首先导入: import 'package:sqfli

  • Flutter实现不同缩放动画效果详解

    目录 需求背景 可缩放组件介绍 ScaleTransition SizeTransition AnimatedSize AnimatedBuilder 小结 需求背景 组件缩放可以向着一个方向进行缩放,放大列表中某一个Cell期望它是向后进行放大而非组件中心点开始缩放.具体效果如下图所示: 可缩放组件介绍 ScaleTransition ScaleTransition具体实现如下代码,设置AnimationController控制器若需要增加数值操作可以再增加Animate再调用forward方

  • Android Flutter表格组件Table的使用详解

    目录 Table.TabRow.TabCell 小结 之前开发中用到的表格,本篇文章主要介绍如何在页面中使用表格做一个记录. Table组件不同于其它Flex布局,它是直接继承的RenderObjectWidget的.相当于是一个独立的组件,区别与其他系列组件. Table.TabRow.TabCell 惯例,先看下Table相关的构造方法: Table({ Key? key, this.children = const <TableRow>[],//行列表 表示多少行 this.column

随机推荐