老孟导读:此快捷方式适用于Mac下的 Android Studio .Windows 下的快捷方式请参考这篇文章:https://juejin.im/post/5efe71365188252e7d7fd0ca 快速创建一个新的Stateless or Stateful组件 创建新的 Stateless 组件,输入stless,回车: 创建新的 Stateful 组件,输入 stful,回车: 创建新的 动画组件,输入 stanim,回车: 还有其他的一些快捷方式,这里不一一介绍,这些快捷方式在

Flutter AppBar 自定义顶部按钮图 标.颜色 属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用 的 logo;在其他界面通常显示为返回按钮 title 标题,通常显示为当前界面的标题文字,可以放组 件 actions 通常使用 IconButton 来表示,可以放按钮组 bottom 通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor 导航背景颜色 iconTheme 图标样式 textTheme 文字样式 centerTi

效果: /**  * Flutter  BottomNavigationBar 自定义底部导航条.以及实现页面切换:  * BottomNavigationBar是底部导航条,可以让我们定义底部Tab切换,  * bottomNavigationBar是Scaffold组件的参数.  *BottomNavigationBar常见的属性:  items  List<BottomNavigationBaritem> 底部导航条按钮集合.  iconSize icon  currentIndex 默

方法1:GlobalKey import "package:flutter/material.dart"; class Test extends StatefulWidget { @override _TestState createState() => new _TestState(); } class _TestState extends State<Test> { final GlobalKey<ScaffoldState> _scaffoldKey

交流 老孟Flutter博客(330个控件用法+实战入门系列文章):http://laomengit.com 欢迎加入Flutter交流群(微信:laomengit).关注公众号[老孟Flutter]:

Flutter 目录结构介绍 文件夹 作用 android android 平台相关代码 ios ios 平台相关代码 lib flutter 相关代码,我们主要编写的代 码就在这个文件夹 test 用于存放测试代码 pubspec.yaml 配置文件,一般存放一些第三方库的依 赖. Flutter 入口文件.入口方法 每一个 flutter 项目的 lib 目录里面都有一个 main.dart 这个文件就是 flutter 的入口文件 main.dart 里面的 void main(){ ru

Flutter AppBar自定义顶部导航按钮图标.颜色以及TabBar定义顶部Tab切换. leading:在标题前面显示的一个控件,在首页通常显示应用的logo:在其他界面通常显示为付汇按钮. title:标题,通常显示为当前界面的标题文字,可以放组件 actions:通常使用IconButton来表示,可以放按钮组 bottom:通常放tabBar,标题下面显示一个Tab导航栏 backgroundColor:导航背景颜色 iconTheme:图标样式 textTheme:文字样式 cen

在 Flutter 中自定义 View 有两种方式: 组合已有控件 自定义绘制 如何自定义绘制 有两个类做这件事情: CustomPaint :会在绘制阶段提供一个 Canvas 画布 CustomPainter : 具体的画笔, 可配置画笔的颜色,路径等 CustomPaint( painter: Sky(), child: Center( child: Text( 'Once upon a time...', style: const TextStyle( fontSize: 40.0, f

前言 上篇关于Flutter的文章总结了下标签+导航的项目模式的搭建,具体的有需要的可以去看看Flutter分类的文章,这篇文章我们简单的总结一下关于Flutter本地文件引用以及简单的自定义List的使用,我们先总结本地图片的引用.今天这篇文章的具体的UI效果如下: 引用本地图片 我们没有使用到的我们暂时先不提,等后面慢慢补充进去,比如说网络图片的显示等等,我们现总结一下关于本地图片的使用,具体的我们需要下面几步: 1.创建文件导入资源 Flutter的文件资源需要我们创建一个文件去管理,我们

Flutter:一个移动应用开发框架,它使用 Dart.C++.Skia 开发,对外提供了完全不依赖系统平台的 Widget 的能力,只通过自绘图形的方式工作,具有极其优秀的跨平台性.目前已经支持了 iOS.Android.Fuchsia. macOS 下,安卓模拟器的进程名为:sdkqemu-system-i386,可在任务管理器强行关闭. 如果提示:Please configure Android SDK,需要将 ANDROID_HOME 环境变量设置为相应的 SDK 安装目录 构建UI界面

在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变.通俗的讲:如果我 们想改变页面中的数据的话这个时候就需要用到 StatefulWidget import 'package:flutter/material.dart'; void main() => run

一.Flutter AppBar 自定义顶部按钮图标.颜色 leading   在标题前面显示的一个控件,在首页通常显示应用的 logo:在其他界面通常显示为返回按钮 title  标题,通常显示为当前界面的标题文字,可以放组件 actions  通常使用 IconButton 来表示,可以放按钮组 bottom  通常放 tabBar,标题下面显示一个 Tab 导航栏 backgroundColor  导航背景颜色 iconTheme  图标样式 textTheme  文字样式 centerT

/** * Flutter StatefulWidget有状态组件.页面上绑定数据.改变页面数据 * 在Flutter中自定义组件其实就是一个类,这个类需要继承StatelessWidget/StatefulWidget * StatelessWidget是无状态组件,状态不可变得widget * StatefulWidget是有状态组件,持有的状态可能在widget生命周期改变.如果我们想 * 改变页面中的数据化的这个时候就需要用到StatefulWidget */ import 'packa

