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

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}

初始化

  1. 在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());

}
  1. 替换根 MaterialApp 的 MediaQuery
MaterialApp(
      title: 'Autosize Demo',
      /// 替换,这样可以在以后 使用 MediaQuery.of(context) 得到 正确的Size
      builder: AutoSizeUtil.appBuilder,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        body: HomePage(),
      ),
    )
  1. 获取Size
AutoSizeUtil.getScreenSize()
//或者
MediaQuery.of(context).size
  1. 直接按照设计图的尺寸写即可
Container(
    alignment: Alignment.center,
    height: 60,
    width :60,
    color: Colors.redAccent,
    child: Text(
      "直接按照设计图写尺寸",
    ),
  )
  1. 获取真正的大小,比如 kToolbarHeight 是 56
// 一下方法获取到真正的大小,然后设置到 toolbar上
AutoSizeUtil.getRealSize(kToolbarHeight)
  1. 切记 不能使用 window 获取 size 或者是 获取 MediaQuery
    window.physicalSize
    MediaQueryData.fromWindow(window)

下一个目标

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

原理

掘进

Thank

FlutterTest

Issues
Owner
聂志洋
Read The Fucking Source Code
聂志洋
Plaso Connect is an application which acts as a one-stop solution where the people requiring blood plasma/oxygen can directly find and contact the donors and healthcare units as per their requirements

PLASO CONNECT - The Lifeline A one-stop platform for COVID relief resources -- Connecting patients with Plasma donors and oxygen suppliers. Built for

Niloy Sikdar 8 Oct 24, 2021
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

António Nicolau 18 Nov 10, 2021
This Flutter project recreates an electronics store home screen mockup.

E-Store Mobile App Home Screen This Flutter project recreates an electronics store home screen mockup. The mockup was created by @nasyiya.design on in

Azarro 32 Aug 17, 2021
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

Pawan Kumar 1.3k Nov 17, 2021
a project for learning all Flutter Widgets , sync from flutter.dev the officia website.

Flutter Widgets Catalog (WIP) 计划 1、使用Flutter开发一个全平台的Flutter Widgets Catalog APP,并且开源。在这个APP中可以通过图形化的方式查看所有Widgets的介绍,示例,视频教程。 2、所有文档内容由前一天从flutter.dev

ezshine 28 Nov 23, 2021
A collection of Flutter examples and demos.

Flutter samples A collection of open source samples that illustrate best practices for Flutter. Visual samples index The easiest way to browse through

Flutter 10.9k Nov 30, 2021
Lime client built using flutter

** This project ist OUT OF DATE and I am currently not able to maintain it ** What we are building Lime is a social media app, which allows you to pos

Sebastian Sellmair 356 Nov 29, 2021
The Flutter Planets app tutorial with commits per lesson

flutter planets tutorial This project contains the steps followed on the tutorial on sergiandreplace.com. Each lesson will correspond to a single bran

Sergi Martínez 710 Nov 26, 2021
News App created in Flutter using News API for fetching realtime data and Firebase as the backend and authenticator.

News Buzz News App created in Flutter using News API for fetching realtime data and Firebase as the backend and authenticator. Features Custom news fe

Ankur Kedia 501 Nov 18, 2021
A Simple Todo app design in Flutter to keep track of your task on daily basis. Its build on BLoC Pattern. You can add a project, labels, and due-date to your task also you can sort your task on the basis of project, label, and dates

WhatTodo Life can feel overwhelming. But it doesn’t have to. A Simple To-do app design in flutter to keep track of your task on daily basis. You can a

Burhanuddin Rashid 908 Dec 2, 2021
A fully functional Instagram clone written in Flutter using Firebase / Firestore

Fluttergram A working Instagram clone written in Flutter using Firebase / Firestore Demo Download the release APK to try out Fluttergram I update Flut

Matthew Danics 1.9k Nov 25, 2021
Flutter clone of my "Cinematic" App

Flutter Cinematic This app is a Flutter port of the native Android App Cinematic. My intention in creating this app was understanding the intricacies

Aaron Oertel 828 Nov 27, 2021
A beer tracking app made with Flutter

Beer Me Up Beer Me Up is an iOS and Android app build with Flutter. The app is a personal beer logging that allows you to enter every beer you have to

Benoit Letondor 441 Nov 17, 2021
Modern crypto portfolio & market explorer. Built with @Flutter

Trace Modern Crypto Portfolio & Market Explorer. Built with Flutter. Open Source. Lightweight. Clean. Straightforward. Fast. Powerful. Download for An

Trent Piercy 785 Nov 25, 2021
Flutter ToDo App with Firebase

Taskist Taskist is a ToDo List app for Task Management inspired by the design below The app is using Firebase, you have to configure it from your side

Hugo EXTRAT 725 Nov 25, 2021
Flutter app backed by Redux, shows animations, internationalization (i18n), ClipPath, fonts and others...

A Flutter tourism app that is backed-by Redux, shows animations, internationalization (i18n, English <=> Arabic), ClipPath, and fonts. YouTube demo I

Abdulmomen Kadum عبدالمؤمن كاظم 250 Nov 18, 2021
An app for orientation week at Trinity College, University of Toronto. Made with Flutter

Trinity Orientation 2018 An app created for Trinity College at University of Toronto. The app is acts as a companion for all first year students durin

Matthew Tory 562 Nov 24, 2021
Minimalist Flutter Todo App, built using BLoC pattern

Deer Minimalist Todo Planner app built around the idea of efficiency and clean aesthetic. Showcase Development Deer uses BLoC (Business Logic Componen

Aleksander Woźniak 292 Nov 14, 2021