aiguangyuan
要全身心的投入,程序才会有些感觉!
展开
-
Flutter中各种对话框的使用
Flutter提供了多种对话框组件供开发者使用,以下代码中演示了常见对话框的实现,供大家参考,欢迎大家复制粘贴和吐槽。import 'package:flutter/material.dart';// pubspec.yaml 中配置 fluttertoast: ^8.0.7import 'package:fluttertoast/fluttertoast.dart'; void main() { runApp(MyApp());}// 抽离成一个单独的组件class MyApp原创 2021-12-12 23:18:57 · 2975 阅读 · 0 评论 -
Flutter 中使用 Socket.io 实现即时通信
1. 安装插件dependencies: socket_io_client: ^0.9.12在pubspec.yaml中配置保存后,在VS Code环境中会自动下载依赖包。如果无法正常下载,执行flutter pub get。2. 引入插件在需要用到的该插件的文件中引入插件包。import 'package:socket_io_client/socket_io_client.dart';3. 使用插件import 'package:flutter/m....原创 2021-02-15 15:00:29 · 3741 阅读 · 11 评论 -
Flutter中项目国际化
1. 按装插件dependencies: flutter: sdk: flutter # 国际化 flutter_localizations: sdk: flutterpubspec.yaml中配置保存后,在VS Code环境中会自动下载依赖包。如果无法正常下载,执行flutter pub get。2.引入插件// main.dart // 引入本地化的包import 'package:flutter_localizations/flu....原创 2021-02-15 13:04:56 · 1587 阅读 · 2 评论 -
Flutter在IOS平台实现消息推送
1. 配置项目的包名2. 申请IOS生产证书IOS的生产证书在极光推送IOS平台配置时需要用到,完成这个证书的创建过程比较复杂,以下分为三个阶段来完成。第一步:创建标识符。登录苹果开发者中心,选择 证书/标识符/资料 。添加标识符。选择标识符类型,点击继续。输入描述及包名,点击继续。点击继续之前,记得勾选推送消息功能。至此,标识符添加完毕,在标识符列表就可以看到了。第二步:生成钥匙串文件。打开苹果电脑的钥匙串访问功能。....原创 2021-02-15 11:26:43 · 3315 阅读 · 0 评论 -
Flutter在Android平台实现消息推送
1. 极光推送平台申请应用1. 注册极光推送平台;https://www.jiguang.cn/push2. 极光推送平台创建应用;填写应用程序名称。选择平台,选择服务,点击下一步。需要输入应用包名(Android平台),选择渠道,点击下一步。如果是IOS平台,设置的时候会麻烦一些,还需要配置相关的证书,如下图所示。完成上面的操作在应用管理中就可以看到创建的应用程序了。点击“应用设置”,就可以看到应用信息了,其中AppKey非常重要,在项目中使..原创 2021-02-14 10:53:48 · 2522 阅读 · 5 评论 -
Flutter 中使用原生功能在IOS中的权限配置
Flutter项目中在使用原生的一些功能时,必须要在Info.plist文件中配置使用权限,否则在提交审核时无法通过。1. 添加权限打开配置权限的文件,路径为:ios▸Runner▸ Info.plist。其中key为所指的权限,string为权限的说明,如下图所示:2. 常见权限<key>NSPhotoLibraryUsageDescription</key><string>访问相册</string><key&g..原创 2021-02-13 21:35:32 · 2887 阅读 · 0 评论 -
Flutter中对IOS项目进行真机调试、项目打包、提交审核
1. 真机调试1. 准备工作(1). 拥有苹果开发者账号个人(每年99美元)、公司(每年99美元)、企业(每年299美元)账号均可;(2). 能上网的苹果电脑 MacOS(苹果虚拟机也可以)、Xcode开发工具、IOS 设备(手机或平板);2. 配置调试设备(1). 手机连接电脑,打开 iTunes 软件,点击序列号字母处,获取 iPhone 手机的 UDID;下图为点击后的效果:(2). 打开苹果开发者账号,配置调试用的iPhone手机的UDID;在设备管理中.原创 2021-02-13 17:47:20 · 9719 阅读 · 11 评论 -
Flutter中修改Android项目的应用名称、应用图标、应用启动画面
1. 修改应用名称在 android ▸ app ▸ src ▸ main▸ AndroidManifest.xml 中修改 android:label="你的应用名称"。2. 修改应用图标在 android ▸ app ▸ src ▸ res ▸ mipmap 下面对应的文件夹中替换相应图片。上图左侧红框里多个文件夹里的图片都要进行替换,目的是为了适配多种屏幕显示器,在替换时一定要保持原有图片的尺寸大小,所以必须要准备多个大小不同的PNG格式的图标。3. 修改启动画..原创 2021-02-11 21:11:11 · 1423 阅读 · 1 评论 -
Flutter中打包Android项目及升级Android项目
1. 打包Android项目1. 用Android Studio 打开Flutter项目中的 android 文件夹;2. 选择生成签名后的APK;选择打包成APK,没有系统版本的限制。首次打包时,需要创建新的 Key Store。按要求填写相信关息,生成新的Key Store。以下是Key Store生成完成后的状态。选择打包的形式。......原创 2021-02-11 01:37:43 · 3376 阅读 · 8 评论 -
Flutter中实现微信支付流程
1. 微信支付流程上面的流程图来自于官方,看起来比较复杂,其实大部分的流程都是由官方自己完成的,下面是一个简易的流程图示例:简要的说明一下:步骤1:用户在商户APP中选择商品,提交订单,选择微信支付;步骤2:商户后台收到用户支付单,调用微信支付统一下单接口;步骤3:微信统一下单接口返回正常的prepay_id,再按签名规范重新生成签名后,将数据传输给APP。参与签名的字段名为appid,partnerid,prepayid,noncestr,timestamp,package;原创 2021-02-10 18:02:41 · 3723 阅读 · 0 评论 -
Flutter 接入微信支付之前的准备工作
1. 微信支付必备内容1. 企业营业执照、对公账户;2. 在微信平台申请成功后生成的相关信息:(1). APPID:应用 APPID。必须配置,开户邮件中可查看;(2). MCHID:微信支付商户号。必须配置,开户邮件中可查看;(3). KEY:API 密钥。参考开户邮件设置,必须配置,登录商户平台自行设置;2.开放平台商户申请接入......原创 2021-02-10 14:13:51 · 2138 阅读 · 2 评论 -
Flutter中实现支付宝支付流程
1. 支付宝支付流程上面的图来自官方的文档,看起来比较繁琐,下面的图是流程的简化版。简单解释一下流程步骤:1. 当用户点击支付宝支付的时候,客户端请求App的服务端接口,此时,App的服务端会请求支付宝的服务器获得生成的签名信息返回给客户端;2. 客户端获取生成的签名信息以后,调用Flutter提供的支付宝SDK,传入签名信息,调起支付宝支付, 用户输入完密码完成支付以后,支付宝的服务器首先会给App返回支付结果,同时,支付宝的服务器还会异步通知App的服务器进行订单更新。.原创 2021-02-08 00:15:58 · 7526 阅读 · 4 评论 -
Flutter 接入支付宝支付之前的准备工作
1. 打开支付宝开放平台,点击网页&移动应用;如果没有入驻成为开发者,请先注册。应用类型分为两大类:第三方应用、自用型应用。第三方应用:适用于服务商, 为商户开发应用,拓展商户使用,目前仅支持小程序的三方接入,接入小程序前,必须先申请小程序的公测。自用型应用:使用开放的功能,为自己或自己公司开发应用,自研型应用分为网页/移动、AR(仅企业支付宝)、小程序(仅企 业支付宝)、生活号。网页&移动应用和第三方应用的区别是一个是自己使用,一个是帮助第三方去签约相关产品。.原创 2021-02-06 00:47:00 · 1294 阅读 · 4 评论 -
Flutter 中使用url_launcher打开外部浏览器 、打开外部应用、拨打电话、发送短信、发送邮件
1. 安装插件dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0.10 flutter_html: ^原创 2021-01-31 23:58:21 · 2974 阅读 · 7 评论 -
Flutter应用程序版本更新与自动升级配置方法
1. 应用程序升级流程由于在 IOS中没法直接下载安装,如果版本不一致则直接跳转到IOS应用对应的应用市场就可以了,所以本文仅介绍Android App的升级流程。Android App升级流程:1. 获取本地版本号;2. 请求服务器获取服务器版本号;3. 如果本地版本和服务器版本不一致则提示升级,弹窗提示用户是否更新;4. 用户确定升级,调用文件传输方法下载apk文件;5. 监听下载进度;6. 下载完成打开apk进行安装。2. Android 升级 App 涉...原创 2021-01-31 22:04:14 · 8043 阅读 · 7 评论 -
Flutter中使用barcode_scan_fix实现二维码扫描
1. 安装插件dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0.10 flutter_html: ^原创 2021-01-25 23:09:24 · 2565 阅读 · 0 评论 -
Flutter中使用shared_preferences本地存储
1. 安装插件配置shared_preferences 插件。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio.原创 2021-01-24 21:04:19 · 1637 阅读 · 0 评论 -
Flutter中使用connectivity实现网络检测
1. 安装插件配置connectivity插件。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0..原创 2021-01-24 19:03:11 · 4388 阅读 · 2 评论 -
Flutter中使用chewie实现视频播放
1. 安装插件配置chewie插件。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0.10 ..原创 2021-01-24 17:26:50 · 4663 阅读 · 3 评论 -
Flutter中使用image_picker拍照并上传
1. 安装插件配置image_picker插件。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 flutter_h..原创 2021-01-24 00:19:58 · 2368 阅读 · 0 评论 -
Flutter中使用amap_location获取地理位置信息
本文所介绍的获取地理位置信息的Flutter插件是基于高德地图的,所以前期需要针对高德平台做一些准备工作。1. 申请高德地图的KEY1. Android版本申请参考:http://lbs.amap.com/api/android-sdk/guide/create-project/get-key2. IOS版本申请参考:http://lbs.amap.com/api/ios-sdk/guide/create-project/get-key2. 项目中集成高德地图1. Andr.原创 2021-01-11 01:01:43 · 5060 阅读 · 7 评论 -
Flutter中使用device_info获取设备信息
1. 安装插件配置device_info插件。dependencies: flutter: sdk: flutter # 设备信息 device_info: ^1.0.0在pubspec.yaml中配置保存后,在VS Code环境中会自动下载依赖包。如果无法正常下载,执行flutter pub get。2. 引入依赖在需要用到的该插件的文件中引入插件包。// 引入插件import 'package:device_info/device_i.....原创 2021-01-10 22:22:29 · 6885 阅读 · 0 评论 -
Flutter中使用flutter_inappwebview加载远程的html文件
1. 安装插件配置flutter_inappwebview插件。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 d..原创 2021-01-09 23:57:57 · 8114 阅读 · 0 评论 -
Flutter中使用flutter_html解析html文件
1. 安装插件配置flutter_html插件。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 flutter_swiper: ^1.1.6 fluttertoast: ^7.1.6 http: ^0.12.2 dio: ^3.0..原创 2021-01-09 23:26:44 · 12620 阅读 · 1 评论 -
Flutter中实现下拉刷新与上拉加载更多
1. 下拉刷新Flutter中提供了组件 RefreshIndicator用于下拉刷新。其基本的实现方法是在该组件添加onRefresh事件,当用户下拉刷新时会触发该事件,在该事件中可以用调用一个延时任务Future.delayed( ),在延时任务的回调中重新请求数据即可。2. 上拉加载更多Flutter中主要通过使用 ListView.builder( )添加控制器来实现上拉加载更多。其基本的实现方法是在该组件里添加控制器,在组件初始化时实例化ScrollController..原创 2021-01-08 00:52:21 · 7881 阅读 · 2 评论 -
Flutter中使用dio实现网络请求
1. 数据类型转换服务端请求回来的数据都是JSON类型的,为了可以对数据进行遍历,必须要转成Map类型的。有格式转换的文件中需要引入转换的依赖包。import 'dart:convert';Map类型转换成JSON类型。Map userInfo={"username":"张三","age":20};print(userInfo is Map);// true var user = json.encode(userInfo);// 把Map类型转为Json类型print(u原创 2021-01-05 23:24:39 · 2431 阅读 · 0 评论 -
Flutter中使用http实现网络请求
1. 数据类型转换服务端请求回来的数据都是JSON类型的,为了可以对数据进行遍历,必须要转成Map类型的。有格式转换的文件中需要引入转换的依赖包。import 'dart:convert';Map类型转换成JSON类型。Map userInfo={"username":"张三","age":20};print(userInfo is Map);// truevar user = json.encode(userInfo);// 把Map类型转为Json类型print(us原创 2021-01-05 22:22:45 · 1491 阅读 · 1 评论 -
Flutter中自定义提示框
1. 弹出提示框定义模态框组件,代码如下:import 'package:flutter/material.dart';class MyDialog extends Dialog{ final String title; final String content; // 构造函数赋值 MyDialog({this.title="",this.content=""}); @override Widget build(BuildContext c原创 2021-01-04 22:49:58 · 1997 阅读 · 0 评论 -
Flutter中使用flutter_swiper实现轮播图
1. 安装插件配置flutter_swiper。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2 # 配置轮播图插件 flutter_swiper: ^1.1.6在pubspec.yaml中配置保存后,在VS Code环境中会自动下载依赖原创 2021-01-03 22:38:36 · 9241 阅读 · 1 评论 -
Flutter中使用flutter_cupertino_date_picker选择时间
1. 安装插件在 pubspec.yaml 中配置 flutter_cupertino_date_picker。dependencies: flutter: sdk: flutter flutter_localizations: sdk: flutter date_format: ^1.0.6 flutter_cupertino_date_picker: ^1.0.26+2配置保存后,在VS Code环境中会自动下载依赖包。如果无法正常下载,执行flut..原创 2021-01-02 13:49:17 · 2410 阅读 · 0 评论 -
Flutter中日期组件DatePicker及组件汉化
Flutter提供了DatePicker组件进行时间选择。日期组件及时间组件代码示例:import 'package:flutter/material.dart';// 第三方插件,需要提前配置import 'package:date_format/date_format.dart';class DatePickerPage extends StatefulWidget { DatePickerPage({Key key}) : super(key: key);原创 2021-01-02 13:15:49 · 2631 阅读 · 9 评论 -
Flutter中的日期格式转换
1. Flutter中的日期转换// 初始化当前日期DateTime _nowDate = DateTime.now();// 获取当前时间print(_nowDate);// 2021-01-01 18:18:37.522021// 获取当前时间戳print(_nowDate.millisecondsSinceEpoch);// 1609496743946// 将时间戳转为格式化的时间print(DateTime.fromMillisecondsSinceEpoch(1609原创 2021-01-02 12:08:10 · 5572 阅读 · 0 评论 -
Flutter中表单组件综合运用实例
前面介绍了Flutter的各个表单组件的运用,现将这些组件用来实现一个综合练习。实现的效果图如下:以下是代码实现,供大家参考:import 'package:flutter/material.dart';class FormPage extends StatefulWidget { FormPage({Key key}) : super(key: key); @override _FormPageState createState() => _FormPa原创 2021-01-01 17:49:34 · 620 阅读 · 0 评论 -
Flutter中的开关组件Switch
Flutter中用Switch来表示开关组件。主要属性如下:1. value 启用时的值;2. onChanged 改变时触发的事件;3. activeColor 启用时的颜色;代码示例:import 'package:flutter/material.dart';class SwitchPage extends StatefulWidget { SwitchPage({Key key}) : super(key: key); @override原创 2021-01-01 16:34:49 · 4382 阅读 · 0 评论 -
Flutter中的多选按钮组件Checkbox
Flutter 中的多选按钮组件有两种。1.Checkbox多选按钮,一般用来表现一些简单的信息。常用属性如下:(1).value 多选的值;(2).onChanged 选择改变触发的事件;(3).activeColor选中时的颜色;(4).checkColor选中后对号的颜色;2.CheckboxListTile包含更多信息的多选项,提供多种配置信息的属性,可以表现更丰富的信息。常用的属性如下:(1).value 多选的值;(2)......原创 2021-01-01 16:15:48 · 3752 阅读 · 0 评论 -
Flutter中的单选按钮组件Radio
Flutter 中的单选按钮组件有两种。1. Radio 单选按钮,一般用来表现一些简单的信息。常用属性如下:(1).value 单选的值;(2).onChanged 选择改变触发的事件;(3).activeColor选中时的颜色;(4).groupValue多个按钮选择组的值;2.RadioListTile 包含更多信息的单选项,提供多种配置信息的属性,可以表现更丰富的信息。常用的属性如下:(1).value 单选的值;(2).o......原创 2021-01-01 15:47:39 · 7655 阅读 · 2 评论 -
Flutter中的文本输入框组件TextField
Flutter中的文本输入框使用TextField 这个组件来表示。主要的属性如下:1.原创 2021-01-01 14:12:03 · 7336 阅读 · 0 评论 -
Flutter中的按钮组件Button
Flutter提供了丰富的按钮组件可以让我们快速的构建UI界面。常见的按钮组件如下:1.RaisedButton :凸起的按钮;2.FlatButton :扁平化的按钮;3. OutlineButton:线框按钮;4. IconButton :图标按钮;5. ButtonBar:按钮组;6. FloatingActionButton:浮动按钮;按钮组件常见的属性:1.onPressed按下按钮时触发的回调方法,为必填参数,如果值为null 表示禁用按钮,.......原创 2020-12-28 22:52:05 · 4472 阅读 · 2 评论 -
Flutter中的抽屉组件Drawer
1. 配置抽屉组件1. drawer 左侧抽屉。值的类型为Widget;2.endDrawer 右侧抽屉。值的类型为Widget;代码示例:import "package:flutter/material.dart";class CategoryPage extends StatefulWidget { CategoryPage({Key key}) : super(key: key); _CategoryPageState createState() => .原创 2020-12-27 20:04:06 · 1551 阅读 · 0 评论 -
Flutter自定义 TabBar
TabBar常用于放在AppBar中,以标签页的形式展示同一个页面不同内容的主题标签。常见的属性如下:1. tabs 标签组。值的类型为Widget列表;2. controller 标签控制器。值的类型为TabController;3. isScrollable 标签组是否可以滚动。值的类型为bool;4. indicatorColor 指示器的颜色。值的类型为Colors;5. indicatorWeight 指示器权重,即显示高度。值的类型为double;6. indicat原创 2020-12-27 15:54:22 · 4973 阅读 · 2 评论