![](https://img-blog.csdnimg.cn/122f3497be3041f5a88d9c119deaa1e6.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Flutter
Flutter
WongKyunban
这个作者很懒,什么都没留下…
展开
-
flutter No Material widget found的解决办法
flutter一直报IconButton的错误:Another exception was thrown: No Material widget found.后来经过不懈的努力,终于找到答案,非常感谢yechaoa博主的分享:https://blog.csdn.net/yechaoa/article/details/90693377Material 风格的widget 都需要Scaffold作为根布局,否则就会报这个错。Material 风格的widget都有以下这些:AppBarBottomA原创 2020-11-12 23:19:43 · 5233 阅读 · 0 评论 -
FlutterJson数组转换为List对象及Dio请求结果换为List对象
1.实体类class VideoInfo { String body; int id; String title; int userId; VideoInfo({this.body, this.id, this.title, this.userId}); factory VideoInfo.fromJson(Map<String, dynamic> json) { return VideoInfo( body: json['body'],原创 2020-11-12 10:02:36 · 5781 阅读 · 0 评论 -
Flutter分享微信Demo源码
1.添加依赖dependencies: flutter: sdk: flutter # https://pub.flutter-io.cn/packages/fluwx # https://github.com/OpenFlutter/fluwx fluwx: ^2.4.02.w_share.dart:import 'package:flutter/material.dart';/// 点击事件typedef OnItemClickListener = void Fun原创 2020-11-01 11:12:50 · 2311 阅读 · 0 评论 -
No MaterialLocalizations found.和No MediaQuery widget found的解决方法
在使用showDialog和showModalBottomSheet时,发现它们不能直接写在 MaterialApp的home属性下,会报如下错误:Another exception was thrown: No MaterialLocalizations found.或Another exception was thrown: No MediaQuery widget found.解决的办法就是将代码提取出来:class MyApp extends StatelessWidget { @o原创 2020-11-01 11:01:22 · 2375 阅读 · 0 评论 -
Flutter使用fluwx实现微信分享
step1:在pubspec.yaml添加fluwx库dependencies: flutter: sdk: flutter # https://pub.flutter-io.cn/packages/fluwx # https://github.com/OpenFlutter/fluwx fluwx: ^2.4.0step2:申请微信分享APPID@override void initState() { super.initState(); _initFl原创 2020-11-01 10:38:21 · 6746 阅读 · 1 评论 -
Flutter使用Dialog
import 'package:flutter/cupertino.dart';import 'package:flutter/material.dart';class MyDialogApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( title: "Dialog Demo", theme: ThemeData(原创 2020-10-25 16:18:45 · 1958 阅读 · 0 评论 -
Flutter强制某个页面横屏
1.问题描述在某个页面中使用flutter提供的方式来强制某个页面横屏:SystemChrome.setPreferredOrientations([ DeviceOrientation.portraitUp, DeviceOrientation.portraitDown ]);很遗憾!在Android上表现完美,但是在iOS中不能自动横屏,需要手动旋转手机。万幸!pub上有这样一个package,可以完美解决:orientation2.使用orientation2.1.原创 2020-09-16 15:15:56 · 3564 阅读 · 0 评论 -
用Flutter实现详情页、介绍页
1.效果图:2.分析布局布局建议通过以下方式来分析:找出行和列布局包含网格吗?有重叠的元素吗?是否需要选项卡?注意需要对齐、填充和边框的区域本例的如下图的分析,可知:四个元素排列成一列:一个图像,两个行和一个文本块。标题部分有三个子项:一列文字,一个星形图标和一个数字。它的第一个子项,列,包含2行文字。 第一列占用大量空间,所以它必须包装在Expanded widget中。下面的按钮部分也有3个子项:每个子项都是一个包含图标和文本的列:3.实现布局为了简化实现,可以采用逐个原创 2020-09-05 16:24:00 · 3175 阅读 · 0 评论 -
Flutter Row、Column布局
Row的布局有六个步骤,这种布局表现来自Flex(Row和Column的父类):首先按照不受限制的主轴(main axis)约束条件,对flex为null或者为0的child进行布局,然后按照交叉轴( cross axis)的约束,对child进行调整;按照不为空的flex值,将主轴方向上剩余的空间分成相应的几等分;对上述步骤flex值不为空的child,在交叉轴方向进行调整,在主轴方向使用最大约束条件,让其占满步骤2所分得的空间;Flex交叉轴的范围取自子节点的最大交叉轴;主轴Flex的值是由原创 2020-09-05 00:58:35 · 1996 阅读 · 0 评论 -
Flutter使用SQLite
1.添加依赖在pubspec.yaml添加sqflite插件:dependencies: flutter: sdk: flutter sqflite: ^1.3.1然后在项目根目录下执行如下命令:$ flutter pub get2.使用SQLite2.1.导入import 'package:sqflite/sqflite.dart';2.2.打开数据库SQLite数据库是文件系统里的一个文件,标识为一个路径。向openDatabase方法传入数据库文件的路径就可以原创 2020-08-26 14:38:42 · 6666 阅读 · 0 评论 -
flutter的Toast
1.添加依赖在pubspec.yaml文件中添加:dependencies: flutter: sdk: flutter fluttertoast: ^7.0.22.使用ToastFluttertoast.showToast( msg: "This is Center Short Toast", toastLength: Toast.LENGTH_SHORT, gravity: ToastGravity.CENTER,原创 2020-08-25 23:36:14 · 3433 阅读 · 0 评论 -
flutter拍照、拍摄短视频、选择图片
1.添加依赖:image_pickerimage_picker更多参考在https://pub.dev/packages/image_picker在配置文件pubspec.yaml添加如下配置:dependencies: flutter: sdk: flutter image_picker: ^0.6.72.开发拍照功能(完整例子)import 'dart:convert';import 'dart:io';import 'dart:isolate';import 'pa原创 2020-08-25 23:23:02 · 5716 阅读 · 0 评论 -
在Flutter中用dio发起HTTP网络请求
用dart io中的HttpClient发起的请求,但HttpClient本身功能较弱,很多常用功能都不支持。所以推荐大家使用dio 来发起网络请求,它是一个强大易用的dart http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载。github dio1.添加依赖在pubspec.yaml加入以下依赖:dependencies: dio: ^3.0.10 #latest version2.下载依赖在项目根目录下执行flutter p原创 2020-08-24 23:27:24 · 3146 阅读 · 0 评论 -
flutter动态更新ListView
需要更新适配器并调用notifyDataSetChanged。在Flutter中,如果setState()中更新widget列表,您会发现没有变化, 这是因为当setState被调用时,Flutter渲染引擎会遍历所有的widget以查看它们是否已经改变。 当遍历到你的ListView时,它会做一个==运算,以查看两个ListView是否相同,因为没有任何改变,因此没有更新数据。要更新ListView,然后在setState中创建一个新的List()并将所有旧数据复制到新列表中。这是实现更新的简单方法。原创 2020-08-24 22:39:04 · 5049 阅读 · 0 评论 -
flutter的TextField如何提示验证错误
可以通过更新状态并传递一个新的InputDecoration对象来完成:class MyAppHome extends StatefulWidget { @override _MyAppHomeState createState() => _MyAppHomeState();}class _MyAppHomeState extends State<MyAppHome> { String _errorText; @override Widget build(Bu原创 2020-08-24 22:33:18 · 5230 阅读 · 0 评论 -
flutte的EditText
TextField相当于Android中的EditText:TextField( decoration: new InputDecoration(hintText: "This is a hint"),// 提示语 )获取TextField的值: TextEditingController _name = TextEditingController();TextField( controller: _name,// 控制器 decoratio原创 2020-08-24 17:27:03 · 1919 阅读 · 0 评论 -
flutter的ListView例子
import 'package:flutter/material.dart';import 'package:english_words/english_words.dart';void main() => runApp(new MyApp());class MyApp extends StatelessWidget { @override Widget build(BuildContext context) {// final wordPair = new WordPair原创 2020-08-24 17:09:38 · 1920 阅读 · 0 评论 -
flutter如何实现点击事件
在Android中,您可以通过调用方法setOnClickListener将OnClick绑定到按钮等view上。在Flutter中,有两种方法:1.如果Widget支持事件监听,则可以将一个函数传递给它并进行处理。例如,RaisedButton有一个onPressed参数@overrideWidget build(BuildContext context) { return new RaisedButton( onPressed: () { print("click原创 2020-08-24 16:16:51 · 4240 阅读 · 1 评论 -
在Flutter如何实现ScrollView
在Android中,ScrollView允许您包含一个子控件,以便在用户设备的屏幕比控件内容小的情况下,使它们可以滚动。在Flutter中,最简单的方法是使用ListView。但在Flutter中,一个ListView既是一个ScrollView,也是一个Android ListView。ListView( children: <Widget>[ Text("abc1"), Text("abc2"), Text("a原创 2020-08-24 16:04:26 · 3580 阅读 · 0 评论 -
flutter如何监听Android Activity生命周期事件
在Android中,可以覆盖Activity的方法来捕获Activity的生命周期回调。在Flutter中可以通过挂接到WidgetsBinding观察并监听didChangeAppLifecycleState更改事件来监听生命周期事件。class LifecycleWatcher extends StatefulWidget { @override _LifecycleWatchState createState() => _LifecycleWatchState();}class原创 2020-08-24 15:33:40 · 2665 阅读 · 0 评论 -
flutter实现异步UI
小型应用基本难不倒MySQL数据库,一来访问量少,二来数据不多。但是企业级的应用,访问量大,更要命的是它的数据量大。比如一个应用可能也就两三千人使用,即使用它们同时并发访问,我想...原创 2020-08-23 16:13:39 · 2399 阅读 · 0 评论 -
startActivityForResult 在Flutter中等价于什么
Flutter中所有路由的Navigator类可用于从已经push到栈的路由中获取结果。 这可以通过等待push返回的Future来完成,也可以从then中获取返回的数据。获取返回的数据通过await push返回的Future完成,await必须在异步函数中完成:() async{ Map maps = await Navigator.push( context, MaterialPageRoute(原创 2020-08-22 23:54:42 · 2166 阅读 · 0 评论 -
在Flutter中给widget添加动画
在Android中,可以通过通过XML创建动画或在视图上调用View.animate()对视图进行动画处理。在flutter中,可以通过动画库给widget添加动画,将widget包装到Animation中。与Android相似,在Flutter中,有一个AnimationController控制器和一个Interpolator, 它是Animation类的扩展,如CurvedAnimation。将控制器和动画传递到AnimationWidget中,并告诉控制器启动动画。如一个FadeTransitio原创 2020-08-22 15:20:36 · 2412 阅读 · 0 评论 -
Flutter如何在布局中添加或删除组件
为什么要单独拿出这个来讲呢?在Android中,从父级控件调用addChild或removeChild就可以动态添加或删除View。 在Flutter中,因为widget是不可变的,所以没有addChild。但是,可以传入一个函数,该函数返回一个widget给父项,并通过布尔值控制该widget的创建。bool offstage = false; // 控制字段 void _toggle(){ setState(() { offstage = !offstage; })原创 2020-08-22 11:38:12 · 5796 阅读 · 0 评论 -
Flutter布局
在Android中,通过XML编写布局,但在Flutter中,只可以使用widget树来编写布局。排列其他widget的columns、 rows、 grids和其他布局。Flutter布局1.单个子元素的布局widget1.1.Container1.2. Align1.3.AspectRatiot1.4. Baseline1.5.ConstrainedBox1.6.Center1.7. Expanded1.8. Padding1.9. FittedBox1.10. FractionallySizedBo原创 2020-08-22 01:11:41 · 2050 阅读 · 0 评论 -
Flutter的Widget和Android中的View概念对比
Flutter的Widget等价于Android中的View。Android的View在绘制结束后,就不会重绘,直到调用invalidate时才会重绘。Flutter的widget是不可改变的,因此不能直接更新,而必须使用Widget的状态。Flutter的widget分为有状态和无状态两种。它们的核心特性是相同的,每一帧它们都会重新构建,不同之处在于有状态的Widget有一个State对象,它可以跨帧存储状态数据并恢复它。常见的StatelessWidget是Text。new Text( 'I li原创 2020-08-20 15:35:56 · 1981 阅读 · 0 评论 -
Flutter的JSON和序列化
1.概述许多移动或网页应用都使用 JSON 来处理类似与服务器交换数据的任务。Flutter中是禁止使用反射的。因此,Flutter中没有GSON或Jackson,在Flutter中是禁用的。因为这样的库需要使用运行时反射,而运行时反射会干扰Dart的_tree shaking_。默认的JSON.decode是将一个json格式的string 转化成一个Map<String,dynamic>类型的Map, 是无法直接换成Object的。官方推荐的使用Json的方式:直接使用Map,不转原创 2020-08-19 22:52:05 · 2046 阅读 · 0 评论 -
Android Studio的flutter_json_format插件使用
flutter-json-format插件可以根据JSON字符串,生成相应的对象。1.安装插件File>Settings…>plugins,搜索flutter_json_format插件并安装。。2.使用插件(1)建一个空类,右键点击,选择“Generate…”,打开以下窗口:(2)点击“flutter json format”,弹出一个输入框,在输入框中输入JSON字符串,然后点击“OK”:(3)点击“OK”后,就把对象生成好了,如下所示:/// name : "Jhon S原创 2020-08-19 17:14:09 · 2635 阅读 · 0 评论 -
Inspector工具浏览Flutter的widget树
Flutter框架使用widget作为核心构建块,从控件(文本、按钮、toggle等)到布局(居中、填充、行、列等)的任何内容都是widget。Inspector是用于可视化和浏览Flutter这些widget树的强大工具。使用Flutter开发,可能对于传统的app开发有点不习惯,尤其是在布局方面,传统的app开发,使用xml布局是很直观,很灵活的,到了Flutter时,可能由于要跨平台,就没有了,通通都用Widget在代码里里表示,那么如何查看我们用代码写出来的布局是怎样的呢?尤其是在我们在排查问题时原创 2020-08-17 12:16:57 · 2498 阅读 · 0 评论 -
Flutter尾随逗号
刚刚接触Flutter开发移动端应用,很好奇代码末尾总是会自动跟上一个逗号。后来才知道这个 ‘尾随逗号’是很有用的,但是它不是必须的。Flutter代码通常涉及构建相当深的树状数据结构,例如在一个build方法中,为了获得良好的自动格式化,建议采用可选的尾部逗号。添加方式:始终在函数、方法和构造函数的参数列表末尾添加尾随逗号,以便保留您的编码格式。 这将有助于自动格式化程序为Flutter样式代码插入适当的换行符。使用“尾随逗号”格式化:而没有使用“尾随逗号”的,则很不规整:上面对比还不算明显原创 2020-08-17 10:24:50 · 2219 阅读 · 0 评论 -
Flutter使用热重载加速开发
当你写好了一些代码,你希望运行一下,看看效果。那么最好的办法就是编译代码安装到手机上运行。但是Flutter重新编译一次的时间通常都很长,甚至长到有点无法忍受。为了更方便让你马上看到修改的结果,Flutter提供了热重载 技术,这种技术可以迅速将代码的变化映射到内存(仅仅是内存),然后你马上就可以看到效果了。这个热重载技术,并不会改变安装在手机上的文件。这就是免去了编译过程的长时间等待。那么如何操作呢?两种方式:(手机未安装过)首先安装app到手机上,那么一下次的修改,直接按闪电(热重载按钮),或者快原创 2020-08-17 09:58:08 · 2147 阅读 · 0 评论 -
Flutter引用外部包
Flutter外部包网站:https://pub.dev/Flutter使用pubspec文件管理应用程序的assets(资源,如图片、package等)。1.引用外部包的方法在pubspec.yaml,添加依赖项,如添加english_words包:dependencies: flutter: sdk: flutter english_words: ^3.1.02.安装依赖在Android Studio的编辑器视图中查看pubspec.yaml时,单击右上角的 Pack原创 2020-08-17 09:05:08 · 2932 阅读 · 0 评论 -
Ubuntu20.04搭建flutter开发环境
根据我的实践分享flutter开发环境的搭建过程。假设你已经搭建好Android的开发环境了。1.下载Flutter SDK大家可以在github(https://github.com/flutter/flutter)上下载Flutter release版本。也可以直接下载SDK的源码,我这里就是直接将它的主分支源码源库拉下来:~$ git clone https://github.com/flutter/flutter.git2.Android Studio安装插件File>Settin原创 2020-08-10 22:20:38 · 3691 阅读 · 0 评论