A new control plugin was found in recent development:sizerFor mobile phone and tablet screen and font adaptation is very helpful, no more nonsense to say, directly above.

** This control is not used: see figure ** below

** After using this control adaptation, see the following figure **

And you can see that it fits the screen and the font, and what if it does?

1. Download:

Add it to pubspec.yaml

dependencies:
  ...
  sizer: ^2.015.
Copy the code

2. What parameters do controls have:

  • .h– Returns the percentage of screen height for example.20hThat’s 20% of the height of the screen.
  • .w– Returns the percentage of screen height for example.20wThat’s 20% of the screen width.
  • .sp– Obtain the font size displayed on the corresponding device based on the screen size
  • SizerUtil.orientation– Gets landscape or portrait of the screen
  • SizerUtil.deviceType– Gets whether the current device is a phone or a computer

3. How to use it

  1. First of all in.dartFile import

import 'package:sizer/sizer.dart';

  1. useSizerThe parcelMaterialApp
class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { return Sizer( builder: (context, orientation, deviceType) { return MaterialApp( debugShowCheckedModeBanner: false, title: 'Sizer', theme: ThemeData.light(), home: HomeScreen() , ); }); }}Copy the code
  1. Whether you want to use sizer on any page or import it first (automatic import is not supported yet)

import 'package:sizer/sizer.dart';

  1. Some examples
Container(width: 20.w, // Take 20% of the screen width, height:30.h // Take 30% of the screen height)Copy the code
Symmetric (vertical: 5. H, horizontal: 5. Horizontal: 5. 3.h), child: Container(), );Copy the code
Font ('Sizer',style: TextStyle(fontSize: 15.sp),);Copy the code
Print (" Use sizer value and print data on the phone: "); print(20.h); print(10.w); print(10.sp); Glory 9i I/flutter (13030): 143.333333333331 I/flutter (13030): 36.0 I/flutter (13030): 12.0Copy the code

Personally, I think it is very practical, if you are also interested, please try it.

Official website:

Pub. Dev/packages/si…

Efforts 💪 dry over ha ha