![](https://img-blog.csdnimg.cn/20201014180756918.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
Flutter
文章平均质量分 64
PGzxc
应用开发者
展开
-
Flutter面试题——面试题1
flutter中widget主要分为 StatelessWidget 和 StatefulWidget 两种 二者生命周期不太一样。需要持有状态 State,这里面包含了一系列生命周期方法。pub.dev中opengle类库。三棵树,其中 Widget。Flutter中手势识别组件。原创 2022-10-26 17:23:47 · 1545 阅读 · 0 评论 -
Flutter开发之——getX-GetConfig全局设置(15)
一 概述Config可以设置哪些内容如何进行Config设置Config设置示例二Config可以设置哪些内容2.1 Config的设置内容/// change default config of Getvoid config( { bool? enableLog, LogWriterCallback? logWriterCallback, bool? defaultPopGesture, bool? defaultOpaqueRoute,原创 2022-05-14 10:08:11 · 1905 阅读 · 0 评论 -
Flutter开发之——getX-GetxService(14)
一 概述GetXService使用说明利用GetXService改写网络API示例项目参考及示例代码二 GetXService2.1 使用说明GetXService用在runApp之前,用于启动App之前进行初始化工作可以分别定义APIService(网络)、DBService(数据库)、SharedPreferenceService(本地化存储)等在initServices中控制上述Service的执行顺序2.2 如何使用GetXService(APIService)clas原创 2022-05-13 09:26:26 · 4685 阅读 · 0 评论 -
Flutter开发之——getX-获取视图的几种方式(13)
一 概述本文介绍在Flutter-getX中,获取视图的几种方式GetView:最常用,是个const Stateless Widget,GetView<Controller>绑定控制器后可直接使用GetResponsiveView:响应式视图,该视图包含screen属性,其中包含关于屏幕大小和类型的信息GetWidget:使用较少,不是个const Stateless视图,它缓存了一个控制器二 GetView示例2.1 GetView-Controller控制器(控制器内容相原创 2022-05-12 16:30:05 · 2901 阅读 · 0 评论 -
Flutter开发之——getX-StatefulWidget简化(12)
一 概述StatefulWidget中,组件的值改变时,需要调用.setState用于更新新值,本文介绍GetX中的两个值改变器ValueBuilder:值构建器ObxValue:对象值二 几种值改变方式对比2.1 StatefulWidget中默认的值改变var _switchValue = false;Switch( value: _switchValue, onChanged: (value) { setState(() {原创 2022-05-11 23:21:44 · 2033 阅读 · 0 评论 -
Flutter开发之——getX-GetPage中间件(11)
一 概述GetPage Middleware中间件介绍如何定义GetMiddlewareGetPage Middleware使用示例二 GetPage Middleware中间件介绍2.1 什么是Middleware中间件中间件是介于应用系统和系统软件之间的一类软件,它使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的百度百科此处指:执行路由跳转前的页面,比如Get.to()跳转之前的那个页面2.2 GetPage Mi原创 2022-05-10 21:28:12 · 6903 阅读 · 0 评论 -
Flutter开发之——getX-Connect网络请求(10)
一 概述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请原创 2022-05-09 21:45:31 · 7180 阅读 · 1 评论 -
Flutter开发之——getX-改变主题(09)
一 概述浅色主题深色主题二 getX中切换主题API2.1 当前是什么模式主题Get.isDarkMode2.2 改变当前主题设置为浅色主题Get.changeTheme(ThemeData.light());设置为深色主题Get.changeTheme(ThemeData.dark());放在一个onPressed中,根据Get.isDarkMode判断Get.changeTheme(Get.isDarkMode? ThemeData.light()原创 2022-05-08 15:30:53 · 4284 阅读 · 2 评论 -
Flutter开发之——getX-国际化(08)
一 国际化效果图如下图所示,点击中文按钮显示中文;点击EN按钮显示英文,进行切换国际化中文国际化英文二 国际化步骤2.1 项目结构图说明本项目是在上文Flutter开发之——底部导航栏BottomNavigationBar的基础上进行修改,关于这方面的知识点,请查看上文,这里只对国际化的内容做如下说明:Main:入口文件配置string:Messages各种语言键值对中的键,方便复用和显示时引用Messages:国际化语言配置,根据需要配置中文/英文/其他原创 2022-05-07 15:25:03 · 3412 阅读 · 0 评论 -
Flutter开发之——底部导航栏BottomNavigationBar
一 底部导航栏效果图模式首页关系图导航页关于我FixedShifting二 BottomNavigationBar详解2.1 BottomNavigationBar介绍BottomNavigationBar是Scaffold脚手架中的位于底部的一个组件BottomNavigationBar位于body的下方,属于底部导航栏BottomNavigationBar包含多个BottomNavigationBarItem,BottomNavigat原创 2022-05-06 19:57:31 · 3717 阅读 · 2 评论 -
Flutter开发之——getX-依赖管理(07)
一 概述实例化依赖项的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原创 2022-05-05 23:01:13 · 1407 阅读 · 0 评论 -
Flutter开发之——getX-用户登陆示例(06)
一 用户登陆界面展示没有勾选同意用户名错误密码错误成功去登陆二 项目结构说明2.1 项目由来最近学习了getX的相关知识点,getX可以简化项目书写和项目解藕(逻辑和界面展示分离)看到CSDN-Flutter-登录界面实战,作为getX练手2.2 项目结构说明:Login:登陆界面,只负责与用户交互的界面内容展示LoginController:逻辑控制文件,负责处理,登陆按钮点击和隐私协议勾选三 项目示例说明3.1 LoginControl原创 2022-05-04 22:50:55 · 3114 阅读 · 0 评论 -
Flutter开发之——getX-小组件(05)
一 概述在getX中,无需context上下文,便可使用SmallWidget小组件:SnackBars提示信息Dialog对话框BottomSheets底部弹窗二 SnackBars提示信息2.1 SnackBars属性信息编号属性说明1title标题2message内容3colorText文字颜色4duration显示时长5snackPosition显示位置(Top/Bottom)6icon图标7on原创 2022-05-03 10:43:36 · 1746 阅读 · 0 评论 -
Flutter开发之——getX-路由管理(04)
一 概述路由跳转(不使用named命名和使用named命名)路由跳转传值路由中间件Middleware路由嵌套导航二 路由跳转(不使用named命名和使用named命名)2.1 前提(GetMaterialApp取代MaterialApp)GetMaterialApp( // Before: MaterialApp( home: MyHome(),)说明:GetMaterialApp:GetX自带的MaterialApp,配置路由表,管理路由入栈、出栈等操作Materia原创 2022-05-02 22:58:23 · 7563 阅读 · 0 评论 -
Flutter开发之——getX-StateMixin(03)
一 效果图LoadingSuccessEmptyError二 StateMixin2.1 概述Flutter中一种更新UI的方式是使用StateMixin,StateMixin是多种状态的混合因为Controller是负责处理数据和业务功能的,在Controller的后面使用with StateMixinStateMixin<T>中T是数据模型,比如User,StateMixin<User>当数据模型的数据改变时(如:空/完成/出错原创 2022-05-01 16:52:54 · 2725 阅读 · 0 评论 -
Flutter开发之——getX-状态管理(02)
一 概述状态管理说明未使用getX和使用getX状态管理区别反应式状态管理(GetX/Obx)简单状态管理(GetBuilder)二 状态管理说明2.1 状态百度百科:状态是人或事物表现出来的形态。是指现实(或虚拟)事物处于生成、生存、发展、消亡时期或各转化临界点时的形态或事物态势此处:指的是变量的值2.2 状态管理的方式其他状态管理器:Streams或者ChangeNotifier此处:反应式状态管理(GetX/Obx)和简单状态管理(GetBuilder)三 未使用原创 2022-04-30 23:28:01 · 1992 阅读 · 0 评论 -
Flutter开发之——getX-快速入门(01)
一 概述GetX是Flutter的一个快速开发框架,借助GetX可以极大提高Flutter的开发速度和效率,它支持:反应式状态管理OBS(之前通过setState设置)路由管理(之前通过Navigator跳转)依赖管理(设置过Get.put(Controller)可以获取到Controller实例化)实用工具箱(国际化、切换主题、网络连接设置、GetPage中间件、高级API、本地状态组件、状态混合、测试等)后续将分章节进行讲解,本文为GetX快速入门,让你对GetX有个了解二 GetX原创 2022-04-29 21:42:11 · 10074 阅读 · 0 评论 -
Flutter开发之——windows desktop桌面应用入门
一 概述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原创 2021-12-10 17:08:19 · 8891 阅读 · 0 评论 -
Flutter开发之——国际化之Intl插件
一 概述Intl是官方出品的,包含用于处理国际化/本地化消息,日期和数字格式和解析,双向文本以及其他国际话问题。pub地址:https://pub.dev/packages/intlGithub地址:https://github.com/dart-lang/intl二 插件安装(Intellij)Flutter Intl插件安装:依次点击:Intellij IDEA—>Preference—>Plugins—>Marketplace,搜索Flutter Intl原创 2021-07-25 17:27:22 · 2227 阅读 · 1 评论 -
Flutter开发之——国际化支持
一 概述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原创 2021-07-25 17:26:45 · 951 阅读 · 1 评论 -
Flutter开发之——IOS通信EventChannel
一 概述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原创 2021-07-23 19:22:57 · 1438 阅读 · 1 评论 -
Flutter开发之——IOS通信BasicMessageChannel
一 概述创建Flutter端BasicMessageChannel创建IOS端BasicMessageChannel在合适的地方调用BasicMessageChannel二 BasicMessageChannel通信示例2.1 Flutter 端创建 MethodChannel 通道import 'package:flutter/foundation.dart';import 'package:flutter/material.dart';import 'package:flutter原创 2021-07-23 19:22:06 · 876 阅读 · 1 评论 -
Flutter开发之——IOS通信MethodChannel
一 概述创建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()原创 2021-07-23 19:21:09 · 1299 阅读 · 1 评论 -
Flutter开发之——IOSView
一 概述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原创 2021-07-23 19:20:26 · 331 阅读 · 1 评论 -
Flutter开发之——IOS启动Flutter
一 概述本文介绍从原生iOS启动Flutter的几种方式直接启动(不配置缓存 FlutterEngine和路由)Flutter使用缓存FlutterEngine启动Flutter使用路由方式启动Flutter二 直接启动(不配置缓存 FlutterEngine和路由)Flutter2.1 代码(ViewController)import UIKitimport Flutterclass ViewController: UIViewController { override原创 2021-07-21 08:46:09 · 1131 阅读 · 1 评论 -
Flutter开发之——iOS原生项目导入Flutter
一 概述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.原创 2021-07-20 08:46:26 · 948 阅读 · 0 评论 -
Flutter开发之——Android通信-EventChannel
一 概述创建Flutter端EventChannel创建Android端EventChannel在合适的地方调用EventChannel二 EventChannel通信示例2.1 Flutter 端创建 EventChannel 通道void main() => runApp(EventChannelDemo());class EventChannelDemo extends StatefulWidget { @override _EventChannelDemoStat原创 2021-07-19 08:58:25 · 651 阅读 · 1 评论 -
Flutter开发之——Android通信-BasicMessageChannel
一 概述创建Flutter端BasicMessageChannel创建Android端BasicMessageChannel在合适的地方调用BasicMessageChannel二 BasicMessageChannel通信示例2.1 Flutter 端创建 MethodChannel 通道代码void main() => runApp(BasicMessageChannelDemo());class BasicMessageChannelDemo extends Statef原创 2021-07-19 08:57:40 · 496 阅读 · 0 评论 -
Flutter开发之——Android通信-MethodChannel
一 概述Flutter创建MethodChannel通道Android端创建通信MethodChannel通道在合适位置调用Android通信MethodChannel二 MethodChannel通信示例2.1 Flutter创建MethodChannel通道代码void main() => runApp(MethodChannelDemo());class MethodChannelDemo extends StatefulWidget { @override _原创 2021-07-19 08:56:54 · 1065 阅读 · 0 评论 -
Flutter开发之——Flutter与原生三种通信方式
一 概述Flutter与Native原生端通信有三种方法:MethodChannelBasicMessageChannelEventChannel二 三种通信方式介绍2.1 MethodChannelFlutter与Native端相互调用,调用后返回结果可以Native端主动调用,也可以Flutter主动调用,属于双向通信此种方式最为常见,Native端调用需要在主线程中执行2.2 BasicMessageChannel用于使用指定的编解码器对消息进行编码和解码属于双向通原创 2021-07-19 08:56:03 · 1723 阅读 · 0 评论 -
Flutter开发之——AndroidView
一 AndroidView说明AndroidView是一个原生端自定义的View,继承自PlatformView混合开发中,自定义后的AndroidView,可以在flutter端使用AndroidView可以在原生端和Flutter之间传递数据二 自定义AndroidView2.1 原生项目添加FlutterModulesettings.gradlesetBinding(new Binding([gradle: this]))evaluate(new File( settings原创 2021-07-19 08:55:03 · 2412 阅读 · 1 评论 -
Flutter开发之——Android-Flutter添加到Fragment
一 概述Android原生开发中,Fragment可以作为Activity页面的一部分(Activity的一部分或者ViewPager的一个页面)Flutter可以作为FlutterFragment集成到原生页面中呈现二 FlutterFragment开发的一般步骤初始化Flutter路由设置Dart执行入口背景是否透明使用是否FlutterEngine或者带缓存的FlutterEngine三 界面布局(activity与Fragment的关系)3.1 界面(TextView+R原创 2021-07-19 08:54:11 · 1160 阅读 · 1 评论 -
Flutter开发之——Android-Flutter添加到Activity
一 概述添加Flutter到Activity,又叫从Activity启动Flutter,本文主要讲述一下几种:默认启动FlutterActivity使用缓存的FlutterEngine启动FlutterActivity带有缓存引擎的初始路由启动FlutterActivity二 路由设置及启动原生启动Flutter可以分为:直接启动Flutter根界面(home)和启动路由界面2.1 直接启动启动方式startActivity(FlutterActivity.createDefault原创 2021-07-17 23:45:41 · 1444 阅读 · 1 评论 -
Flutter开发之——Android原生项目导入Flutter
一 概述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原创 2021-07-17 23:45:08 · 1204 阅读 · 0 评论 -
Flutter开发之——添加Flutter到已经存在的App中
一 概述原生应用具有跨平台框架不具备的优势Flutter优秀的路由,动画,ui设计可以快速完成项目开发在已有的原生项目的基础上,导入Flutter,进行混合开发更具优势二 原生+Flutter混合开发限制每个应用一次只能集成一个Flutter实例到应用程序中,不支持多个Flutter库打包Android上添加应用程序的插件基于FlutterPlugin,不支持FlutterPlugin的插件,可能会发生意想不到的结果从v1.17开始,Flutter模块仅支持Android上的Andro原创 2021-07-17 23:44:29 · 320 阅读 · 0 评论 -
Flutter开发之——监听堆栈变化
一 概述为什么要监听路由堆栈变化如何监听路由堆栈路由堆栈示例二 为什么要监听路由堆栈变化当由页面A跳转到页面B时,堆栈及状态发生了变化页面跳转时的变化状态有:didPush(跳转)/didPushNext(下一个)、didPop(返回)/didPopNext(返回上一个)通过路由堆栈监听,可以自定义路由堆栈,方便分析异常日志等三 如何监听路由堆栈3.1 几个关键字navigatorObservers(路由监听列表) const MaterialApp({ Key?原创 2021-06-18 13:46:36 · 1262 阅读 · 1 评论 -
Flutter开发之——路由堆栈
一 概述几个概念不通过定义路由方式,进行页面间跳转通过定义路由方式,进行页面间跳转页面跳转及返回时传值二 几个概念Route:路由是应用程序页面的抽象,对应Android中activity和IOS中的ViewController,由Navigator管理Navigator:Navigator是一个组件,管理和维护一个基于堆栈的历史记录,通过push和pop进行页面的跳转三 不通过定义路由方式,进行页面间跳转3.1 页面间跳转关键字push:以A页面为起点跳转到B页面,push原创 2021-06-17 17:46:38 · 983 阅读 · 0 评论 -
Flutter开发之——数据库
一 概述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上述原创 2021-06-01 17:40:07 · 1556 阅读 · 2 评论 -
Flutter开发之——文件及文件夹操作
一 概述文件夹操作(创建、遍历、重命名、删除)文件操作(创建、数据写入、读取数据、删除文件)json文件数据读取二 添加依赖因为文件及文件夹的操作依赖于path_provider在项目的 pubspec.yaml 文件中添加依赖flutter pub add path_provider点击pubspec.yaml右上角的Pub get或者执行如下指令flutter pub get三 文件夹操作(创建、遍历、重命名、删除)3.1 创建文件夹_createDir() async原创 2021-05-27 10:46:51 · 8556 阅读 · 0 评论 -
Flutter开发之——Future<dynamic> is not a subtype of type () void
一 现象按钮点击时,出现了如下错误现象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原创 2021-05-26 17:42:12 · 5025 阅读 · 0 评论