Flutter知识梳理
Coding_Physical
一个拥有六块腹肌的IT男
展开
-
学习 flutter iOS Plugin
一、命令flutter create --platforms=ios -t plugin -i objc hello 创建一个iOS 插件cd helloflutter build ios --no-codesign 构建iOS插件代码二、Dart 和 Native代码建立方法通道,原生和Flutter依据方法通道 来启动相关方法 。flutter 插件中需要导入flutter/service.dart 新建MethodChannel 设置name三、展示效果...原创 2021-05-27 15:40:02 · 575 阅读 · 0 评论 -
flutter--OC 原生混编
一、集成混合开发环境001 建立flutter_module% flutter create -t module flutter_moduleCreating project flutter_module... flutter_module/test/widget_test.dart (created) flutter_module/flutter_module.iml (created) flutter_module/.gitignore (created) flutter_.原创 2021-03-13 13:56:11 · 665 阅读 · 0 评论 -
转 flutter动态化瘦身方案
美团技术转载 2021-02-28 10:12:34 · 332 阅读 · 0 评论 -
Flutter 线上异常捕获和信息采集
前提:Flutter异常指的是Flutter程序Dart代码运行时意外发生的错误事件。我们可以通过try-catch机制来获取它。但是Dart采用时间循环机制不强制要求处理异常处理,各个任务的运行状态是相互独立,即便某个任务出现了异常我们没有捕获到,Dart也不会退出。只是导致当前任务后续的代码不会被执行,用户仍可以继续使用其他功能。一、App异常同步异常:可以通过try-catch捕获,异步异常:通过Future的catchError语句捕获。//使用try-catch捕获同步异常try原创 2021-02-16 10:36:57 · 607 阅读 · 0 评论 -
Flutter 性能调优
一、GPU线程问题性能图层需要以分析模式启用应用。通过真机进行检测,因为相比发布模式,调试模式增加了额外的检查,这些检查会耗费很多资源。在JIT模式下执行代码效率较低,无法真实反映出它的性能问题。另一方面模拟器使用的是X86指令集,真机是ARM,两种方式二进制执行行为都不一样,一些在X86执行比较快的操作在真机执行会慢,这使得得用真机才能评估出出现的性能问题。flutter run --profile性能图层Performance Overlay性能图层会在当前应用的最上层,以flutter原创 2021-02-15 17:08:37 · 476 阅读 · 0 评论 -
flutter 编译模式以及HotLoad
001 DebugDart的JIT(即时编译)模式动态编译,可以在真机和模拟器上同时运行。可以打断点 看到输出日志,可以ho tload只为快速开发和运行做了优化,没有优化代码执行速度,二进制包大小和部署。002 ReleaseDart的AOT(提前编译)模式,静态编译,只能在真机上运行,不能在模拟器上运行,其最终目标是线上发布,给最终客户使用,会关闭所有断点,调试信息,服务扩展和调试辅助,优化了应用快启动,代码快速执行,以及二进制包大小,编译时间较长。003 Profile和r原创 2021-02-11 12:24:56 · 360 阅读 · 0 评论 -
flutter 国际化适配
001 国际化定义涉及语言及地区差异的适配改造过程。除了翻译文案之外,还需要将货币单位和背景图等资源也设计成可根据不同地区自适应的变量。即语言差异配置抽取和国际化代码生成。002 如何实现国际化插件flutter_localizations,其内部提供了不同语言地区的配置封装,能够帮助我们自动地从翻译稿生成Dart代码。使用多个arb文件存储文案在不同语言地区的映射关系,并使用Flutter i18n插件来实现代码自动转换。关键点:在程序入口为其设置了支持国际化两个重要参数即 l原创 2021-02-11 10:28:10 · 537 阅读 · 0 评论 -
flutter 跨模块之间数据共享实践
001 Provider它是inheritedWidget语法糖。提供了依赖注册的功能,允许Widget树中更加灵活处理和传递数据依赖注册是一种可以让我们在需要的时提取到所需资源的机制,换句话说是预先将某种资源放到程序中的某个我们都可以访问的的位置,当需要使用这个资源时,直接去这个位置拿即可,无需关心资源时谁放进去。封装的数据源不仅需要为子widget提供读的能力,还要提供写的能力,需要使用ChangeNotifierProvider.value。获取Provider的数据final原创 2021-02-10 18:07:14 · 432 阅读 · 0 评论 -
flutter 学习之单线程模型如何确保UI运行流畅
001 Event Loop机制异步意味着代码执行是有序的,不会被其他代码中断,单线程和异步并不冲突。单线程模型可以等待过程中分做别的事情,等真正需要相应结果的时候再去做对应的处理,因为等待的过程并不是阻塞,只是给咱们的一个假象,本质是只有一个线程在处理事情。这个等待行为是通过Event Loop驱动,事件队列Event Queue会把其他平行任务完成的,需要主线程响应的事件放入其中。通过不断轮询事件队列,取出事件,在主线程同步执行回调函数。可以理解成Run loop002 异步处理未任务队转载 2021-02-08 08:42:34 · 371 阅读 · 0 评论 -
flutter 学习之动画三要素
动画:确定画面变化规律;根据这个规律,设定动画周期,启动动画;定期获取当前动画的值,不断地调整,重绘画面。一、Animation提供动画数据例如动画是否开始,停止,前进,或者后退,以及动画当前的值。不负责的话的渲染。二、AnimationController管理Animation,可以用来设置动画的时长,启动动画,暂停动画,反转动画等。三、ListenerAnimation回调函数,监听动画进度的变化,在回调函数中,根据当前值重新渲染组件,实现动画的渲染。AnimationCon转载 2021-02-07 11:27:11 · 529 阅读 · 1 评论 -
学习 flutter 导航实现页面切换
路由管理:通过route和navigator来管理,route负责页面抽象,主要负责创建对应的页面,接收参数,响应navigator打开和关闭。navigator则会维护一个路由管理route,route打开即入栈,route关闭即出栈,还可以直接替换栈内某一个route。一、基本路由无需注册,在页面切换中自己构造页面实例。关键词MaterialPageRouteNavigator.push(context, MaterialPageRoute(builder: (context) =>原创 2021-02-03 23:43:07 · 558 阅读 · 0 评论 -
flutter学习之数据跨层传递方案
一、InheritedWidget是flutter中一个功能型widget,适用于widget树中共享数据场景,可以高效将数据在widget中进行跨层传递,例如主题风格Theme。在子wideget中通过theme.of方法 找到上层theme的widget,获得到其属性的同时,建立子widget和上层父wideget的观察者关系,当上层wideget属性改变的时候,子widget也会触发更新。 不过InheritedWidget仅提供数据读的能力,如果想修改数据,则需要把它和statefulWidge转载 2021-02-01 18:10:18 · 325 阅读 · 0 评论 -
flutter 学习笔记之生命周期
一、State生命周期001 State的生命周期,指的是在用户参与的情况下,其关联的Widget所经历的,从创建到显示再到更新到停止,直至销毁的各个过程阶段。创建(插入视图)、更新视图(在视图中存在),销毁(在视图中移除)创建:构造方法-initState-didChangeDependencies-build构造方法:createState()来创建一个State,接受父widget传递的初始化UI配置数据,这些数据决定了Widget最初的呈现效果。initState:会在State转载 2021-01-31 21:49:46 · 386 阅读 · 0 评论 -
flutter 利用provider和Store 管理共享状态
需求:在登陆完成后需要缓存登录返回的信息 例如字典对象,这些信息在我的页面有进行使用例如展示用户的名字等技术要点:ProviderStore ChangeNotifier等实现方式:001 新建一个登陆页面的Providerimport 'package:flutter/foundation.dart';import 'package:qianduoduo/models/login_model.dart';import 'package:shared_preferences/sh...原创 2021-01-26 16:42:18 · 844 阅读 · 0 评论 -
flutter 自定义 toast 交互
三方库实现方式import 'package:oktoast/oktoast.dart';在屏幕中间展示加载标签_showLoading() { showToastWidget( Container( width: 150, height: 100, color: Colors.black54, child: Center( child: Column( main原创 2021-01-26 14:32:58 · 172 阅读 · 0 评论 -
flutter 拍照 从相册获取 照片
三方库image_picker从相册获取图片 并进行处理 // final pickedFile = await ImagePicker().getImage(source: ImageSource.camera); var pickedFile = await ImagePicker().getImage(source: ImageSource.gallery); var filepath = File(pickedFile.path); var sizeee .原创 2021-01-26 14:19:11 · 1048 阅读 · 0 评论 -
2021-第一个手写Flutter 页面
需求:写一个设置页面 包含三个栏目,栏目1,栏目2,栏目三更新提示关键词:FutureBuilder showDialogAlertDialog SharedPreferences一、技术细节:001 网络请求版本号002 动态显示更新标识003 点击版本栏目弹窗显示更新内容004 点击其他栏目跳转到其他页面二、技术实现点:001 构建异步网络请求var _futureBuilderFuter;void initState() {var context ...原创 2021-01-26 10:23:59 · 196 阅读 · 0 评论 -
flutter 学习之本地缓存插件
关键词shared_preferences三方库引入三方库:shared_preferences: 0.5.12+4在页面引入头文件import 'package:shared_preferences/shared_preferences.dart';实践 插入key valueFuture<String> getPreferences(String key) async { SharedPreferences prefs = await SharedPreferen原创 2021-01-14 23:55:33 · 545 阅读 · 0 评论 -
flutter App允许网络抓包 设置实践
001 引入头文件import 'package:dio/dio.dart';import 'package:dio/adapter.dart';002var dio = new Dio();// 设置代理用来调试应用(dio.httpClientAdapter as DefaultHttpClientAdapter).onHttpClientCreate =(client) {client.findProxy = (Uri) {// 用1个开关设置是否开启代理r..原创 2021-01-14 16:42:19 · 463 阅读 · 0 评论 -
flutter 学习之网络请求模块
引入三方库connectivity: ^0.4.5+2 #网络监测device_info: ^0.4.0+1package_info: ^0.4.0+6dio: ^3.0.9代码实现:import 'dart:io';import 'dart:collection';import 'package:connectivity/connectivity.dart';import 'package:dio/dio.dart';import 'package:device_info原创 2021-01-13 23:48:25 · 248 阅读 · 0 评论 -
flutter 项目 check下来 一些配置修改
问题1:/MainActivity.kt: (19, 48): Type mismatch: inferred type is MainActivity but FlutterEngine was expected% flutter build apk --no-shrink Running "flutter pub get" in qianduoduo... 0.9sYou are building a fat APK that includ原创 2021-01-10 11:58:35 · 521 阅读 · 1 评论 -
flutter 学习TextEditingController控件
关键词:TextEditingControllerFutureBuilderGestureDetectorContainerTextEditingController就是在OC中UITextFeild 控件[TextEditingController.addListener].监听输入框输入字符 类似于UITextFeild的textvalueDidChange代理FutureBuilder :Creates a widget that builds itself based on the ...原创 2020-12-29 23:11:41 · 6403 阅读 · 0 评论 -
flutter学习之 状态管理ChangeNotifierProvider
利用ChangeNotifierProvider来监听状态改变import 'package:flutter/material.dart';import 'package:flutter/foundation.dart';import 'package:provider/provider.dart';// void main() { runApp( MultiProvider(providers: [ ChangeNotifierProvider(create原创 2020-12-26 23:33:41 · 1196 阅读 · 0 评论 -
flutter-学习之发布安卓包APK
001 设置图标:在链接自动生成图标网站就可以快速生成用得到的图标,下载之后全选复制在项目替换flutter自动生成的图标002 生成密钥库文件.jsk结尾记住密码和存储密码003 新建文件key.properties 配置如下信息keyAlias = keykeyPassword = 密码storeFile =密钥库文件的绝对路径storePassword = 密码004 配置签名文件build.gradle在android {}之前定义key.prop...原创 2020-12-24 22:54:04 · 558 阅读 · 0 评论 -
flutter 拖拽视图
关键字:Draggableimport 'package:flutter/material.dart';class DraggableWiget extends StatefulWidget { final Offset offset; final Color widgetColor; DraggableWiget({Key key,this.offset,this.widgetColor}) : super(key: key); @override _Draggabl..原创 2020-12-18 15:06:18 · 419 阅读 · 0 评论 -
flutter 轻量提示
关键词:Tooltipimport 'package:flutter/material.dart';class ToolTipDemo extends StatefulWidget { @override _ToolTipDemoState createState() => _ToolTipDemoState();}class _ToolTipDemoState extends State<ToolTipDemo> { @override Widget bu原创 2020-12-18 11:41:55 · 432 阅读 · 0 评论 -
flutter 右滑手势
关键词苹果主题控件CupertinoPageScaffoldCupertinoPageRouteimport 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class RightBackDemo extends StatelessWidget { const RightBackDemo({Key key}) : super(key: key); @override Widget b..原创 2020-12-18 11:40:41 · 625 阅读 · 0 评论 -
flutter 学习 启动图闪图跳转到首页
关键词:AnimationControllerAnimationSingleTickerProviderStateMixinimport 'package:flutter/material.dart';import 'my_home_page.dart';class SplashScreen extends StatefulWidget { @override _SplashScreenState createState() => _SplashScreenState();}..原创 2020-12-18 11:07:22 · 248 阅读 · 0 评论 -
flutter 学习 贝塞尔曲线
ClipPath 的子元素是一个Container组件,自定义裁剪的对象,对该对象进行切割路径。贝塞尔曲线路径就写在getClip方法里,返回一段路径。二维贝塞尔曲线是需要控制点和终点,控制点会将直线拉过去,形成一个流畅的弧度,这个弧度就是贝塞尔曲线。实现代码如下:import 'package:flutter/material.dart';class HomePage extends StatelessWidget { @override Widget build(BuildCon原创 2020-12-16 23:08:52 · 604 阅读 · 0 评论 -
flutter 列表开合效果
效果import 'package:flutter/material.dart';class ExpansionPanelListDemo extends StatefulWidget { ExpansionPanelListDemo({Key key}) : super(key: key); @override _ExpansionPanelListDemoState createState() => _ExpansionPanelListDemoState();}原创 2020-12-14 22:52:10 · 189 阅读 · 1 评论 -
flutter 学习 expansionTitle
效果import 'package:flutter/material.dart';import 'expansion_tile_demo.dart';void main(List<String> args) { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(原创 2020-12-14 22:03:35 · 356 阅读 · 0 评论 -
flutter 学习 Warp布局
效果:import 'package:flutter/material.dart';import 'warp_demo.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo',原创 2020-12-14 21:40:43 · 683 阅读 · 0 评论 -
flutter 学习 search bar
关键词SearchDelegate效果main.dartimport 'package:flutter/material.dart';import 'search_bar_demo.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { const MyApp({Key key}) : super(key: key); @override Widget build(B原创 2020-12-13 22:09:04 · 637 阅读 · 0 评论 -
flutter 学习 topTapButton TapView
关键词AutomaticKeepAliveClientMixin效果main.dartimport 'dart:ui';import 'package:flutter/material.dart';import 'keep_alive_demo.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext原创 2020-12-13 20:53:00 · 142 阅读 · 0 评论 -
Flutter 之毛玻璃效果
import 'package:flutter/material.dart';import 'dart:ui';class FrostedClassDemo extends StatelessWidget { const FrostedClassDemo({Key key}) : super(key: key); @override Widget build(BuildContext context) { return Scaffold( body: Stack(.原创 2020-12-12 10:11:51 · 351 阅读 · 0 评论 -
Flutter 基础学习之 路由切换效果
main函数import 'package:flutter/material.dart';import 'first_page.dart';void main() { runApp(MyApp());}class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo',原创 2020-12-09 22:29:10 · 224 阅读 · 0 评论 -
Flutter 基础学习之 底部不规则Tabbar
每天坚持学习记录分享 加油加油加油!!!!关键点在于创建不规则按钮,按钮和通用的TabbarItem融合floatingActionButtonLocation: FloatingActionButtonLocation.endDocked,浮层按钮和Tabbar后面融合起来import 'package:flutter/material.dart';class BottomAppBarDemo extends StatefulWidget { @override _BottomA原创 2020-12-07 23:01:52 · 380 阅读 · 0 评论 -
unsigned char 与 char在UTF8String 编码中的差异
Dart语言中utf8.encode(string);是将string编码成无符号bytes,那么对应在OC中将拆分成几部分001 将字符串通过NSUTF8StringEncoding编码转化成NSData NSString* utf8EncodingStr = [[NSString alloc]initWithData:data encoding:NSUTF8StringEncoding]; NSData *testData = [utf8EncodingStr dataUsingE...原创 2020-12-05 20:09:36 · 534 阅读 · 0 评论 -
学习Flutter 控件笔记
GridView控件需要注意gridDelegate参数类型是SliverGridDelegate,它是的作用是控制GridView子组件如何排列。SliverGridDelegateWithFixedCrossAxisCount 需要注意两个参数crossAxisCount&&childAspectRatiocrossAxisCount:横轴元素的数量,此属性确定后子元素在横轴的长度等于屏幕长度除以crossAxisCount的商childAspectRatio:子元素在横轴.原创 2020-11-15 19:07:03 · 168 阅读 · 0 评论 -
Dart---- 控件梳理
List<E>class定义:An indexable collection of objects with a length.一个自带长度可索引的集合对象。Subclasses of this class implement different kinds of lists. The most common kinds of lists are: Fixed-length list. An error occurs when attempting to use operati..原创 2020-11-14 22:06:31 · 101 阅读 · 0 评论