智玲君

1，首先下载安装jdk下载地址：点击安装完成后，通过访达前往/Library/Java/JavaVirtualMachines，可看到jdk的安装位置，其中Contents下的Home文件夹，是该JDK的根目录。例如：jdk的真实主目录如下：/Library/Java/JavaVirtualMachines/jdk1.8.0_211.jdk/Contents/Home配置jdk环境，如果你是，可以(如果你是为编辑已存在的配置文件，则使用"open -e .bash_profile"命令)，打开终端，

有想做海外市场的同学们，可能需要用到firebase。今天我们讲讲怎么使用「FlutterFireCLI」添加firebase以及如何设置「flavors」

前言Provider是一个由社区构建的状态管理包，而不是Google推出，但Provider是Google极力推荐的状态管理方式之一，它是对InheritedWidget组件进行了封装，使其更易用，更易复用，如果你使用过Bloc，会发现两者非常的相似，会很容易上手，而 GetX 相比这两者就显得比较特殊了。Provider的基本使用【简单计数器案例】1，添加依赖provider: ^6.0.12，定义需要共享的数据我们这里创建了一个类CountNotifier继承了ChangeNotifier

经过之前几篇的了解，我们可以快速实现国际化功能：借助VSCode的flutter_Intl插件：在VSCode中搜索安装如上所说的插件，安装完成后在命令面板输入Intl就会看到该插件下对应的一些命令。1，在 pubspec.yaml 中添加依赖：flutter_localizations: sdk: flutter2，使用插件初始化项目上面依赖添加完成后，再在命令面板输入Intl，选择初始化命令Initialize，等待命令执行完成，会自动在lib目录下生成两个文件夹，并默认添加英文语言

Android Flutter AndroidX incompatibilities报错处理报错信息：The Gradle failure may have been because of AndroidX incompatibilities in this Flutter app原因：AndroidX 不兼容AndroidX是对最初的Android Support Library的重大改进。它提供androidx.*包库，从平台API中分离出来。这意味着它提供了向后兼容性，并且比Android平台更

前言在h5中通过URl Scheme唤醒app的配置有如下三种：1，iframe标签不管是ios还是安卓，浏览器都不可能知道手机有没有装某个app，所以方法是首先通过URL scheme打开app，如果打不开，则跳转下载链接。之所以要用iframe打开，而不是直接跳链接，是因为如果APP唤醒失败，或者APP未安装的话，很多时候都会跳到错误页，影响用户体验。而iframe方法不会引起页面可见的变化（例如页面内容变成一个新页面），不会导致浏览器历史记录的变化。iframe方案的唤起原理是: 程序切换到

前言主题切换和多语言切换作为app的扩展功能也是很重要的，在目前市面上绝大多数的app中也都包含了这些功能，因此我觉得非常有必要掌握其实现的方式以及原理，网上也有很多相关的教程和实例，但是都讲的不是很完整或者不全面，因此本篇文章旨在通过通俗的表述来详细讲解flutter中如何实现主题切换和多语言切换的功能，相信看完你一定会有所收获。开始实现首先我们需要知道在app中实现类似于主题切换和多语言切换这样的功能，两者中任意一项配置的切换更改，影响的不单单是app中的某一个页面，而是app中所有需要改变颜色和

前言随着Flutter 2.0版本的发布，Web端开发也正式被支持了，然后你迫不及待的将自己的flutter版本升级到了2.0，就是想体验一下flutter在web方面的使用，然而却发现之前使用2.0之前版本创建的应用程序打开确是一片报错，因为其中用到的很多插件并未升级到支持最新的空安全特性，然后无奈又花费大量时间去下载之前的一点几版本，这才正常编译，但是当下次我们又想继续使用flutter开发web项目时，又不得不卸载已安装的版本再去花费大量时间下载2.0版本，网好一点倒是也能接受，网不好的话，过程也是

前言如果您的项目是在1.12版本之前创建的，则这可能适用于您的项目。我们知道从1.12版本开始为了更好地支持将flutter添加到现有项目的执行环境，现已弃用io.fltter.app.FlutterActivity所处的flutter运行时的旧Android平台端包装器及其关联的类。Io.fltter.embedding.android.FlutterActivity和相关类中的新包装器现在取代了它们。这些类更好地支持实际场景，在这些场景中，FlutterActivity不再是应用程序中的第一个且唯

