Original address: personal blog

A bolt from the blue

Humming a tune and wearing a pocket. Why do you want to ask me to go? Sorry, I’m on my way to work. Suddenly the pocket phone vibrates, buzz, buzz. Take it out for me. XX project test Bug push! Thought this project is not basically finished testing ah. In doubt, point to open a look.

“The project page is displayed on different screen phones such as iPhone 5 / SE/iPad and the page is not consistent with the UI design draft!”

Didn’t Big Flutter solve this problem on my own?

The storm

I hurried to the company with my little steps and went straight to the testing classmate, who was holding various types of mobile phones and shaking them in front of my eyes. I found out it was worse than I thought! I carefully compared the UI design draft with various types of mobile phones, and found that the style of some mobile phones is directly wrong, such as: a line can not be folded directly. At the same time, it shattered my little happiness.

Then my lazy mind kicked in. Can not not solve!

Then I thought of the famous theory, “If you can’t solve the problem, solve the person who asked it.”

Well, another bug-free day, happy ~

.

Wait, guys, don’t call the police. There’s more to come

I need an oil-paper umbrella

The test interrupted my train of thought and asked me when the problem would be solved. I said I’d go back and look into it, and you test something else.

I snuck back. It’s not too much of a problem. Cut him some slack for now!

Checking in

To do a premeditated thing, you first have to know her, know her context, like looking for a girlfriend, to… Ahem, ahem.

After some investigation, I found that, as I expected, the Flutter did not behave in the same way on different mobile phones. This is an old mobile problem. There are two main factors

  • Resolution (physical pixels)

    • iPhone 11 Pro Max 和 iPhone SEThe resolutions of are respectively2688 x 1242 和 1136 x 640. This represents the number of pixels the phone has vertically and horizontally.

  • Device Pixel Ratio (THE ratio of DPR physical pixels to device independent pixels)

Then it is possible to cause this color:

plot

We know what’s going on and we need to figure out how to kill her.

Here, we adopt the design scheme of Viewport, average the screen according to the size of the design draft, and finally calculate the size of the graphics on each mobile phone screen according to the value given by the UI design draft, so as to get a relatively adaptive effect.

Effect after use:

Carry out (How to hold our oil-paper umbrellas)

So how exactly do we use this thing? Is simple:

Import our package file

dependencies:
  flutter:
    sdk: flutter

  flutter_screen_adapter: ^ 0.0.1
Copy the code

The introduction of

import 'package:flutter_screen_adapter/flutter_screen_adapter.dart';
Copy the code

Initialize the

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {

    /// I'm going to initialize it here
    /// Be sure to be there`WidgetsApp` or `MaterialApp widget`In the initialization
    /// Otherwise you won't find it`MediaQuery`An error occurred

    ScreenAdapter.init(context);
    return. }}Copy the code

Set element size

Container(
  width: ScreenAdapter.value(100),
  height: ScreenAdapter.value(100),
  child: null
),
Copy the code

Provides properties

Here are two common ones

./// The adaptive value is obtained according to the device information
/// To use different screens to achieve the same effect as the design
///
/// [vertical] Indicates whether the value is vertical. The default value is horizontal
static double value(num value, {vertical = false});

/// Gets the screen width of the current device
///
static double getscreenWidth; .Copy the code

Sunshine rainbow little white horse

So here can hold up my oil-paper umbrella ~ but also after a storm sunny.

Another important point was that the test boy was relieved to see this (saved his life, while removing the penis from my neck).

Finally, here is our Demo:

  • Welcome to be done right, clap brick ~
  • Your code has books you’ve read and paths you’ve traveled
  • Better growth comes from experience

Blog address welcome to visit

GitHub I don’t want Star✨ (Crazy hint)