https://medium.com/@diegoveloper/flutter-widget-size-and-position-b0a9ffed9407

I have read many questions about how we can obtain the dimensions or positions of the widgets that we have on screen.

In some cases we find ourselves in situations in which we want to achieve that for any reason.

The widget doesn’t have position or size by itself, in order to achieve this it’s necessary that we obtain the RenderBox associated with the context of our Widget.

But how do we do this?

Let’s start building a demo app which has 3 panels of different colors, Red, Purple and Green inside a Column and we have two buttons at the bottom to get the Size and Position.

This is the code of the demo app:

 

And the result:

 

Ok so now the question is : How can I get the size and position of each panel?

Let’s focus on just one panel for this post (Red panel) , after we know how to get the size and position for one panel it should be easy for the others.

Get the size of a Widget

In order to do that, we need our Widget to have a Key, for this we create a GlobalKey and assign it to our Widget.

//creating Key for red panel
GlobalKey _keyRed = GlobalKey();
...
//set key
Flexible(
flex: 2,
child: Container(
key: _keyRed,
color: Colors.red,
),
),

Once our Widget already has a Key, we can use this Key to be able to obtain the size in the following way:

_getSizes() {
final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
final sizeRed = renderBoxRed.size;
print("SIZE of Red: $sizeRed");
}

If we press the Get Sizes button, you’ll get this result in the console:

flutter: SIZE of Red: Size(375.0, 152.9)

now we know that our Red panel has 375.0 as width and 152.9 as height

It was easy, right?

Let’s go to obtain the position in which our Widget is located.

Get the position of a Widget

In the same way that we did previously, our Widget must have an associated Key.

Now we update the method to obtain the position of the Widget relative to the top-left of the defined position (in this case we are using 0.0 it means the top-left corner of our current screen).

_getPositions() {
final RenderBox renderBoxRed = _keyRed.currentContext.findRenderObject();
final positionRed = renderBoxRed.localToGlobal(Offset.zero);
print("POSITION of Red: $positionRed ");
}

If we press the Get Positions button, you’ll get this result in the console:

flutter: POSITION of Red: Offset(0.0, 76.0)

It means our Widget start from 0.0 from the X axis and 76.0 from the Y axis from TOP-LEFT.

Why 76.0? That’s because there is an AppBar above that has a height of 76.0.

 

So we already know how to get the size and position of our Widgets, well so far. Yay!!

But what happens if I’m interested in getting the size or position at the beginning, without having to press a button for it.

 

Ok then let’s call our methods in our constructor.

_MainSizeAndPositionState(){
_getSizes();
_getPositions();
}

Run the app and …. oh we have an error here:

flutter: The following NoSuchMethodError was thrown building Builder:
flutter: The method 'findRenderObject' was called on null.
flutter: Receiver: null
flutter: Tried calling: findRenderObject()

Ok let’s try calling the methods from the initState , it should work ….. or no

@override
void initState() {
_getSizes();
_getPositions();
super.initState();
}

Run the app and … a little different but the same error:

flutter: Another exception was thrown: NoSuchMethodError: The method 'findRenderObject' was called on null.

So, we have a problem, we can not get the size or position at the beginning, so how do I do it?

 

This happens because the context is not yet associated with our state.

You can find more information about the lifecycle of the Widgets here: https://medium.com/flutter-community/widget-state-buildcontext-inheritedwidget-898d671b7956

So we have to wait for our Widget to finish rendering, but how can achieve that?

There is a simple way, as I show you below.

@override
void initState() {
WidgetsBinding.instance.addPostFrameCallback(_afterLayout);
super.initState();
}
 _afterLayout(_) {
_getSizes();
_getPositions();
}

With this you make sure to call your methods after the layout is completed.

If we run our app again, this is the result:

flutter: SIZE of Red: Size(375.0, 152.9)
flutter: POSITION of Red: Offset(0.0, 76.0)

Finally!!!

You can also review this package created by my friend Simon Lightfoot here: https://pub.dartlang.org/packages/after_layout

Conclusion

Many times, we get complicated by things that are very simple, it is necessary to read the documentation that Flutter provides, anyway every day we learn new things.

You can check the source code in my flutter-samples repo https://github.com/diegoveloper/flutter-samples