Android端1，新建一个flutter项目，修改包名为真实的项目包名，修改包名采用全局搜索替换即可，替换完了记得还要修改下MainActivity所在的目录层级，默认还是老的包名目录结构，修改成新的，删除老的。2，在android目录下的app目录下放置签名文件jks，并且在app的build.gradle文件中新增签名的相关配置，示例如下：android { compileSdkVersion 29 // 1，添加签名配置（建议写到最前面） signingConfigs

前言可滚动列表在上下滑动时，标题栏透明度渐变也是一种比较常见的交互，实现起来虽然比较简单，但是，看网上很多例子都是直接在StatefulWidget的initState方法中通过监听直接获取滑动距离然后调用setState的方式实现的，这样有个很大的问题，就是列表在滑动过程中会频繁的触发setState，导致除标题外的列表也跟着频繁刷新，因此提供一种使用GlobalKey来实现局部刷新的方式来更合理的处理标题栏的渐变效果的方案，当然关于局部刷新的解决方案还是比较多的，大家也可以试下其他方式，那么问题来了：

前言网络请求作为应用中必不可少的功能，是必须掌握的，在app中我们可能会书写大量的网络请求的操作，为了书写和维护方面的考虑，我们一般都会对网络请求进行封装，但是目前网上很多关于dio网络请求封装的示例个人感觉不是很清晰，比较难理解，因此专门自己重新封装了下，针对一些疑问在下面也做了详细注释，使用起来也很方便。支持：1，支持常用的网络请求GET,POST,PUT,DELETE等2，统一的异常捕获，支持网络异常监听3，支持get无参与两种有参的情况4，支持post请求FormData表单提交以及普通

前言轮播图几乎是app中必不可少的功能，本篇文章将借助flutter_swiper实现轮播图效果，并处理图片适配，占位图加载，自定义指示器样式等的Banner切换效果。扩展：Banner轮播不仅仅只是可以展示图片，里面可以是任意的Widget布局，例如应用中的引导页就可以使用该插件来实现。使用到的插件：flutter_swiper: 1.1.6cached_network_image: 2.5.1效果图调用：Container( child: Column( children

前言应用在运行过程中，可能需要依赖以及读取某些特定的配置数据，比如是否是debug模式，当前的渠道设置等外部变量，这些变量可能经常需要在部署之间进行频繁更改，本文将介绍如何通过使用flutter_dotenv插件对这些变量进行统一管理，以及插件在使用过程中容易遇到的一些问题，以此来实现当变量发生变化时，无需更改任何代码的需求。flutter_dotenv：在运行时从可在整个应用程序中使用的.env文件加载配置，使用起来也比较简单，下面我们一起来看下具体的使用。使用步骤1,添加依赖:flutter_

前言CustomScrollView是Flutter系统提供的一个用于将多个组件进行组合从而实现统一的滑动效果的控件，并且在使用时要求CustomScrollView中的组件必须是Sliver家族中的成员，Sliver家族成员列举部分如下：1，SliverAppbar2，SliverList3，SliverGrid4，SliverToBoxAdapter5，SliverFillRemaining借助CustomScrollView可轻松实现折叠，置顶等交互，在平时的开发中也算是比较实用的控件，

flutter_slider_drawer: 1.2.1使用示例：import 'package:flutter/material.dart';import 'package:flutter_example/pages/main_drawer_page.dart';import 'package:flutter_example/pages/main_screen_page.dart';import 'package:flutter_slider_drawer/flutter_slider_dra

前言InheritedWidget是Flutter中一个非常重要的功能型Widget，它可以高效快捷的实现共享数据的跨组件传递，并且InheritedWidget在组件树中的数据传递方向始终是从上到下的，这和Notification的传递方向正好相反（Notification讲解详见对应的专题篇），在flutter中我们经常能够看到InheritedWidget式传递的使用场景，比如下面：Theme.of(context).primaryColor; // 获取主题色MediaQuery.of(con

EventbuSNotification冒泡原理：https://juejin.cn/post/6844903945786114061

import 'dart:convert';import 'dart:math';import 'package:flutter/material.dart';import 'package:flutter/services.dart';import 'package:sqflite/sqflite.dart';class MainPage extends StatefulWidget { @override _MainPageState createState() => _Ma

前言在一款app的开发中，或多或少都离不开要加载H5页面，例如隐私政策，服务协议等页面的加载，或是HTML类型的富文本数据的显示，并且当富文本之中存在超链接的时候，默认情况下点击会跳转打开对应的外部网页，但有时我们并不想在用户点击时显示超链接对应的web页面，而是拦截跳转，打开app内指定的某个页面，又或者是app中新推出一项活动时，先跳转到某个活动的H5页面，然后当用户在H5页面点击了某个按钮后，又打开app内的某个页面，即涉及到H5和Flutter之间的交互，基于以上这些常见的需求，本篇文章将系统的讲

前言推送功能是很多app中必不可少的功能，一般对于国内的app而言，推送功能用的最多的可能就是极光了，当然也有友盟等其他一些平台的推送，但好像对Flutter的支持不是那么友好，如果做海外app，安卓端我们推荐使用官方的FCM，而在IOS端对应的官方推送则简称为APNs，在flutter中如果我们使用google官方推送插件firebase_messaging，默认也是支持IOS的。我当时遇到的问题是：国内flutter应用推送使用的是极光，有两个问题：1，在安卓上默认极光的官方插件内集成SDK的方式

前言案例：在界面上Column里面依次显示两个StlessContainer，颜色分别为红色和蓝色，然后我们点击按钮调换两个Container的顺序，运行之后发现两个Container顺序确实变化了，然后我们将StlessContainer改成StfulContainer，颜色依然定义在外层的widget中，并在state中新增一个变量count，默认值为0，并给Container添加点击事件，每次点击一次，变量count的值加1，将两个container的颜色分别设置成红色和蓝色，然后点击让红色的cou

前言做过Android原生开发的同学都知道，在安卓原生开发中有主线程（也叫UI线程）和工作线程的概念，诸如像网络请求、IO操作等的耗时操作，为了避免产生ANR(应用程序无响应)我们都会放到单独创建的工作线程中去处理，这样一来负责UI渲染的主线程的运行就不受影响了，用户看到的界面也就不会有任何的卡顿挂起了，另一方面Android原生中系统要求所有UI的更新是必须在主线程中完成的，因此如果工作线程中的某个操作需要更新UI界面，我们必须通知给主线程去完成，一旦直接在工作线程中去更新UI则会报异常，因此在Andr

前言Flutter中的路由通俗的讲就是页面跳转，通过Navigator组件管理路由导航，并提供了管理堆栈的方法，如：Navigator.push（跳转） 和 Navigator.pop（返回）。flutter给我们提供了两种配置路由跳转的方式：1，普通路由2，命名路由（主要用于大型项目中路由的统一管理）普通路由的使用跳转的核心代码如下：push & pushNamed1，对比发现：命名路由在方法名称上比普通路由名称多了…Named。2，Navigator.xxx(context,…

前言显示动画是需要我们手动控制的动画，AnimationController对象是我们控制显示动画的必不可少的控制器，跟全自动的隐式动画不同，显示动画可以实现组件属性的周期性变化，并且可以在任一中间时刻控制动画的暂停和切换，而隐式动画则更像是强制性的完成一次属性变化，例如透明度从0到1的变化，旋转角度，字体大小等的变化，我们无法在变化过程中对其进行控制，相比之下，显示动画就显得灵活很多，我们可以随时对动画进行控制，并且可以实现循环的，交错的变化效果。跟隐式动画都是以Anminated..开头一样，Flu

前言隐式动画简单来说就是用 setState 就能呼唤出来的动画。对于实现了隐式动画的组件，只要Widget被更新，那么一个过渡动画就会自动产生并且播放。Flutter已经内置了很多已经实现了隐式动画的组件，这些组件大多数以Anminated..开头，例如：AnimatedSwitcher，AnimatedContainer，AnimatedAlign，AnimatedPositioned，AnimatedOpacity，AnimatedPadding等，当我们在使用setState改变这些组件的参数的

前言在Dart中Stream 也是用于接收异步事件数据，和Future 不同的是，它可以接收多个异步操作的结果，它常用于会多次读取数据的异步任务场景，如网络内容下载、文件读写等。即Future可以给我们一个值，但Stream会给我们多个值。Stream如何监听Stream监听数据流的两种方式：1，stream.listen2，StreamBuilder比如：每隔1秒钟后返回一个数字：final future = Future.delayed(Duration(seconds:1), ()=

FutureFuture< String > 意为以后会返回一个String类型的结果，如常见的网络请求有如下的写法：http.get('http://www.baidu.com') .then((value){ // 正常返回结果 }).catchError((error){ // 获取异常结果 });Future的三种状态：等待中（未完成,await），，已完成（.then），，异常（未完成 .catchError）自己创建一个Future类型的事件

Bloc介绍状态管理是声明式编程中一个永恒的话题，也是声明式编程（Flutter、Vue、React等）和命令式编程（Android或IOS原生）的区别，也是原生开发向Flutter开发转变过程中必须学习的内容。BLoC是谷歌提出的一种设计模式，是Business Logic Component的英文缩写，中文译为业务逻辑组件，是一种使用响应式编程来构建应用的方式，设计的初衷是为了实现页面视图UI与业务逻辑处理的分离。Bloc 的复杂度处于 Provider 和 Redux 之间，相较于 Provid

import 'package:flutter_screenutil/flutter_screenutil.dart';class ScreenAdaper { static init(context) { /// 设计稿 --- 宽/高 ScreenUtil.init( context, width: 720, height: 1280, allowFontScaling: true, // 设置文字大小是否随着系统的文字缩放比例变

理解1.用户通过手机浏览器点击带有referrer的Url(如https://play.google.com/store/apps/details?id=com.xxx.xxx&referrer=test) （正常此网页下方在Play商店打开）2.Google Play会记录附带的参数，(Finsky: [1] ifa.run(26): Capture referrer for com.xxx.xxx)3.待用户下载安装之后,用户首次安装打开App时，Google Play将参数广播到App(

画布是一个矩形区域，我们可以控制其每一像素来绘制我们想要的内容canvas 拥有多种绘制点、线、路径、矩形、圆形、以及添加图像的方法，结合这些方法我们可以绘制出千变万化的画面。虽然，画布可以画这些东西，但是决定这些图形颜色、粗细表现的还是画笔。//包含了常规图形（具体参数不做介绍）drawLine | 画线 drawPoint | 画点 drawPath | 画路径 drawImage | 画图像 drawRect | 画矩形 drawCircle | 画圆 drawOv

前言首页底部菜单切换几乎是所有app都必须实现的功能，目前网上针对该功能的实现方式基本大同小异，并且细节之处讲的都不是很清楚，本篇将使用两种不同的方式来更优雅的实现该功能，相信看完你肯定会有所收获。方式1： bottomNavigationBar + IndexedStack1，类似于安卓里面Activity+多个fragment的方式，通过控制各个fragment的显示和隐藏来显示不同Tab对应的页面，保证每个页面只builder一次。2，该方式不支持左右滑动切换，如需实现滑动切换，见方式2（也推

1，ClipRect 矩形裁剪（结合Align快捷实现按区域裁剪）构造方法下：const ClipRect({ Key key, this.clipper, // 定义裁剪规则，如果不指定，则裁剪区域为 child 指定的大小，即无任何裁剪效果 this.clipBehavior = Clip.hardEdge, // 裁剪方式，默认为 hardEdge Widget child })clipBehavior参数对应的裁剪方式有以下四种：none：不裁剪ha

方式一：借助系统提供的RefreshIndicator组件构造方法如下：const RefreshIndicator({ Key key, @required this.child, this.displacement = 40.0, // 下拉距离 @required this.onRefresh, // 刷新回调方法，返回类型必须为Future th......

Tabbar属性介绍：const TabBar({ Key key, @required this.tabs,//必须实现的，设置需要展示的tabs，最少需要两个 this.controller, this.isScrollable = false,//是否需要滚动，true为需要 this.indicatorColor,//选中下划线的颜色 this.indicatorWeight = 2.0,//选中下划线的高度，值越大高度越高，默认为2 thi

loading_dialog.dart:继承自系统Dialog（系统dialog继承自StatelessWidget）import 'package:flutter/material.dart';class LoadingDialog extends Dialog { final String text; LoadingDialog({Key key, @required this.text}) : super(key: key); @override Widget build(B

1，权限请求widget封装如下：引用插件：permission_handler，别忘了在android和ios目录下的清单文件中分别声明权限。class PermissionRequestWidget extends StatefulWidget { final Permission permission; final List<String> permissionList; // 各种状态下的权限的说明文案集合 final bool isCloseApp; //是否关闭app

import 'package:flutter/material.dart';import 'package:cached_network_image/cached_network_image.dart';class CacheImageWidget extends StatelessWidget { /// 图片链接 final String imageUrl; final double width; final double height; final BoxFit boxFi

scroll_to_index: ^1.0.1import 'dart:math' as math;import 'package:flutter/material.dart';import 'package:scroll_to_index/scroll_to_index.dart';/// 滑动到指定位置///class ScrollToIndexDemoPage extend...