A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案）

聂志洋

Last update: Sep 27, 2022

Overview

A low-cost Flutter screen adaptation solution（一个极低成本的 Flutter 屏幕适配方案）

100% 还原 UI，只需要按照设计图写的宽高写即可

先看图片，设置的标准宽度是 360

iPhone 8 ------------------------------- iPhone 11 :

iPhone 12 pro max --------------------- ipad air :

android 图

768x1280-320dpi----------10801920-420dpi----------1440x2560-560dpi

web 图

随着拉长屏幕，慢慢的宽度会大于高度，当大于的时候，会以高度为基准。

使用

引用

flutter_autosize_screen: ^{LAST_VERSION}

初始化

在main方法的第一行就初始化，下面的基准一般以宽度为基准，直接写Ui设计图的宽度尺寸，如果是横屏的状态的下面的 360 就是以高度为基准

void main() {
  // 设置基准 或者以苹果6，375 为标准, isAutoTextSize 表示文字是否随着系统的字体大小更改而更改，默认是 true
  AutoSizeUtil.setStandard(360,isAutoTextSize: true);

  // 使用 runAutoApp 来代替 runApp
  // import 'package:flutter_autosize_screen/binding.dart';
  runAutoApp(const MyApp());

}

替换根 MaterialApp 的 MediaQuery

MaterialApp(
      title: 'Autosize Demo',
      /// 替换，这样可以在以后 使用 MediaQuery.of(context) 得到 正确的Size
      builder: AutoSizeUtil.appBuilder,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: HomePage(),
      ),
    )

获取Size

AutoSizeUtil.getScreenSize()
//或者
MediaQuery.of(context).size

直接按照设计图的尺寸写即可

Container(
    alignment: Alignment.center,
    height: 60,
    width :60,
    color: Colors.redAccent,
    child: Text(
      "直接按照设计图写尺寸",
    ),
  )

获取真正的大小，比如 kToolbarHeight 是 56

// 一下方法获取到真正的大小，然后设置到 toolbar上
AutoSizeUtil.getRealSize(kToolbarHeight)

切记不能使用 window 获取 size 或者是获取 MediaQuery
~~window.physicalSize~~
~~MediaQueryData.fromWindow(window)~~

下一个目标

因为从根修改了屏幕宽高, 会引起一些系统Widget，有可能比正常的大或者小，比如toorbar的高度默认是 kToolbarHeight = 56.0，这样如果把宽度标准设置成112的话，那这kToolbarHeight就会显得很高，还有 Text （bodyText2）默认的是 14，也会非常大，所以下一个计划是还原一下默认的系统 widget。大家有好的建议也可以提给我

原理

掘进

Thank

FlutterTest

Apartment4a - An app which will be a one stop solution to all the problems Students are facing these days

APARTMENT 4A An app which will be a one stop solution to all the problems Studen

Nov 15, 2022

Meme Network is the creative powerhouse that supercharges your Meme projects with the World's First Layer 1 solution in the Cosmos Ecosystem.

MEME Chain How to Join MEME Mainnet Recommended system setup 4 core CPU Memory: 4GB Disk: 100GB Ubuntu 20.04 Meme Validator Node Snapshot & State-Sync

Oct 26, 2022

Immich - High performance self-hosted photo and video backup solution

Self-hosted photo and video backup solution directly from your mobile phone.

Jan 8, 2023

A flutter app face detection and emotion, can detect if you're smiling, big smiley, sad or if there is not face on the screen.

My Emotion A flutter app face detection and emotion, can detect if you're smiling, big smiley, sad or if there is not face on the screen. News feactur

Dec 31, 2022

A flutter package which contains a collection of Splash Screen example for your app to display logo and different text style.

splash_screen_view They say, first impression is the last! Yep, truly for any amazingly crafted application, it's easier to start impressing your audi

Nov 25, 2022

Comments

当输入框被软键盘顶起时，输入框与软键盘中间出现空隙

代码

class Page extends StatelessWidget {
  Page({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Expanded(child: ListView()),
          Container(
            color: Colors.red,
            child: TextField(
              decoration: InputDecoration(hintText: 'TextField'),
            ),
          ),
        ],
      ),
    );
  }
}

opened by Phyzait 2

当我在使用esayloading插件的时候这两个插件应该如何同时保留在builder这块呢

MaterialApp( title: 'Autosize Demo', /// 替换，这样可以在以后使用 MediaQuery.of(context) 得到正确的Size builder: AutoSizeUtil.appBuilder, ///当我在使用esayloading插件的时候这两个插件应该如何同时保留在builder这块呢 theme: ThemeData( primarySwatch: Colors.blue, ), home: Scaffold( body: HomePage(), ), )

opened by bossbaba 1