上圖

webUI

androidUI

不是dp適配

對的，不是對dp的適配咧擂，而是在不同的分變率逞盆，改變布局的方式。大的屏幕肯定是要合理利用空間松申，這樣布局緊湊云芦，不浪費(fèi)空間，小的屏幕又不能讓大的組件等比壓縮贸桶，這樣不光會變丑舅逸，還會變的更難觸及，既然Flutter對web的支持皇筛，那么肯定要支持不同分辨率琉历，適配不同布局吧，就像我們Android開發(fā)设联，在針對Pad的時(shí)候做一個單獨(dú)的xml布局來適配一樣善已。

實(shí)現(xiàn)原理

原理很簡單灼捂，就是在屏幕寬度到了一定范圍內(nèi)，然后動態(tài)返回不同的Widget换团，那么拿到屏幕的寬度就是關(guān)鍵悉稠，其實(shí)很簡單

MediaQuery.of(context).size.width

詳細(xì)介紹參見官方文檔MediaQuery
大致意思是說，WidgetsApp和MaterialApp目前只有它們引入了MediaQuery并隨著它們的變化與當(dāng)前屏幕指標(biāo)保持最新艘包，所以這也是為什么當(dāng)你沒有用這兩個widget布局的猛，最終報(bào)錯的原因，用的時(shí)候注意想虎。
我們來看個細(xì)節(jié)哈

WidgetsApp

MaterialApp

  static bool isSmallScreen(BuildContext context) {
    return MediaQuery.of(context).size.width < 768;
  }

  static bool isLargeScreen(BuildContext context) {
    return MediaQuery.of(context).size.width > 768;
  }

  static bool isMediumScreen(BuildContext context) {
    return MediaQuery.of(context).size.width > 425 &&
        MediaQuery.of(context).size.width < 1200;
  }

然后在Widget build(BuildContext context)的時(shí)候返回不同的布局

 return LayoutBuilder(
      builder: (context, constraints) {
        if (constraints.maxWidth > 768) {
          return largeScreen;
        } else if (constraints.maxWidth < 1200 && constraints.maxWidth > 425) {
          return mediumScreen ?? largeScreen;
        } else {
          return smallScreen ?? largeScreen;
        }
      },
    );

如何使用呢

  ConstrainedBox(
        constraints: BoxConstraints(
            minWidth: constraints.maxWidth, minHeight: constraints.maxHeight),
        child: ResponsiveWidget(
          largeScreen: _buildLargeScreen(context),
          mediumScreen: _buildMediumScreen(context),
          smallScreen: _buildSmallScreen(context),
        ),
      )

ConstrainedBox用于對子組件添加額外的約束揉燃，這里就是為了限制布局的寬高都充滿屏幕扫尺，準(zhǔn)確的說是充滿父容器，保證計(jì)算的寬度不會出現(xiàn)失誤炊汤。

官方動態(tài)適配方案

官方解讀：
responsive響應(yīng)式應(yīng)用程序會根據(jù)屏幕或窗口的大小和形狀來布局其UI正驻。當(dāng)同一個應(yīng)用程序可以在各種設(shè)備（從手表，手機(jī)抢腐，平板電腦到筆記本電腦或臺式機(jī)）上運(yùn)行時(shí)姑曙，這尤其必要。當(dāng)用戶在筆記本電腦或臺式機(jī)上調(diào)整窗口大小或更改手機(jī)或平板電腦的方向時(shí)氓栈，應(yīng)用程序應(yīng)通過相應(yīng)地重新排列UI來做出響應(yīng)渣磷。
官方推薦博客：

• Deven Joshi 在Flutter中開發(fā)多種屏幕尺寸和方向
• 在Flutter中構(gòu)建響應(yīng)式UI，作者Raouf Rahiche
• Priyanka Tyagi 使跨平臺的Flutter登陸頁面具有響應(yīng)性
• 如何使Flutter應(yīng)用根據(jù)不同的屏幕尺寸做出響應(yīng)授瘦？醋界，關(guān)于StackOverflow的問題

國外開源方案

image.png

我介紹的方案地址

responsive_widget.dart

在線看效果

ibaozi.cn

結(jié)束

以后碰到Flutter中實(shí)用的東東，在分享給你們哈徒欣。歡迎留言討論逐样。