一个Flutter widget自动适配不同UI到Web、Android

最新推荐文章于 2024-08-16 17:16:00 发布
最新推荐文章于 2024-08-16 17:16:00 发布
阅读量1.6k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
分类专栏： flutter ui 文章标签： android 移动开发 flutter
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46622598/article/details/105035218
博客探讨了Flutter中如何实现Widget在不同分辨率和屏幕尺寸上的适配，区别于简单的dp适配，而是根据屏幕宽度动态调整布局。介绍了一个基于MediaQuery的实现原理，以及如何在Widget build()方法中根据宽度返回不同布局。同时提到了官方动态适配方案和国外开源解决方案。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

上图

webUI
androidUI

不是dp适配

对的，不是对dp的适配，而是在不同的分变率，改变布局的方式。大的屏幕肯定是要合理利用空间，这样布局紧凑，不浪费空间，小的屏幕又不能让大的组件等比压缩，这样不光会变丑，还会变的更难触及，既然Flutter对web的支持，那么肯定要支持不同分辨率，适配不同布局吧，就像我们Android开发，在针对Pad的时候做一个单独的xml布局来适配一样。

实现原理

原理很简单，就是在屏幕宽度到了一定范围内，然后动态返回不同的Widget，那么拿到屏幕的宽度就是关键，其实很简单

MediaQuery.of(context).size.width

详细介绍参见官方文档MediaQuery
大致意思是说，WidgetsApp和MaterialApp目前只有它们引入了

最低0.47元/天 解锁文章

