我的博客

flutter中widget主要分为 StatelessWidget 和 StatefulWidget 两种 二者生命周期不太一样。需要持有状态 State，这里面包含了一系列生命周期方法。pub.dev中opengle类库。三棵树，其中 Widget。Flutter中手势识别组件。

一 概述Config可以设置哪些内容如何进行Config设置Config设置示例二Config可以设置哪些内容2.1 Config的设置内容/// change default config of Getvoid config( { bool? enableLog, LogWriterCallback? logWriterCallback, bool? defaultPopGesture, bool? defaultOpaqueRoute,

一 概述GetXService使用说明利用GetXService改写网络API示例项目参考及示例代码二 GetXService2.1 使用说明GetXService用在runApp之前，用于启动App之前进行初始化工作可以分别定义APIService(网络)、DBService(数据库)、SharedPreferenceService(本地化存储)等在initServices中控制上述Service的执行顺序2.2 如何使用GetXService(APIService)clas

一 概述本文介绍在Flutter-getX中，获取视图的几种方式GetView：最常用，是个const Stateless Widget，GetView<Controller>绑定控制器后可直接使用GetResponsiveView：响应式视图，该视图包含screen属性，其中包含关于屏幕大小和类型的信息GetWidget：使用较少，不是个const Stateless视图，它缓存了一个控制器二 GetView示例2.1 GetView-Controller控制器(控制器内容相

一 概述StatefulWidget中，组件的值改变时，需要调用.setState用于更新新值，本文介绍GetX中的两个值改变器ValueBuilder：值构建器ObxValue：对象值二 几种值改变方式对比2.1 StatefulWidget中默认的值改变var _switchValue = false;Switch( value: _switchValue, onChanged: (value) { setState(() {

一 概述GetPage Middleware中间件介绍如何定义GetMiddlewareGetPage Middleware使用示例二 GetPage Middleware中间件介绍2.1 什么是Middleware中间件中间件是介于应用系统和系统软件之间的一类软件，它使用系统软件所提供的基础服务（功能），衔接网络上应用系统的各个部分或不同的应用，能够达到资源共享、功能共享的目的百度百科此处指：执行路由跳转前的页面，比如Get.to()跳转之前的那个页面2.2 GetPage Mi

一 概述GetX提供一种简便的网络请求方式：GetConnect该请求方式支持：Rest API的GET/POST/PUT/DELETE/SOCKET及websocket通信支持自定义配置：请求拦截，响应拦截，Authen认证等二 GetConnect快速入门2.1 添加getX依赖dependencies: get:2.2 定义Provider继承GetConnect，并实现网络方法class UserProvider extends GetConnect { //Get请

一 概述浅色主题深色主题二 getX中切换主题API2.1 当前是什么模式主题Get.isDarkMode2.2 改变当前主题设置为浅色主题Get.changeTheme(ThemeData.light());设置为深色主题Get.changeTheme(ThemeData.dark());放在一个onPressed中，根据Get.isDarkMode判断Get.changeTheme(Get.isDarkMode? ThemeData.light()

一 国际化效果图如下图所示，点击中文按钮显示中文；点击EN按钮显示英文，进行切换国际化中文国际化英文二 国际化步骤2.1 项目结构图说明本项目是在上文Flutter开发之——底部导航栏BottomNavigationBar的基础上进行修改，关于这方面的知识点，请查看上文，这里只对国际化的内容做如下说明：Main：入口文件配置string：Messages各种语言键值对中的键，方便复用和显示时引用Messages：国际化语言配置，根据需要配置中文/英文/其他

一 底部导航栏效果图模式首页关系图导航页关于我FixedShifting二 BottomNavigationBar详解2.1 BottomNavigationBar介绍BottomNavigationBar是Scaffold脚手架中的位于底部的一个组件BottomNavigationBar位于body的下方，属于底部导航栏BottomNavigationBar包含多个BottomNavigationBarItem，BottomNavigat

一 概述实例化依赖项的4种方法使用实例化后的依赖项Bindings绑定类二 实例化依赖项的4种方法本文介绍实例化依赖项的4种方式，分别是：Get.put、Get.lazyPut、Get.putAsync、Get.create2.1 方式一 Get.put使用方式S put<S>(S dependency, {String? tag, bool permanent = false, InstanceBuilderCa

一 用户登陆界面展示没有勾选同意用户名错误密码错误成功去登陆二 项目结构说明2.1 项目由来最近学习了getX的相关知识点，getX可以简化项目书写和项目解藕(逻辑和界面展示分离)看到CSDN-Flutter-登录界面实战，作为getX练手2.2 项目结构说明：Login：登陆界面，只负责与用户交互的界面内容展示LoginController：逻辑控制文件，负责处理，登陆按钮点击和隐私协议勾选三 项目示例说明3.1 LoginControl

一 概述在getX中，无需context上下文，便可使用SmallWidget小组件：SnackBars提示信息Dialog对话框BottomSheets底部弹窗二 SnackBars提示信息2.1 SnackBars属性信息编号属性说明1title标题2message内容3colorText文字颜色4duration显示时长5snackPosition显示位置(Top/Bottom)6icon图标7on

一 概述路由跳转(不使用named命名和使用named命名)路由跳转传值路由中间件Middleware路由嵌套导航二 路由跳转(不使用named命名和使用named命名)2.1 前提(GetMaterialApp取代MaterialApp)GetMaterialApp( // Before: MaterialApp( home: MyHome(),)说明：GetMaterialApp：GetX自带的MaterialApp，配置路由表，管理路由入栈、出栈等操作Materia

一 效果图LoadingSuccessEmptyError二 StateMixin2.1 概述Flutter中一种更新UI的方式是使用StateMixin，StateMixin是多种状态的混合因为Controller是负责处理数据和业务功能的，在Controller的后面使用with StateMixinStateMixin<T>中T是数据模型，比如User，StateMixin<User>当数据模型的数据改变时(如：空/完成/出错

一 概述状态管理说明未使用getX和使用getX状态管理区别反应式状态管理(GetX/Obx)简单状态管理(GetBuilder)二 状态管理说明2.1 状态百度百科：状态是人或事物表现出来的形态。是指现实（或虚拟）事物处于生成、生存、发展、消亡时期或各转化临界点时的形态或事物态势此处：指的是变量的值2.2 状态管理的方式其他状态管理器：Streams或者ChangeNotifier此处：反应式状态管理(GetX/Obx)和简单状态管理(GetBuilder)三 未使用

一 概述GetX是Flutter的一个快速开发框架，借助GetX可以极大提高Flutter的开发速度和效率，它支持：反应式状态管理OBS(之前通过setState设置)路由管理(之前通过Navigator跳转)依赖管理(设置过Get.put(Controller)可以获取到Controller实例化)实用工具箱(国际化、切换主题、网络连接设置、GetPage中间件、高级API、本地状态组件、状态混合、测试等)后续将分章节进行讲解，本文为GetX快速入门，让你对GetX有个了解二 GetX

一 概述Windows-desktop材料创建Windows-desktop过程visual studio 2019打开flutter-windows二 Windows-desktop材料开发电脑：Windows 10flutter：2.5.3Dart:2.14.4Visual Studio 2019Intellij三 创建Windows-desktop过程3.1 安装Visual Studio2019,并添加桌面开发环境在桌面应用和移动应用中勾选需要的开发程式：.NE

一 概述Intl是官方出品的，包含用于处理国际化/本地化消息，日期和数字格式和解析，双向文本以及其他国际话问题。pub地址：https://pub.dev/packages/intlGithub地址：https://github.com/dart-lang/intl二 插件安装(Intellij)Flutter Intl插件安装：依次点击：Intellij IDEA—>Preference—>Plugins—>Marketplace，搜索Flutter Intl

一 概述APP国际化简单示例APP国际化补充应用程序 title 国际化二 APP国际化简单示例2.1 添加依赖或导入包名import 'package:flutter/foundation.dart';2.2 MaterialApp.supportedLocales 中添加支持的语言MaterialApp( title: 'Flutter IntlApp', supportedLocales: [ const Locale('zh'), const Loca

一 概述Flutter创建EventChannel通道IOS端创建通信EventChannel通道在合适位置调用IOS通信EventChannel二 EventChannel通信示例2.1 Flutter创建EventChannel通道import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:flutter/services.dart';void m

一 概述创建Flutter端BasicMessageChannel创建IOS端BasicMessageChannel在合适的地方调用BasicMessageChannel二 BasicMessageChannel通信示例2.1 Flutter 端创建 MethodChannel 通道import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:flutter

一 概述创建Flutter端MethodChannel创建IOS端MethodChannel在合适的地方调用MethodChannel二 MethodChannel通信示例2.1 创建Flutter端MethodChannelimport 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:flutter/services.dart';void main()

一 概述Xcode开发环境介绍Intellij创建Flutter应用Flutter中嵌入IOS自定义ViewFlutter中嵌入IOS自定义View时设置初始化参数二 Xcode开发环境介绍Xcode：12.5.1CocoaPod：1.10.1(pod --version)Flutter：2.2.3Dart：2.13.4Intellij：Community 2021.1三 Intellij创建Flutter应用依次点击：File——>New——>Project

一 概述本文介绍从原生iOS启动Flutter的几种方式直接启动(不配置缓存 FlutterEngine和路由)Flutter使用缓存FlutterEngine启动Flutter使用路由方式启动Flutter二 直接启动(不配置缓存 FlutterEngine和路由)Flutter2.1 代码(ViewController)import UIKitimport Flutterclass ViewController: UIViewController { override

一 概述iOS开发环境介绍创建iOS原生项目创建Flutter module将Flutter嵌入到iOS应用程序中打开混合后的项目空间(MyApp.xcworkspace)原生页面跳转Flutter二 iOS开发环境介绍Xcode：12.5.1CocoaPod：1.10.1(pod --version)Flutter：2.2.3Dart：2.13.4三 创建iOS原生项目3.1 说明创建IOS2Flutter文件夹，稍后将iOS和flutter项目都放在此文件夹下3.

一 概述创建Flutter端EventChannel创建Android端EventChannel在合适的地方调用EventChannel二 EventChannel通信示例2.1 Flutter 端创建 EventChannel 通道void main() => runApp(EventChannelDemo());class EventChannelDemo extends StatefulWidget { @override _EventChannelDemoStat

一 概述创建Flutter端BasicMessageChannel创建Android端BasicMessageChannel在合适的地方调用BasicMessageChannel二 BasicMessageChannel通信示例2.1 Flutter 端创建 MethodChannel 通道代码void main() => runApp(BasicMessageChannelDemo());class BasicMessageChannelDemo extends Statef

一 概述Flutter创建MethodChannel通道Android端创建通信MethodChannel通道在合适位置调用Android通信MethodChannel二 MethodChannel通信示例2.1 Flutter创建MethodChannel通道代码void main() => runApp(MethodChannelDemo());class MethodChannelDemo extends StatefulWidget { @override _

一 概述Flutter与Native原生端通信有三种方法：MethodChannelBasicMessageChannelEventChannel二 三种通信方式介绍2.1 MethodChannelFlutter与Native端相互调用，调用后返回结果可以Native端主动调用，也可以Flutter主动调用，属于双向通信此种方式最为常见，Native端调用需要在主线程中执行2.2 BasicMessageChannel用于使用指定的编解码器对消息进行编码和解码属于双向通

一 AndroidView说明AndroidView是一个原生端自定义的View，继承自PlatformView混合开发中，自定义后的AndroidView，可以在flutter端使用AndroidView可以在原生端和Flutter之间传递数据二 自定义AndroidView2.1 原生项目添加FlutterModulesettings.gradlesetBinding(new Binding([gradle: this]))evaluate(new File( settings

一 概述Android原生开发中，Fragment可以作为Activity页面的一部分(Activity的一部分或者ViewPager的一个页面)Flutter可以作为FlutterFragment集成到原生页面中呈现二 FlutterFragment开发的一般步骤初始化Flutter路由设置Dart执行入口背景是否透明使用是否FlutterEngine或者带缓存的FlutterEngine三 界面布局(activity与Fragment的关系)3.1 界面(TextView+R

一 概述添加Flutter到Activity，又叫从Activity启动Flutter，本文主要讲述一下几种：默认启动FlutterActivity使用缓存的FlutterEngine启动FlutterActivity带有缓存引擎的初始路由启动FlutterActivity二 路由设置及启动原生启动Flutter可以分为：直接启动Flutter根界面(home)和启动路由界面2.1 直接启动启动方式startActivity(FlutterActivity.createDefault

一 概述Android Studio 向已有项目中添加Flutter模块注意事项原生代码启动Flutter模块二 运行环境和插件2.1 运行环境Android studio：4.2.2Java：1.8.0_241Flutter：2.2.3Dart：2.13.42.2 插件(安装Flutter时，Dart自动安装)三 Android Studio 向已有项目中添加Flutter模块3.1 创建原生项目打开IDE开发工具，选择创建一个项目选择Empty Acti

一 概述原生应用具有跨平台框架不具备的优势Flutter优秀的路由，动画，ui设计可以快速完成项目开发在已有的原生项目的基础上，导入Flutter，进行混合开发更具优势二 原生+Flutter混合开发限制每个应用一次只能集成一个Flutter实例到应用程序中，不支持多个Flutter库打包Android上添加应用程序的插件基于FlutterPlugin，不支持FlutterPlugin的插件，可能会发生意想不到的结果从v1.17开始，Flutter模块仅支持Android上的Andro

一 概述为什么要监听路由堆栈变化如何监听路由堆栈路由堆栈示例二 为什么要监听路由堆栈变化当由页面A跳转到页面B时，堆栈及状态发生了变化页面跳转时的变化状态有：didPush(跳转)/didPushNext(下一个)、didPop(返回)/didPopNext(返回上一个)通过路由堆栈监听，可以自定义路由堆栈，方便分析异常日志等三 如何监听路由堆栈3.1 几个关键字navigatorObservers(路由监听列表) const MaterialApp({ Key?

一 概述几个概念不通过定义路由方式，进行页面间跳转通过定义路由方式，进行页面间跳转页面跳转及返回时传值二 几个概念Route：路由是应用程序页面的抽象，对应Android中activity和IOS中的ViewController，由Navigator管理Navigator：Navigator是一个组件，管理和维护一个基于堆栈的历史记录，通过push和pop进行页面的跳转三 不通过定义路由方式，进行页面间跳转3.1 页面间跳转关键字push：以A页面为起点跳转到B页面，push

一 概述Flutter中的数据库文件是SQLite，本文介绍Flutter中的数据操作添加数据库依赖RawData数据库操作Model数据库操作二 添加数据库依赖2.1 依赖地址SQLite pub地址：https://pub.flutter-io.cn/packages/sqfliteSQLite Github：https://github.com/tekartik/sqflite2.2 添加依赖在cmd终端执行如下指令flutter pub add sqflite上述

一 概述文件夹操作(创建、遍历、重命名、删除)文件操作(创建、数据写入、读取数据、删除文件)json文件数据读取二 添加依赖因为文件及文件夹的操作依赖于path_provider在项目的 pubspec.yaml 文件中添加依赖flutter pub add path_provider点击pubspec.yaml右上角的Pub get或者执行如下指令flutter pub get三 文件夹操作(创建、遍历、重命名、删除)3.1 创建文件夹_createDir() async

一 现象按钮点击时，出现了如下错误现象type 'Future<dynamic>' is not a subtype of type '() => void?'See also:https://flutter.dev/docs/testing/errors二 原因分析2.1 代码调用Padding(padding: const EdgeInsets.all(16.0), child: ElevatedButton(child: const Text('创建文件夹'), o