本文基于1.12.13+hotfix.8版本源码分析. 0.大纲 RenderBox的用法 通过RenderObjectWidget把RenderBox塞进界面 1.RenderBox 在flutter中,我们最常接触的,莫过于各种各样的widget了,但是,实际负责渲染的RenderObject是很少接触的(它们之间的关联可以看看闲鱼的这篇文章:https://www.yuque.com/xytech/flutter/tge705).而作为一名天天向上的程序员,我们自然要去学习一下它的原理,做

我们平时在开发中的过程中通常都会获取屏幕或者 widget 的宽高用来做一些事情,在 Flutter 中,我们可以使用如下方法来获取屏幕或者 widget 的宽高. MediaQuery 一般情况下,我们会使用如下方式去获取 widget 的宽高: final size =MediaQuery.of(context).size; final width =size.width; final height =size.height; 复制代码 但是如果不注意,这种写法很容易报错,例如下面的写法就会

文档 文档版本有些老 使用 dio 来获取数据 demo import 'dart:io'; import 'dart:convert'; import 'package:flutter/material.dart'; void main() => runApp(new MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return MaterialApp(

1. 插件必须渲染好, final RenderBox box = globalKey.currentContext.findRenderObject(); final size = box.size; final topLeftPosition = box.localToGlobal(Offset.zero); return topLeftPosition.dy; 2. 可以通过context.size获取当前控件的尺寸和位置offset信息 下面是示例,通过contex.size.heigh

还是通过Dio包调用远程接口获取数据,这里返回值为一个Future,这个对象支持一个等待回掉方法then. 示例代码如下: import 'package:flutter/material.dart'; import 'package:dio/dio.dart'; class TestPage extends StatefulWidget { @override _TestPageState createState() => _TestPageState(); } class _TestPage

import 'package:flutter/material.dart'; import 'package:http/http.dart' as http; void main() => runApp(MyApp()); class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { // TODO: implement build //需要构建一个material的部件 return

获取状态栏高度: final double statusBarHeight = MediaQuery.of(context).padding.top; 所谓安全区域,就是适配现在一些刘海屏之类的非常规显示屏,在flutter中除了根据上面的方法获取到状态栏高度,给页面加对应的状态栏高度padding,还有一个专门的widget用来显示安全区域内容:SafeArea 下面是对比图: 1 Widget build(BuildContext context) { 2 return Material(

使用 WidgetsBindingObserver获取 class CloseTap extends StatefulWidget { @override _CloseTapTapState createState() => _CloseTapTapState(); } class _CloseTapTapState extends State<CloseTap> with WidgetsBindingObserver { void _onAfterRendering(Duration

import 'dart:ui'; MediaQueryData.fromWindow(window).padding.top 系统默认的appBar等高度 位于Dart Packages/flutter/src/material/constans.dart /// The height of the toolbar component of the [AppBar]. const double kToolbarHeight = 56.0; /// The height of the botto

安装依赖 dependencies: ... image_picker: image_cropper android\app\src\main\AndroidManifest.xml 将UCropActivity添加到AndroidManifest.xml中 <activity android:name="com.yalantis.ucrop.UCropActivity" android:screenOrientation="portrait" android

import 'dart:ui'; var s = window.physicalSize;print(s);

FutureBuilder( future: DefaultAssetBundle.of(context).loadString('data/data.json'), builder: (context, snap) { .... }, ),

现在的手机品牌和型号越来越多,导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同, 比如我们的设计稿一个View的大小是300px,如果直接写300px,可能在当前设备显示正常,但到了其他设备可能就会偏小或者偏大,这就需要我们对屏幕进行适配. 安卓原生的话有自己的适配规则,可以根据不同的尺寸建立不同的文件夹,系统会根据当前的设备尺寸取对应的大小的布局.而flutter本身并没有适配规则,而原生的又比较繁琐,这就需要我们自己去对屏幕进行适配. 点击直达github地址 如果有帮助,请给我

安装Flutter 获取FlutterSDK 终端cd进入SDK安装目录,比如 cd ~/FlutterSDK 由于在国内访问Flutter有时可能会受到限制,Flutter官方为中国开发者搭建了临时镜像,大家可以将如下环境变量加入到用户环境变量中: export PUB_HOSTED_URL=https://pub.flutter-io.cn export FLUTTER_STORAGE_BASE_URL=https://storage.flutter-io.cn git clone -b d

08.Dio基础_伪造请求头获取数据 上节课代码清楚 重新编写HomePage这个动态组件 开始写请求的方法 请求数据 .但是由于我们没加请求的头 所以没有返回数据 451就是表示请求错错误 创建请求头 注意这里是Request Headers这块才是请求头 把请求头全部复制过来. 然后给这些数据 都加上单引号,做成mapper的形式. 在VScode里面按住鼠标的alt键就可以多选 把这些字母的最前面和最后面都加上光标,然后鼠标再输入单引号 这样单引号就都加上了. 把这些参数都放在了单引号里面

09.首页_项目结构建立和获取数据 在config下创建service_url.dart 用来配置我们后端接口的配置文件 一个变量存 接口地址,一个接口方法地址 所有后天请求数据的方法都放在这个文件夹下/lib/service文件夹 再创建serevice_method.dart文件 首先引入dio的包,再引入异步的包,再引入io的包. 最后引入service_url配置的文件 然后开始写获取首页主题内容的代码 home_page.dart页面重写 我们把请求的数据直接放在Text里面显示了.

如题,在前端,是个很简单的ajax请求,json的显示,取值都很方便,换用dart之后,除了层层嵌套写的有点略难受之外,还有对json的使用比js要麻烦 1. 可以参照 flutter-go 先封装一下get和post请求,net_utils.dart 2. 发起请求 import 'package:flutter/material.dart'; import 'package:app/api/main.dart'; import 'package:app/utils/net_utils.dar

在很多时候,后端为了安全都会有一些请求头的限制,只有请求头对了,才能正确返回数据.这虽然限制了一些人恶意请求数据,但是对于我们聪明的程序员来说,就是形同虚设.下面就以极客时间为例,讲一下通过伪造请求头,来获取极客时间首页主要数据.(不保证接口和安全措施一直可用哦) 查看极客时间的数据端口 如果你是一个前端,这套流程可能已经烂熟于心,先找出掘金的一个端口,来进行分析. 首先在浏览器端打开极客时间(我用的是chrome浏览器):https://time.geekbang.org/ ,然后按F12打开

在很多时候,后端为了安全都会有一些请求头的限制,只有请求头对了,才能正确返回数据.这虽然限制了一些人恶意请求数据,但是对于我们聪明的程序员来说,就是形同虚设.这篇文章就以极客时间 为例,讲一下通过伪造请求头,来获取极客时间首页主要数据.(不保证接口和安全措施一直可用哦,赶快练习吧) 查看极客时间的数据端口 如果你是一个前端,这套流程可能已经烂熟于心,先找出掘金的一个端口,来进行分析. 首先在浏览器端打开掘金网站(我用的是chrome浏览器::https://time.geekbang.org/,

此次主要是flutter集成im,在发送视频时需要加上时长,但是用视频controller只能在初始化时具备路径才可以可以使用:just_audio插件中的方法进行获取 详情看官方文档:https://pub.flutter-io.cn/packages/just_audio