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. 第07组 Beta冲刺(4/5)

    队名:摇光 队长:杨明哲 组长博客:求戳 作业博客:求再戳 队长:杨明哲 过去两天完成了哪些任务 文字/口头描述:已经完成代码编辑器,暂时没有其他任务 展示GitHub当日代码/文档签入记录:(组内共 ...

  2. [转]css3自适应布局单位vw,vh你知道多少?

    原文地址:https://www.cnblogs.com/luxiaoxing/p/7544375.html 视口单位(Viewport units) 什么是视口? 在PC端,视口指的是在PC端,指的 ...

  3. nginx-rtmp

    最近使用ffmpeg推流为rtmp,进行直播.记录一下nginx-rtmp的配置.因为我们要添加ngin-rtmp模块,所以不能直接apt安装. 下载niginx和nginx-rtmp-module的 ...

  4. 使用yarn代替npm作为node.js的模块管理器

    使用yarn代替npm作为node.js的模块管理器 转 https://www.jianshu.com/p/bfe96f89da0e     Fast, reliable, and secure d ...

  5. LInux_CentosOS中yum安装jdk及配置环境变量

    系统版本 [root@localhost ~]# cat /etc/redhat-release CentOS Linux release 7.6.1810 (Core) #安装之前先查看一下有无系统 ...

  6. Java算法 -- 桶排序

    桶排序(Bucket sort)或所谓的箱排序,是一个排序算法,工作的原理是将数组分到有限数量的桶里.每个桶再个别排序(有可能再使用别的排序算法或是以递归方式继续使用桶排序进行排序).桶排序是鸽巢排序 ...

  7. HTTP协议复习

    HTTP请求/响应的步骤: 客户端连接到WEB服务器:浏览器与web服务器的HTTP端口建立一个TCP套接字连接,例如:http://www.baidu.com 发送HTTP请求:通过TCP套接字,客 ...

  8. httpcomponent框架MultipartEntityBuilder addTextBody中文乱码

    版本4.5.6 String url = "https://172.16.3.50:8111/api/tts/offline"; HttpPost httpPost = new H ...

  9. ADB命令使用大法

    ​前言 Android开发调试工具ADB的使用.ADB(Android Debug Bridge)是Android SDK中的一个工具, 使用ADB可以直接操作管理Android模拟器或者真实的And ...

  10. [LeetCode] 384. Shuffle an Array 数组洗牌

    Shuffle a set of numbers without duplicates. Example: // Init an array with set 1, 2, and 3. int[] n ...