200万优质内容无限畅学
Flutter响应式设计：完美适配各种屏幕尺寸
移动开发前沿的博客
06-24 1114
本文聚焦解决"Flutter应用在不同屏幕尺寸下的适配问题"，覆盖手机（竖屏/横屏）、平板、折叠屏等主流设备，讲解从基础概念到实战落地的完整方法论。本文将按照"概念理解→原理分析→实战演练→扩展思考"的逻辑展开，先通过生活案例理解响应式设计，再拆解Flutter的核心适配工具，最后用完整项目演示如何实现多设备适配。响应式设计（Responsive Design）：让UI根据设备屏幕尺寸、方向等参数自动调整布局的设计方法（类似变形金刚根据战斗场景切换形态）逻辑像素（Logical Pixels）
Flutter UI适配详解 —— Flutter开发必看！
Ever69的博客
09-10 6475
Flutter中的宽高单位 不同于Android中的dp和IOS中的pt，Flutter奉行另外一种单位，即逻辑像素。 Flutter 遵循简单的基于密度的格式，如 iOS。资产可能是1.0x、 2.0x、3.0x或任何其他乘数。Flutter 没有dp 但有逻辑像素，与设备无关像素基本相同。所谓devicePixelRatio 表示物理像素在单个逻辑像素中的比例。 devicePixelRatio表示1逻辑像素在设备上对应的物理像素数（px），不同设备的devicePixelRatio不尽相同，比如
一个全新 Flutter UI 适配方案，低入侵 & 100% 还原设计稿！
承香墨影的博客
06-25 1981
一、序大家好，这里是承香墨影！今天介绍一个我最近开源的 Flutter UI 方案，可以做到在全设备上 100% 还原设计稿，其背后的思想类似 Android 侧今日头条基于 densit...
Flutter —— 根据不同屏幕尺寸高效的适配 UI
mehmetkollayan的博客
08-24 959
Flutter 是什么？ 如果你对这篇文章感兴趣的话，说明你已经对 Flutter 有了一定的了解，阅读本篇文章你需要记住的最重要的内容就是，Flutter 是可以控制屏幕上的任何一个像素的（因为在 Native 开发里是不能控制状态栏里的像素的，但 Flutter 可以控制状态栏，所以是可以控制屏幕上的任何一个像素）。 本篇文章的核心 因为可以控制所有的像素，如果我们想画一个矩形，就可以这样实现： Container( height: 40, width: 60, ), 现在，我们就用 Conta
[译] Flutter —— 根据不同屏幕尺寸高效的适配 UI
2401_84121573的博客
04-11 1303
都说三年是程序员的一个坎，能否晋升或者提高自己的核心竞争力，这几年就十分关键。技术发展的这么快，从哪些方面开始学习，才能达到高级工程师水平，最后进阶到Android架构师/技术专家？我总结了这 5大块；我搜集整理过这几年阿里，以及腾讯，字节跳动，华为，小米等公司的面试题，把面试的要求和技术点梳理成一份大而全的“ Android架构师”面试 PDF（实际上比预期多花了不少精力），包含知识脉络 + 分支细节。Java语言与原理；大厂，小厂。Android面试先看你熟不熟悉Java语言高级UI与自定义view。
极其简单的Flutter 屏幕适配
qq_33408235的博客
08-16 2356
A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案） 一 概述 由于 Flutter 的应用场景很多，不只是 android 还有 ios 以及 web，现在的手机品牌和型号越来越多，导致我们平时写布局的时候会在个不同的移动设备上显示的效果不同，今天介绍一种方案，可以是一个低成本，但是 100% 还原UI的一种办法，无需使用工具类或者是扩展函数去 转换，直接写 UI设计图给的大小即可 二 github 欢迎 star fl
flutter UI适配
weixin_47894857的博客
08-19 201
在lib文件夹下添加一个util.dart文件，在文件中写入如下代码： ///px转化为rpx double toRpx(BuildContext context,double size) { double rpx = MediaQuery.of(context).size.width/750; return size * rpx; 使用示例： 在需要使用的文件内 import 'package:flutter_demo/utils/util.dart'; 在需要使用的地方套一层toRpx()即可
flutter webview 适配
02-23 1307
webView.getSettings().setTextZoom(100); webView.getSettings().setLayoutAlgorithm(WebSettings.LayoutAlgorithm.NORMAL);
Material Design 与灵活适配的 UI | I/O'19 Flutter 课堂笔记 (一)
谷歌开发者
07-08 376
在今年的 I/O 大会上，Flutter 主题的各场演讲可谓干货满满。为了方便大家快速吸收其中的核心知识点，我们连课堂笔记都给大家画好了。今天的课堂笔记为大家记录的是由 ...
Flutter：屏幕适配
weixin_41897680的博客
08-09 4853
Flutter：屏幕适配
Flutter web - 4 H5 移动端适配与依赖推荐
最新发布
Kary的博客
08-16 1256
之前开发H5页面时，使用rem方案来适配不同的机型。在flutter中有没类似的方案呢?对于不熟悉flutter开发的前端同学怎么快速上手项目呢？本文将介绍我在项目中所使用到的依赖。
flutter和webapp_Flutter 适配移动端和web不同尺寸
weixin_32207065的博客
01-12 766
用到的库这款开源的库,可以实现不同屏幕尺寸的适配.responsive_builder使用方法1. pubspec.yaml引入库 responsive_builder: ^0.3.02. 代码引用 import 'package:responsive_builder/responsive_builder.dart';3. 像使用普通控件一样,使用如下代码:ResponsiveBuilder(bu...
flutter 屏幕适配分析
m0_59162559的博客
03-11 1065
算出一个rpx后，再将自己的size和rpx单位相乘即可： 比如100px的宽度：100 * 2 * rpx 在iPhone5上计算出的结果是84px 在iPhone6上计算出的结果是100px 在iPhone6plus上计算出的结果是110.4px。此外，良好的职业规划也很重要，学习的习惯很重要，但是最重要的还是要能持之以恒，任何不能坚持落实的计划都是空谈。:物理像素与逻辑像素的比例,当像素比为1:1时，使用1个物理像素显示1个逻辑像素；首先需要在入口main.dart初始化。
2024最新Android笔试题及答案，Android快速转战Kotlin教程
2401_84412895的博客
04-20 797
以下的资料是近年来，我和一些朋友面试收集整理了很多大厂的面试真题和资料，还有来自如阿里、小米、爱奇艺等一线大厂的大牛整理的架构进阶资料。希望可以帮助到大家。全Android进阶学习视频**
【flutter项目实战】第八节 在flutter项目中实现屏幕适配
winni_a的博客
03-26 1320
的逻辑就是，你设置好你的UI的屏幕尺寸，然后她会根据你后续设置的值。的更新，这个包用法也变过几次），我们将其封装成类，来使用。接下来，你就可以在页面里进行配置了。为了避免包更新导致的用法更改（其实随着。文件里进行配置后，才可以在页面中使用。当然，看到这篇文章时，你几乎是在使用。和当前屏幕的比例进行计算并赋值。抄袭一下官方文档提供的使用方法。接下来我们看一段代码。
flutter-web与移动端兼容采坑
weixin_30530523的博客
07-17 1141
前言： flutter-web问世之后，三端通用成为大趋势。理想很美好，但现实很骨干，采坑之路开始。。。 常用的几个命令： Flutter SDK下载 https://flutter.dev/docs/development/tools/sdk/releases?tab=windows#windows 检查是否安装成功： flutter doctor 安装包，类似npm install flutt...
Flutter屏幕适配的三种方案
金戈鐡馬
03-05 5056
做移动端开发的同学都知道，针对不同型号和尺寸的手机要进行页面的适配，且 iOS 和 Android 适配方案各不相同，那我们用 Flutter 开发要怎么处理屏幕适配呢？Flutter使用的是类似于iOS中的点pt，也就是point。我们经常说 iPhone8 的尺寸是375x667，但是它的分辨率其实是 750x1334 。因为iPhone8的像素比（devicePixelRatio）是2.0，iPhone8plus的像素比是3.0。
Flutter Settings UI：快速创建原生风格的移动应用设置
`settings_ui`是一个专为Flutter开发的插件，它提供了一系列预先设计好的组件，以帮助开发者快速构建出美观、一致的设置页面。 **安装和基本用法** 首先，要使用`settings_ui`插件，开发者需要在Flutter项目的`...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值