Flutter
Flutter实战
Flutter&Python&Test
遇到问题,解决问题,仅此而已.
展开
-
dart里的异步示例
对比future和async/await原创 2022-11-29 10:44:31 · 281 阅读 · 0 评论 -
Flutter-RadioList控件示例
【代码】Flutter-RadioList控件示例。原创 2022-11-12 10:03:24 · 925 阅读 · 0 评论 -
Flutter 3.X的Provider最简用法
Flutter 3.X Provider最简用法。原创 2022-08-10 12:04:24 · 593 阅读 · 0 评论 -
Flutter入门代码极简说明
flutter入门脚本注释原创 2022-07-23 16:48:19 · 340 阅读 · 0 评论 -
Flutter - 使用Provider进行状态管理
定义Provider类: current_index_provider.dartimport 'package:flutter/material.dart';class CurrentIndexProvider with ChangeNotifier { int currnetIndex = 0; changeindex(int newIndex){ currnetIndex = newIndex; notifyListeners(); }}在main中初始化prov原创 2021-10-12 08:56:17 · 339 阅读 · 0 评论 -
2021-Flutter调用相册上传图片(头像)
添加权限ios版本,在info.plist中添加,防止模拟器上使用相册和相机闪退<key>NSCameraUsageDescription</key><string>cameraDesciption</string><key>NSPhotoLibraryUsageDescription</key><string>photoLibraryDesciption</string>第三方库 im原创 2021-09-25 09:39:08 · 1395 阅读 · 0 评论 -
关于Dart语言中的单线程异步执行
正常情况下,一个 Future 异步任务的执行是相对简单的:在声明一个 Future 时,Dart 会将异步任务的函数执行体放入事件队列,然后立即返回,后续的代码继续同步执行。而当同步执行的代码执行完毕后,事件队列会按照加入事件队列的顺序(即声明顺序),依次取出事件,最后同步执行 Future 的函数体及后续的 then。这意味着,then 与 Future 函数体共用一个事件循环。而如果 Future 有多个 then,它们也会按照链式调用的先后顺序同步执行,同样也会共用一个事件循环。then 会在原创 2021-07-06 15:20:53 · 352 阅读 · 1 评论 -
Flutter获取Json数据并保存
原文源码下载步骤利用现有的设计,拷贝一个机票应用的模板app : git clone https://github.com/cybdom/flight_app_ui在lib目录下,新建一个models目录,在其中建个新文件users.dart class UsersModel { int id; String name; String userName; String email; String phone; UsersModel( this.id,原创 2021-05-25 14:22:37 · 865 阅读 · 0 评论 -
从0开始构建一个有服务APP
1. 创建服务器数据库登录服务器,确认是否装好了sqlite3,输入命令 sqlite3如果未安装,则安装sqlite3: apt-install sqlite3建立数据库: sqlite3 practiceServer.db检查是否成功 :sqlite> .databases main: /root/practiceServer.db建立数据表:CREATE TABLE TIKU(ID INTEGER PRIMARY KEY AUTOINCREMENT,TITLE原创 2021-05-17 14:16:20 · 306 阅读 · 0 评论 -
Flutter web接收文件上传到服务器
爬了两天的坑,终于找到了flutter web上传文件的方法.dio只适合移动端,在web端会报错无法使用.需要下载的第三方库:http: ^0.12.0+2flutter web代码import 'package:flutter/material.dart';import 'package:http/http.dart' as http;import 'dart:async';import 'package:http_parser/原创 2021-04-27 15:35:40 · 1734 阅读 · 0 评论 -
Flutter web打包后,访问页面显示空白
原因Flutter在运行和构建Web应用程序时,可以在两个不同的渲染器之间进行选择。这两个渲染器是:HTML。CSS,Canvas元素和SVG元素。 该渲染器的下载大小较小。Canvaskit。使用Skia编译为WebAssembly并使用WebGL渲染。 该渲染器与Flutter移动设备和台式机完全一致,具有更快的性能,并且不太可能在浏览器之间出现差异,但下载大小增加了大约2MB。Flutter官方文档上对这个选项的默认设置的说明是当应用程序在移动浏览器中运行时,此选项选择HTML渲染.原创 2021-03-09 11:16:45 · 3057 阅读 · 2 评论 -
Flutter控件布局 - Spacer, Flex , Expanded , Flexible, Padding
Spacer初始状态设置三个按钮,顺序排列在AB两个按钮之间加一行 Spacer()在BC两个按钮之间也加一行 Spacer() 总结Spacer() 相当于弹簧的效果,使两个控件之间的距离达到最大值. (在页面不可滑动时才有效果)FlexFlex 是 Row和Column的父组件.Flex组件可以沿着水平或垂直方向排列子组件,如果你知道主轴方向,使用Row或Column会方便一些,因为Row和Column都继承自Flex,参数基本相同,所以能使用Flex的地方基本上原创 2021-01-08 16:55:15 · 1026 阅读 · 0 评论 -
Flutter之局部刷新(2021)
Flutter 框架内部提供了一个非常小巧精致的组件,专门用于局部组件的刷新,它就是 ValueListenableBuilder。ValueListenableBuilder需要的元素:类型为 ValueWidgetBuilder 的 builder, 监听对象的界面展现. 本质是一个方法,Widget Function(BuildContext context, T value, Widget child)ValueListenable 对象 , 监听对象, 这里用它的实现类: ValueNot原创 2021-01-04 09:39:12 · 674 阅读 · 0 评论 -
Flutter - App开发中的常见同步/异步场景
代码import 'package:dio/dio.dart';//使用async和await做异步调用.void getHttp() async { try { Response response = await Dio().get("https://www.baidu.com"); print(response); print("------------")...原创 2020-03-18 15:29:50 · 380 阅读 · 0 评论 -
flutter上传图片
最新版本的dio,UploadFileInfo被去掉了,需要换成MultipartFile.要装的库:dio: 3.0.8 fluttertoast: ^3.1.3 image_picker: ^0.6.3+1代码:import 'dart:io';import 'package:dio/dio.dart';import 'package:flutter/material.d...原创 2020-02-19 10:53:07 · 434 阅读 · 0 评论 -
Flutter报错集合
flutter运行提示Trying to embed a platform view but the PaintContext does not support embedd解决方式,在info.plist里加入<dict> ... <key>io.flutter.embedded_views_preview</key> <...原创 2020-07-14 18:50:16 · 133 阅读 · 0 评论 -
关闭flutter调试时右上角的'debug'字样
image.pngclass MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp( debugShowCheckedModeBanner:false, // 加入这行代码,即可关闭'DEBUG'字样 ...原创 2020-10-09 17:53:34 · 438 阅读 · 0 评论 -
Flutter让按钮填充满所在container
反例:Container( alignment: Alignment.topLeft, // padding: EdgeInsets.all(1), // margin:new EdgeInsets.only(right:1.0), decoration: BoxDecoration(...原创 2020-06-18 10:52:03 · 672 阅读 · 0 评论 -
flutter - 一键切换黑暗模式
如果某个具体的Widget不希望直接使用全局的Theme,而希望自己来定义,只需要在Widget的父节点包裹一下Theme即可.在新的页面的Scaffold外,包裹了一个Theme,并且设置data为一个新的ThemeData.class HYSecondPage extends StatelessWidget { @override Widget build(BuildContext...原创 2020-12-15 14:38:09 · 427 阅读 · 0 评论 -
flutter中行(Row)子控件设置间距和左右对齐
设置子控件间距使用SizedBox保持固定间距Row( children: <Widget>[ Text("1"), SizedBox(width: 50), // 50宽度 Text("2"), ],)image.png使用Spacer填充尽可能大的空间Row( children: <Widget>[ ...原创 2020-12-17 09:21:26 · 7410 阅读 · 0 评论 -
Flutter web作为纯前端时的小坑
做了一个展示接口自动化通过率的web页面,其中踩了个大坑.image.png坑就在五角星☆那里, flutter web 访问后端api时的URL.因为flutter web和api都部署在同一台机器上, 本地开发时也在同一台机器, 代码里自然这样写的:Response response = await Dio().get("http://127.0.0.1:8011/xxx");...原创 2020-12-09 11:17:59 · 304 阅读 · 0 评论 -
Flutter获取网络文档并刷新在界面
这是一个异步操作, 改编Flutter初始新项目实例后的代码如下1. 点击按钮后,界面刷新var req_url = 'http://api.tianapi.com/txapi/zmsc/index?key=1234567'; Future getHttp() async { try { Response response = await Dio().ge...原创 2020-12-04 23:58:16 · 392 阅读 · 0 评论 -
Flutter Web返回`DioError [DioErrorType.RESPONSE]: XMLHttpRequest error.`
Flutter Web调用自己建的api,返回DioError [DioErrorType.RESPONSE]: XMLHttpRequest error.原因是api需要设置Access-Control-Allow-Origin. 浏览器环境有跨域限制,服务器返回的输出头中必须有相应的设置才能在js中调用(flutterweb最终转换的代码是js)代码:from fastapi.respo...原创 2020-12-03 15:21:49 · 5529 阅读 · 0 评论 -
flutter中列(Column)子控件设置间距和左右对齐
Column子控件左对齐加入属性crossAxisAlignment: CrossAxisAlignment.start,即可原创 2020-12-17 11:11:29 · 6259 阅读 · 2 评论 -
flutter web开发流程
切换flutter版本: flutter channel beta(切回来:flutter channel stable)使本机flutter支持web : flutter config --enable-webimage.png新建项目,必须在vscode等IDE里新建, 命令行新建的项目无web目录在浏览器运行:flutter run -d chrome效果:...原创 2020-11-23 12:59:53 · 270 阅读 · 1 评论 -
windows10使用nginx启动web项目
启动安装nginx后,进入nginx根目录, cmd环境执行 start nginx.exe ,即可启动.进入 http://127.0.0.1/ 可以看到初始化页面.其他命令需要在nginx根目录运行.nginx.exe -s stop //停止nginxnginx.exe -s reload //重新加载nginxnginx.exe -s quit //退出nginx配置ngin原创 2020-12-25 16:01:11 · 875 阅读 · 0 评论 -
Flutter之刷新局部控件
概述在flutter开发时,有时候点击某个按钮,只需要刷新指定控件,而不需要将整个页面都刷新.思路: 在待刷新控件里定义一个点击方法,点击方法里刷新本控件. 点击指定按钮时,去调用此待刷新控件里的点击方法.流程图代码main.dartimport 'package:flutter/material.dart';import 'new_text.dart';import 'new_button.dart';void main() {原创 2020-12-22 12:00:35 · 1617 阅读 · 0 评论 -
Flutter之路由管理(页面跳转)
路由:核心是 路由映射表. 如:名字detail映射到 DetailPage页面等在Flutter中,路由管理主要有两个类:Route和Navigator.Route一个页面要想被路由统一管理,必须包装为一个RouteNavigator管理所有的Route的Widget,通过一个Stack来进行管理.MaterialApp、CupertinoApp、WidgetsApp它们默认是有插入Navigator的,在需要的时候,只需要直接使用即可.Navigator.of(context)Navi原创 2020-12-14 11:20:08 · 496 阅读 · 0 评论 -
Flutter跨组件传递事件
步骤1. 引入第三方库在 pubspec.yaml 引入 event_bus: ^1.1.12. 定义在组件之间传递的对象class UserInfo { String nickname; int level; UserInfo(this.nickname, this.level);}3. 创建全局的EventBus对象final eventBus = EventBus();4. 在某个widget发出事件FlatButton( child: Te.原创 2020-12-12 18:39:37 · 489 阅读 · 0 评论 -
Flutter Provider的使用
在使用Provider的时候,主要关心三个概念:ChangeNotifier:真正数据(状态)存放的地方ChangeNotifierProvider:Widget树中提供数据(状态)的地方,会在其中创建对应的ChangeNotifierConsumer:Widget树中需要使用数据(状态)的地方代码:import 'package:flutter/material.dart';import 'package:provider/provider.dart';原创 2020-12-11 10:11:39 · 790 阅读 · 0 评论 -
Flutter 适配移动端和web不同尺寸
用到的库这款开源的库,可以实现不同屏幕尺寸的适配.responsive_builder使用方法1. pubspec.yaml引入库 responsive_builder: ^0.3.02. 代码引用 import 'package:responsive_builder/responsive_builder.dart';3. 像使用普通控件一样,使用如下代码:```ResponsiveBuilder( builder: (context, sizing原创 2020-11-30 16:52:29 · 844 阅读 · 0 评论 -
无网络环境使用flutter第三方库
在有些工作环境,电脑处于内网,无法连接网络,但是可以通过u盘拷贝库文件.1. 找到本机第三方库下载地址mac系统,flutter第三方库会存在这里 $home/.pub-cache/hosted/pub.flutter-io.cn2. 拷贝到内网3. 内网项目配置在项目根目录,新建个plugin目录把需要的第三方库拷贝到这个目录pubspec.yaml文件引用方式dio: path: plugin/dio-3.0.10在代码里引用 import 'package:dio/原创 2020-11-27 15:44:28 · 531 阅读 · 0 评论 -
使用并部署Flutter Web的步骤实例
切换flutter版本指令: flutter channel beta (切回来:flutter channel stable)使本机flutter支持web指令: flutter config --enable-web检查配置 新建项目必须在vscode等IDE里新建, 命令行新建的项目无web目录在浏览器调试运行指令 flutter run -d chrome效果编译web端调试完成后, 编译指令flutter build web运行编译完成后, 进入web目录: ** 项原创 2020-11-27 15:22:32 · 1195 阅读 · 0 评论