本文已参与「新人创作礼」活动，一起开启掘金创作之路。

这是【Flutter 问题系列第 12 篇】，如果觉得有用的话，欢迎关注专栏。

在原型图中，我们会遇到屏幕上第一个组件距离屏幕顶端多少距离，如下图所示

如果直接写这个距离，在刘海屏或异形屏就会出现组件被"挖"掉的问题。

所以这个时候我们需要获取到屏幕的内边距，加上原型图中的数字，才是我们最终需要的距离。

在 Flutter 获取屏幕内边距用

MediaQuery.of(context).padding

一般我们获取内边距的 top 值比较多

MediaQuery.of(context).padding.top

关于如何获取 Flutter 屏幕内边距，就介绍到这里。

你的问题得到解决了吗？欢迎在评论区留言。

赠人玫瑰，手有余香，如果觉得文章不错，希望可以给个一键三连，感谢。

结束语

Google 的 Flutter 越来越火，截止 2021年4月17日 GitHub 标星已达 86K，Flutter 毅然是一种趋势，所以作为前端开发者，没有理由不趁早去学习。

无论你是 Flutter 新手还是已经入门了，不妨先点个关注，后续我会将 Flutter 中的常用组件（含有源码分析、组件的用法及注意事项）以及可能遇到的问题写到稀土掘金博客中，希望自己学习的同时，也可以帮助更多的人。