在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget: StatelessWidget 是无状态组件,状态不可变的 widget StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变.通俗的讲:如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget StatelessWidget中实现数据变化 在使用StatefulWidget前,先看一下在StatelessWid

一.Flutter 中自定义有状态组件 在 Flutter 中自定义组件其实就是一个类,这个类需要继承 StatelessWidget/StatefulWidget. StatelessWidget 是无状态组件,状态不可变的 widget StatefulWidget 是有状态组件,持有的状态可能在 widget 生命周期改变. 通俗的讲:如果我们想改变页面中的数据的话这个时候就需要用到 StatefulWidget 和  setState(() {})    class HomeCenter

1. 定义local_srorage.dart文件 使用Flutter第三方插件shared_preferences实现存储键值对信息 相关shared_preferences插件可参考: flutter 本地存储 (shared_preferences) import 'dart:convert'; import 'package:shared_preferences/shared_preferences.dart'; class LocalStorage { static Future ge

自定义路由翻转,渐变,左右滑动 方法如下: 首先继承 PageRouteBuilder ,重写方法 将MaterialPageRoute改为showSearch import 'package:flutter/material.dart'; class animation_route extends PageRouteBuilder { final Widget widget; animation_route(this.widget) : super( transitionDuration: c

一.组件分析 ui如下 根据UI分析我们需要提取哪些是动态的,可以通过传递参数得到不同的结果? 1.左侧icon 2.输入的文本 3.是否是密码框 4.输入框的控制器:如何时时得到输入框的值 二.快速创建自定义组件 vscode中使用快捷键stl快速生成一个无状态组件, class CreateMyInput extends StatelessWidget { @override Widget build(BuildContext context) { return Container( );

开始 在Android中我们要实现一个布局需要继承ViewGroup, 重写其中的onLayout和onMeasure方法. 其中onLayout负责给子控件设置布局区域, onMeaseure度量子控件大小和自身大小. 今天我们就研究下Flutter是如何实现布局的. Flutter布局 首先我们挑选一个Flutter控件去看源码, 我们就选Stack, 因为它足够简单. 从表象上讲它只要重叠摆放一组子控件即可. 先看下Stack的源码: class Stack extends MultiCh

App在很多情况下由于各种需求需要自定义标题栏,而在能够构建Android和IOS应用的Flutter中,如果不在Scaffold中使用AppBar会发现默认是沉浸式. 猜想:我们使用自定义标题栏好像需要知道状态栏的高度,我看到网上很多人想要自定义标题栏,却老是去找怎么获取状态栏的高度 解惑:其实并不用获取状态栏的高度,你想AppBar也是状态栏,它也需要知道状态栏的高度,它需要说明Flutter已经帮我们获取到了 接下来一步一步来看 一.怎么自定义标题栏 轻车熟路的就直接看第二步 自定义MAp

44.详细页_首屏自定义Widget编写 把详细页的图片.标题.编号和价格形成一个单独的widget去引用 详情页的顶部单独封装个插件 在pages下面新建detials_page的文件件并在里面新建页面details_top_area.dart文件 添加引用,然后声明一个静态的类 返回顶部图片的方法 商品名称方法: 商品编号方法 开始写Build 最外层是一个Provide,里面model类传递的是商品详情的类 在主页内引用子组件 首先引入我们写的组件的页面文件,然后调用我们写的组件的类就可以