🔥 A low-cost Flutter screen adaptation solution (类似今日头条屏幕适配方案,一个极低成本的 Flutter 屏幕适配方案)。

Overview

screen_autosize

pub package License Author

🔥 A low-cost Flutter screen adaptation solution (参考今日头条 Android 屏幕适配方案的实现原理,实现的一个极低成本的 Flutter 屏幕适配方案)。

Flutter 屏幕适配方案,可做到 100% 还原设计稿。

Notice

  • 使用方法
  • 实现原理(挖坑后补)

优势 & 劣势

优势:

  1. 适配效果:100% 还原 UI;
  2. 稳定性高:原理简单,无任何 Framework 的 Hook;
  3. 侵入性低:修改点少且统一,日常编写 UI 无需特殊注意;
  4. 使用成本低:统一修改,全局有效;
  5. 性能损耗:几乎没有;
  6. 不破坏 const Widget 常量优化;

劣势:

  1. 全局有效,无法单页面设置,需统一同项目不同模块的设计和开发标准;
  2. 编码注意点:不能使用 window 类 Api 获取尺寸信息;
  3. 需要重写 WidgetsFlutterBinding,可能与部分库存在冲突,需特殊处理;

使用方法

一、安装依赖

安装之前,请查看最新版本(新版本如有问题,请使用上一版本)。

dependencies:
    flutter:
      sdk: flutter
    # 添加依赖
    screen_autosize: ^{latest version}

二、使用导包

import 'package:screen_autosize/screen_autosize.dart';

三、初始化

Step1:设定基准屏幕宽度

需要在 runApp() 之前设置,使用 AutoSizeUtils 的 initConfig() 设置设计稿的基准宽度。

void main() {
  // 这里使用 iPhone 一倍的宽度作为基准宽度;
  AutoSizeUtils.instance.initConfig(375);
  // ...
}

Step2:替换 runApp()

将原本的 runApp()runAutoSizeApp(MyApp()) 替换。

void main() {
  // 这里使用 iPhone 一倍的宽度作为基准宽度;
  AutoSizeUtils.instance.initConfig(375);
  // runApp(MyApp());
  runAutoSizeApp(MyApp());
}

Step3: 替换 MaterialApp 生成的 MediaQuery

MaterialApp 内部会生成 MediaQuery,需要将其通过 MediaQueryWrapper 替换。

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      builder: (context, widget) {
        // 替换根的 MediaQuery
        return MediaQueryWrapper(builder: (BuildContext context){
          return widget;
        },);
      },
      home: HomePage(title: 'Flutter ScreenAutoSize示例'),
    );
  }
}
// ...

Step3: 开始写 UI

编码时,无任何注意点,直接按照设计图的尺寸写就行。

eg. 在 375 宽度(iPhone 1 倍尺寸)的设计稿下,一个 100x100 黄色区域,直接写参数就行,无需任何注意点。

class ColorsWidget extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(10), // 不需要转换,设计稿是多少,就写多少
      width: 100,  // 不需要转换,设计稿是多少,就写多少
      height: 100, // 不需要转换,设计稿是多少,就写多少
      color: Colors.orange,
      child: Text(
        '我是正方形,边长是100',
        style: TextStyle(
          color: Colors.white,
          fontSize: 12,
        ),
      ),
    );
  }
}

如果要写满屏的尺寸,例如某个 Widget 宽度需要撑满屏幕,可以使用 2 种方法。

  1. 利用 MediaQuery 获取:MediaQuery.of(context).size.width;
  2. 利用 AutoSizeUtils 获取:AutoSizeUtils.instance.mediaWidth;

与宽度(width)对应的还有高度(height)的尺寸。

Tips:需要注意,因为库里改写了 devicePixelRatio,所以不能直接从 window 中获取对应参数。

效果

未适配前:从左到右的 dip 分别是 375 → 392 → 440

old_size

使用 screen_autosize 适配后:从左到右的 dip 分别是 375 → 392 → 440

auto_size

Roadmap

  • 支持横竖屏切换,自动调整参数;(暂未支持)
  • 支持字体尺寸倍数设置,可遵循系统设置,也可自定义;(暂未支持)

About Me

You might also like...

Beautiful Nike Web Design Concept With Flutter Beautiful Nike Web Design Concept With Flutter