Widget Size and Position !!!!!!!!!!!!!!!!!!的更多相关文章

  1. 【Cocos2d-x】源代码分析之 2d/ui/Widget

    从今天開始 咱也模仿 红孩儿这些大牛分析源代码 ,因为水平有限 不正确之处欢迎狂喷.哈哈. #ifndef __UIWIDGET_H__ #define __UIWIDGET_H__ #include ...

  2. Android学习笔记_63_手机安全卫士知识点归纳(3)分享 程序锁 服务 进程管理 widget

    1.分享: Intent shareIntent = new Intent(); shareIntent.setAction(Intent.ACTION_SEND); shareIntent.setT ...

  3. OSG Qt Widget加载三维模型

    graphicswindowqt.h #ifndef GRAPHICSWINDOWQT_H #define GRAPHICSWINDOWQT_H #include <QGLWidget> ...

  4. iOS-CALayer中position与anchorPoint详解

    iOS-CALayer中position与anchorPoint详解 属性介绍 CALayer通过四个属性来确定大小和位置, 分别为:frame.bounds.position.anchorPoint ...

  5. QT把widget转换成图片后打印

    from PyQt5.QtWidgets import (QApplication, QWidget, QTableWidget,QPushButton, QVBoxLayout, QTableWid ...

  6. Qt 【widget如何铺满窗口】

    刚接触qt不是很长时间,都是使用ui拖拽控件实现界面,然后发现有些问题就是控件一旦多了起来,拖拽就不好控制了,然后就转而使用纯代码开发. 一下是碰到第一个问题: 创建一个MainWidget; Mai ...

  7. 第15.30节 PyQt编程实战:通过eventFilter监视QScrollArea的widget()的Paint消息画出scrollAreaWidgetContents的范围矩形

    老猿Python博文目录 专栏:使用PyQt开发图形界面Python应用 老猿Python博客地址 一.引言 在<PyQt(Python+Qt)学习随笔:QScrollArea滚动区域详解> ...

  8. 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载

    title: 带你实现开发者头条APP(五)--RecyclerView下拉刷新上拉加载 tags: -RecyclerView,下拉刷新,上拉加载更多 grammar_cjkRuby: true - ...

  9. Android之ListView&ViewPager模拟新闻界面

    模拟新闻 APP 的界面 1)写 ListView 之前先写布局: 这里有两种 Item 的布局: <?xml version="1.0" encoding="ut ...

随机推荐

  1. 【2019.11.13】SDN上机第3次作业

    参考资料:https://www.cnblogs.com/fjlinww/p/11834092.html 实验一 利用Mininet仿真平台构建如下图所示的网络拓扑,配置主机h1和h2的IP地址(h1 ...

  2. 菜鸟教程C++(一)

    一.C++基本语法 C++程序可以定义为对象的集合,这些对象可以通过调用彼此的方法进行交互. 对象:对象具有状态和行为.例如:一只狗的状态:颜色.名称.品种等,行为:摇动.叫唤等.对象是类的实例. 类 ...

  3. [C++] new和delete运算符使用方法

    new 和 delete 是C++语言中的两个运算符,配套使用. new:用于分配内存,与C语言中的 malloc 相同,分配在堆内存 delete:用于释放内存,与C语言中的 free 相同,释放堆 ...

  4. IDEA中执行maven命令:mvn clean 时报错

    问题描述: 完成项目中的功能后,想要git一下,就用maven命令先清除一下编译文件,紧接着系统报错 Error executing Maven. 2 problems were encountere ...

  5. 数据库sql优化总结之5--数据库SQL优化大总结

    数据库SQL优化大总结 小编最近几天一直未出新技术点,是因为小编在忙着总结整理数据库的一些优化方案,特此奉上,优化总结较多,建议分段去消化,一口吃不成pang(胖)纸 一.百万级数据库优化方案 1.对 ...

  6. hive中同源多重insert写法

    多重insert: with tmp_a as ( select name from tmp_test3 ) from tmp_a insert overwrite table tmp_test1 s ...

  7. openresty开发系列32--openresty执行流程之1初始化阶段

    openresty开发系列32--openresty执行流程之初始化阶段 一)初始化阶段 1)init_by_lua   init_by_lua_block     init_by_lua_file语 ...

  8. 【tensorflow基础】ubuntu-tensorflow可视化工具tensorboard-No dashboards are active for the current data set.

    前言 今天基于tensorflow训练一个检测模型,本应看到训练曲线的,却只见到一个文件events.out.tfevents.1570520647.hostname,后来发现这个文件可以查看训练曲线 ...

  9. xshell的ssh连接频繁提示Socket error Event: 32 Error: 10053(待验证)

    修改/etc/ssh/sshd_config下的配置文件 将ClientAliveInterval的值修改为60 然后重启ssh服务器 目前没有在频繁出现ssh断开问题了,应该是有效的

  10. 多个进程间通信之Queue

    多个进程间通信之Queue 实现数据传递 #!coding:utf-8 from multiprocessing import Process, Queue import os,time,random ...