![](https://img-blog.csdnimg.cn/20190902142001918.png?x-oss-process=image/resize,m_fixed,h_224,w_224)
Flutter
文章平均质量分 51
id-whc
这个作者很懒,什么都没留下…
展开
-
Flutter聊天布局之图片&视频上传、显示、保存到相册
接上文本文主要对聊天布局内的图片及视频的上传、显示和保存到相册进行简单开发。原创 2022-08-30 15:45:30 · 2437 阅读 · 1 评论 -
Flutter简单聊天界面布局及语音录制播放
总结一下这两天遇到的坑及简单的聊天界面布局和语音录制和播放功能。原创 2022-08-24 16:13:23 · 3387 阅读 · 3 评论 -
Flutter解决ListView顶部留白
Flutter解决ListView顶部留白原创 2022-08-16 14:42:25 · 910 阅读 · 0 评论 -
flutter实现底部弹出框
flutter实现底部弹出框。原创 2022-08-16 11:57:14 · 1622 阅读 · 0 评论 -
一个基于Flutter1.20.0/Dart2.9.0的热点聚合新闻APP项目
现在已经完成了热点词汇、热搜排行API接口全部来自于:https://www.enlightent.cn/项目部分代码:import 'package:dio/dio.dart';import 'package:flutter/material.dart';import 'dart:math' as math;import 'package:random_string/random_string.dart';import 'package:fluttertoast/flut..原创 2020-08-18 15:12:50 · 843 阅读 · 0 评论 -
Flutter时间转换分/秒转为时分
我想将7200秒转换为2小时0分解决方案如下://时间转换 将秒转换为小时分钟String _durationTransform(int seconds) { var d = Duration(seconds:seconds); List<String> parts = d.toString().split(':'); return '${parts[0]}小时${parts[1]}分';}如果你的参数是分钟 则把Duration的参数改为minutes即可...原创 2020-07-03 11:51:55 · 8038 阅读 · 0 评论 -
Flutter事件总线event_bus
在Flutter中,一个页面可能有多个分离的组件组成假设:我们有一个页面叫A,在A页面中引入了A1,A2,A3三个子页面,我们需要在A页面中调用A1页面中的弹出框或方法要怎么实现?第一种方法 实例化对象,在A的页面中实例化A1去调用A1的弹出框组件,那这种方法一般不好实现,因为A1在init的时候可能要加载从A页面过来的数据和context,所以不推荐这样做。那就可以用到event_bus,简介:顾名思义 event->事件 bus->可以理解为总线,交给事件总线去做,可.原创 2020-05-21 10:22:41 · 3866 阅读 · 2 评论 -
Flutter状态管理provider
在没有状态管理之前,我们使用setState去修改同步渲染本页面的数据,比如在一个Tab页,我们点击一个按钮,让数字+1,使用setState即可完成。那我们想要再另外一个和本页面完全不相关的Tab页也完成同步动作,这个时候就要使用到状态管理了。我们首先介绍providerprovider是官方提供的一种状态管理,使用起来较简单1、创建一个继承于ChangeNotifier的方法类,在这个类去实现一些增删改查的操作。例如:import 'package:flutter/mater.原创 2020-05-21 09:48:45 · 1072 阅读 · 0 评论 -
Flutter无法加载webview.trying to create a view with an unregistered type, unregistered view type:
在使用flutterwebview插件的时候,启动报trying to create a view with an unregistered type, unregistered view type:解决方案:在info.plist加入<key>io.flutter.embedded_views_preview</key>官方已经有写:webview为http地址请求的时候 ,无法加载页面 也不报错还需要加入:<key>NSAppTrans原创 2020-05-19 09:53:54 · 2774 阅读 · 2 评论 -
AutomaticKeepAliveClientMixin保持页面状态
import 'package:flutter/material.dart';import 'tabs/Cart.dart';import 'tabs/Category.dart';import 'tabs/Home.dart';import 'tabs/User.dart';class TabsPage extends StatefulWidget { TabsPage({Key key}) : super(key: key); @override _TabsPageStat.原创 2020-05-12 11:31:39 · 1157 阅读 · 0 评论 -
Flutter调用原生相机和相册选择并使用Dio3上传到服务器
用到的组件 dio: ^3.0.2 image_picker: ^0.6.0+9import 'dart:io';import 'package:flutter/material.dart';import 'package:image_picker/image_picker.dart';import 'package:dio/dio.dart';class Image...原创 2020-04-29 15:24:17 · 1248 阅读 · 0 评论 -
Flutter之RefreshIndicator下拉刷新及ScrollController上拉加载更多
用到的第三方组件:dio: ^3.0.9用到的官方组件:RefreshIndicator、ScrollControllerimport 'package:flutter/material.dart';import 'package:dio/dio.dart';class RefreshIndicatorPage extends StatefulWidget { ...原创 2020-03-17 16:33:12 · 4524 阅读 · 0 评论 -
Flutter之get/post网络请求数据并渲染页面
1、Flutter Json与Map类型转换import 'dart:convetr'json.encode();//Map转Jsonjson.decode();//Json转Map2、Utf8解决乱码Utf8Decoder decode = new Utf8Decoder();decode.convert(response.bodyBytes)3、Http组件h...原创 2020-03-16 13:00:16 · 6202 阅读 · 0 评论 -
Flutter之Dialog
1、AlertDialog _alertDialog() async { var alertDialogs = await showDialog( context: context, builder: (context) { return AlertDialog( title: Text("提示"), ...原创 2020-03-12 15:33:10 · 12687 阅读 · 0 评论 -
Flutter设置横线
直接使用Divider()组件即可就是这样的效果原创 2020-03-12 14:46:29 · 5587 阅读 · 0 评论 -
flutter_cupertino_date_picker的使用
引用的插件: date_format: ^1.0.8 flutter_localizations: sdk: flutter flutter_cupertino_date_picker: ^1.0.12import 'package:flutter/material.dart';import 'package:flutter_cupertino_date_pick...原创 2020-03-10 14:31:34 · 2538 阅读 · 0 评论 -
Flutter之表单组件
目录一、Flutter 常用表单介绍二、TextField 文本框组件 TextField 表单常见属性:三、Checkbox、CheckboxListTile 多选框组件 Checkbox 常见属性:四、Radio、RadioListTile 单选按钮组件 Radio 常用属性:五、开关 Switch一、Flutter 常用表单介绍Flutter 中常见的表单有 Te...原创 2020-03-06 15:02:39 · 736 阅读 · 0 评论 -
Flutter之按钮组件
1、常用按钮常用按钮 介绍 RaisedButton 凸起的按钮,其实就是 Material Design 风格的 Button FlatButton 扁平化的按钮 OutlineButton 线框按钮 IconButton ...原创 2020-03-04 15:25:41 · 382 阅读 · 0 评论 -
Flutter之侧边栏Drawer、DrawerHeader、UserAccountsDrawerHeader
Drawer是Scaffold的子组件,在Scaffold传入drawer参数可以定义左侧栏,传入endDrawer可以定义右侧边栏。除了Drawer还有DrawerHeader用来定义侧边栏的头部部分,也可以使用Flutter官方的UserAccountsDrawerHeader来布局侧边栏的头部。原创 2020-03-04 11:06:11 · 1561 阅读 · 0 评论 -
Flutter之自定义AppBar及顶部导航切换
AppBar常用属性属性 描述 leading 在标题前面显示的一个控件,在首页通常显示应用的logo;在其他界面通常显示为返回按钮 title 标题,通常显示为当前页面的标题,是一个widget actions 通常使用IconButton来表示,可以放按钮组 bottom 通常放tabBar,标题下面显示一个Tab导航栏 backgroun...原创 2020-02-28 12:07:54 · 3133 阅读 · 0 评论 -
Flutter中的普通路由&普通路由传值和命名路由&命名路由传值、返回根目录
在Flutter中 我们通过Navigator组件来管理路由导航Navigator.push和Navigator.popFlutter给我们提供了两种配置路由的跳转方式:基本路由、命名路由。一、普通路由以上篇文字的Home组件为例,在onPressed监听事件中设置跳转的方法。Home.dartimport 'package:flutter/material.dart...原创 2020-02-18 12:03:12 · 492 阅读 · 0 评论 -
Flutter之BottomNavigationBar和页面跳转
BottomNavigationBar是底部导航栏,是Scaffold的参数常用参数:参数名 功能 items List<BottomNavigationBarItem>的集合 iconSize icon大小 onTap 点击事件 fixedColor 选中的颜色 type ...原创 2020-02-17 16:48:10 · 2735 阅读 · 0 评论 -
Flutter页面布局之Wrap组件
Wrap可以实现流布局,单行的Wrap跟Row表现几乎一致,但Row与Column都是单行单列的,Wrap则突破了这个限制,mainAxis上空间不足时,则向crossAxis上扩展显示。常用属性:属性 说明 direction 横向纵向的排序方式 默认横向 spacing 横轴的间距 runSpacing 纵轴的间距 ...原创 2020-02-17 14:15:41 · 412 阅读 · 0 评论 -
Flutter之Card组件
Card组件是卡片组件,内容可以由列表的widget组成,Card组件具有阴影圆角的功能。常用属性:属性 说明 margin 外边距 elevation 阴影值的深度 child 子元素 import 'package:flutter/material.dart';void main() => runApp(MyApp());c...原创 2020-02-17 11:23:15 · 2476 阅读 · 0 评论 -
Flutter页面布局之Stack层叠组件
Stack表示堆的意思,我们可以使用Stack或者结合Align或Positond实现定位布局Stack常用属性:属性 说明 alignment 配置所有子元素的显示位置 children 子元素 结合Positioned组件来控制每个子元素的显示位置属性 说明 top 子元素...原创 2020-02-17 10:34:57 · 443 阅读 · 0 评论 -
Flutter页面布局之Padding、Row、Column、Expanded
目录1、Padding组件2、Row水平布局组件3、Column垂直布局组件4、Expanded弹性布局5、小DemoPadding组件padding是布局中最常用的布局,因为Flutter中有好多组件并没有padding属性,所以要用padding组件来包裹起来。常用属性:padding和childimport 'package:flutter/materi...原创 2020-02-11 14:47:51 · 1419 阅读 · 0 评论 -
Flutter页面布局之百分百布局FractionallySizedBox
import 'package:flutter/material.dart';class Test extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( home: Scaffold( body: Container(...原创 2019-10-12 17:17:13 · 5470 阅读 · 0 评论 -
Flutter之图片placeholder插件&图片缓存插件
一、图片placeholder插件的使用:首先要去镜像仓库安装transparent_image插件->插件直达import 'package:flutter/material.dart';import 'package:transparent_image/transparent_image.dart';void main() => runApp(MyApp());...原创 2019-09-25 14:27:50 · 2085 阅读 · 0 评论 -
Flutter TextField详解
实现TextField说简单也简单,说有坑,坑也不小,下面从易到难介绍一下使用1.最简单的就是无参数调用构造方法:TextField()2.光有输入框还不行,还得获取其中的内容,所以需要传递controller:import 'package:flutter/material.dart';class TextFieldPage extends StatelessWid...转载 2019-09-24 16:19:05 · 620 阅读 · 0 评论 -
Flutter之ListViewBuilder组件的使用
适合在多数据的列表下使用。import 'package:flutter/material.dart';void main()=>runApp(MyApp());class MyApp extends StatelessWidget { MyApp({Key key}) : super(key: key); @override Widget build(B...原创 2019-09-24 10:33:41 · 10938 阅读 · 1 评论 -
Flutter之FutureBuilder组件的使用
import 'dart:convert';import "package:http/http.dart" as http;import 'package:flutter/material.dart';void main() => runApp(MyApp());class MyApp extends StatefulWidget { @override State&...原创 2019-09-02 14:18:31 · 745 阅读 · 0 评论 -
Flutter之基础组件详解Widget、MaterialApp、Scaffold、Container、Text、Image、ClipOval、ListView...持续更新中
目录目录一、根组件Widget二、顶层组件MaterialApp三、基础布局组件Scaffold四、容器组件Container五、文字组件Text六、图片组件Image七、圆形裁切组件ClipOval八、ListView组件一、根组件Widget简介:Widget是所有组件的基类 所有组件都继承自它要想自定义组件必须继承下边两个类中的其中一个:..................原创 2019-08-27 13:54:26 · 2673 阅读 · 1 评论 -
Flutter之目录结构讲解
配置好Flutter和Dart的环境变量之后就可以使用AndroidStudio创建一个Flutter项目了(省略创建Flutter项目过程).idea:IDE的生成的一些配置,不用管android:创建项目生成的Android原生代码build:项目编译目录ios:创建项目生成的ios原生代码lib:(重点)我们写的代码都在这里边,以.dart结尾。test:创建项目...原创 2019-08-22 13:29:51 · 1332 阅读 · 0 评论 -
Flutter之滑动列表PageView
class PageView extends StatefulWidget { /// Creates a scrollable list that works page by page from an explicit [List] /// of widgets. /// /// This constructor is appropriate for page views wi...原创 2019-09-26 17:22:09 · 921 阅读 · 0 评论 -
Flutter之底部导航BottomNavigationBar
BottomNavigationBar是Flutter的一个底部导航BottomNavigationBar({ Key key, @required this.items, 接受一个BottomNavigationBarItem=>(icon默认图标、title底部导航文字、actionIcon激活时候的图标、backgroundColor背景颜色) this.onTap...原创 2019-09-26 17:23:21 · 665 阅读 · 0 评论 -
Flutter之轮播图插件flutter_swiper
https://pub.flutter-io.cn/packages/flutter_swiper#-installing-tab-插件地址当前最新版本:flutter_swiper: ^1.1.6Swiper({ this.itemBuilder, this.indicatorLayout: PageIndicatorLayout.NONE, /// this....原创 2019-09-26 17:26:15 · 852 阅读 · 0 评论 -
Flutter之解决组件顶部padding
在Flutter的一些组件中像ListView布局的时候,顶部会预留出一部分;比如这样:解决方法:在布局中使用MediaQuery.removePadding(context,context,child:null,removeTop: true)即可...原创 2019-09-26 17:27:36 · 1805 阅读 · 2 评论 -
Flutter之自定义AppBar并实现滑动渐变
import 'package:flutter/material.dart';import 'package:flutter_swiper/flutter_swiper.dart';//滚动最大距离const APPBAR_SCROLL_OFFSET = 100;class HomePage extends StatefulWidget { @override _TabNavi...原创 2019-09-26 17:28:18 · 2445 阅读 · 0 评论 -
Flutter之ExpansionTile可展开的列表
源码class ExpansionTile extends StatefulWidget { /// Creates a single-line [ListTile] with a trailing button that expands or collapses /// the tile to reveal or hide the [children]. The [initial...原创 2019-10-09 17:16:24 · 3132 阅读 · 0 评论 -
Flutter页面布局之GridView
简介:GridView是Flutter中用于展示网格布局的widget,我们通常使用GridView.count构造函数来创建一个GridViewdemo:import 'package:flutter/material.dart';void main() => runApp(MyApp());const CITY_NAMES = { '北京':['东城区','西城区...原创 2019-10-09 17:31:54 · 436 阅读 · 0 评论