flutter_web_nike A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Jan 28, 2022

Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player - First Open Source Flutter based material design music player with audio plugin to play local music files.

Flutter Music Player First Open Source Flutter based Beautiful Material Design Music Player(Online Radio will be added soon.) Demo App Play Store BETA

Sep 24, 2022

Flutter Login Page Bloc Pattern App Flutter Login Page Bloc Pattern App

gdgbloc A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Jul 4, 2022

Flutter: QR Code Scanner App Flutter: QR Code Scanner App

Flutter: QR Code Scanner App Flutter: QR Code Scanner App

Flutter QRCode Scanner APP Show some ❤️ and star the repo to support the project A new Flutter project. Features Scan 2D barcodes Scan QR codes Contro

Sep 27, 2022

Flutter: Integrate Google Maps Tutorial Flutter: Integrate Google Maps Tutorial

Flutter: Integrate Google Maps Tutorial Flutter: Integrate Google Maps Tutorial

Flutter Google Maps APP Show some ❤️ and star the repo to support the project A new Flutter project. Getting Started Flutter Project Add this to your

Mar 8, 2022

Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Create an Invoice PDF Document completely with Flutter and learn how to generate and view this invoice in Flutter.

Sep 22, 2022

Flutter demo application for Apple TV (tvos) using custom Flutter engine

Flutter demo application for Apple TV (tvos) using custom Flutter engine

Flutter for Apple TV A modification of the Flutter engine + test application to demonstrate that Flutter applications run on Apple TV This project (an

Sep 21, 2022

Udacity UI Clone made with Flutter Web (Flutter 2.0).

Udacity UI Clone made with Flutter Web (Flutter 2.0).

Udacity UI Clone Flutter Web 2.0 Description: Udacity UI Clone made with Flutter Web (Flutter 2.0). ScreenShots: Tools & languages: Android studio (ID

Apr 28, 2022

A Flutter application to demonstrate how to implement Google maps and its advanced options in a flutter app.

A Flutter application to demonstrate how to implement Google maps and its advanced options in a flutter app.

google_maps_flutter_example A new Flutter application to demonstrate how to implement flutter google maps in a flutter application and perfoem advance

Sep 20, 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 1
Owner
CxmyDev
CxmyDev
Drishti is a simple mobile application created as a project for YIP KDISC and Google Devs Solution Challenge

Drishti is a simple mobile application created as a project for YIP KDISC and Google Devs Solution Challenge. This app aims to make reporting and spreading the news of accidents and dangers easier and effective.

Friendly Neighbourhood Tekys 2 Mar 24, 2022
A two screen video call app built with flutter with the help of jitsi plugin

flutter_video_call A new Flutter application. Getting Started This project is a starting point for a Flutter application.

Success Charles 27 Aug 20, 2022
Math expression editing using an on-screen software keyboard or physical keyboard input in a typeset input field in Flutter.

math_keyboard is a Flutter package that allows editing math expressions using a typeset input field (so-called "math field") and a custom-made fully i

simpleclub 98 Sep 17, 2022
Clone Project twitter mobile login screen

Layout How to Use First of all, correctly configure the Flutter development environment on your machine, see https://flutter.dev/docs/get-started/inst

Guilherme Lino 0 Feb 13, 2022
Play Tic-Tac-Toe by clicking on the screen to fill the white spaces

tic_tac_toe Tic-Tac-Toe Description: Play Tic-Tac-Toe by clicking on the screen to fill the white spaces with red for X and green for 0. Demo: https:/

null 1 Apr 16, 2022
Flutter Responsive Game of Thrones Flutter App Flutter Responsive Game of Thrones Flutter App

got_2019 A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Pawan Kumar 16 Jun 9, 2022
Flutter RxDart Explained - The Flutter Way Flutter RxDart Explained - The Flutter Way

rx_demo A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started if this

Pawan Kumar 27 Oct 13, 2021
Flutter social button - A flutter package to create social media login buttons easily to any flutter app

Flutter Social Button is a flutter package to create social media login buttons easily to any flutter app.

Alok Dubey 7 Jul 24, 2022
Flutter Gender Prediction App Flutter Gender Prediction App

gender_predictor A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to get you started

Pawan Kumar 30 May 31, 2022