flutter_screenutil 0.4.2

  • README.md
  • CHANGELOG.md
  • Example
  • Installing
  • Versions
  • 93

flutter_ScreenUtil

A flutter plugin for adapting screen and font size.Let your UI display a reasonable layout on different screen sizes!

中文文档

github: https://github.com/OpenFlutter/flutter_ScreenUtil

Usage:

Add dependency:

Please check the latest version before installation.

dependencies:
  flutter:
    sdk: flutter
  # add flutter_ScreenUtil
  flutter_screenutil: ^0.4.1

Add the following imports to your Dart code:

import 'package:flutter_screenutil/flutter_screenutil.dart';

Initialize the setup size

Please set the width and height of the design draft before use, the width and height of the design draft (unit px). Be sure to set the page in the MaterialApp's home(ie the entry file, just set it once) to ensure that the fit size is set before each use:

//Set the fit size (fill in the screen size of the device in the design)
//If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);

Use:

Adapt screen size:

Pass the px size of the design draft:

Width after adaptation: ScreenUtil().setWidth(540),
Height after adaptation: ScreenUtil().setHeight(200),

//for example:
Container(
           width: ScreenUtil().setWidth(375),
           height: ScreenUtil().setHeight(200),
           ...
            ),

Adapter font:

      ScreenUtil().setSp(28)         //Incoming font size,the unit is pixel, fonts will scale to respect Text Size accessibility settings
      ScreenUtil().setSp(28,false)  //Incoming font size,the unit is pixel,fonts will not scale to respect Text Size accessibility settings

for example:
        Text(
             'My font size is 28px and will not change with the system.',
                 style: TextStyle(
                   color: Colors.black,
                   fontSize: ScreenUtil().setSp(28, false) 
                 )
             ),

Other related apis:

    ScreenUtil.pixelRatio       //Device pixel density
    ScreenUtil.screenWidth      //Device width
    ScreenUtil.screenHeight     //Device height
    ScreenUtil.bottomBarHeight  //Bottom safe zone distance, suitable for buttons with full screen
    ScreenUtil.statusBarHeight  //Status bar height , Notch will be higher Unit px
    ScreenUtil.textScaleFactory //System font scaling factor

    ScreenUtil().scaleWidth //Ratio of actual width dp to design draft px
    ScreenUtil().scaleHeight //Ratio of actual height dp to design draft px

//import
import 'package:flutter_screenutil/flutter_screenutil.dart';

...

  @override
  Widget build(BuildContext context) {
    ///Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
    ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
    print('Device width:${ScreenUtil.screenWidth}'); //Device width
    print('Device height:${ScreenUtil.screenHeight}'); //Device height
    print(
        'Device pixel density:${ScreenUtil.pixelRatio}'); //Device pixel density
    print(
        'Bottom safe zone distance:${ScreenUtil.bottomBarHeight}'); //Bottom safe zone distance,suitable for buttons with full screen
    print(
        'Status bar height:${ScreenUtil.statusBarHeight}px'); //Status bar height , Notch will be higher Unit px
    print(
        'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}'); 
    print(
        'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}'); 
    print(
        'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}');
    print(
        'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}');
    return new Scaffold(
      appBar: new AppBar(
        title: new Text(widget.title),
      ),
      body: new Center(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Container(
                  width: ScreenUtil().setWidth(375),
                  height: ScreenUtil().setHeight(200),
                  color: Colors.red,
                  child: Text(
                    'My width:${ScreenUtil().setWidth(375)}dp',
                    style: TextStyle(
                        color: Colors.white,
                        fontSize: ScreenUtil().setSp(12, false)),
                  ),
                ),
                Container(
                  width: ScreenUtil().setWidth(375),
                  height: ScreenUtil().setHeight(200),
                  color: Colors.blue,
                  child: Text('My width:${ScreenUtil().setWidth(375)}dp',
                      style: TextStyle(
                          color: Colors.white,
                          fontSize: ScreenUtil().setSp(12, false))),
                ),
              ],
            ),
            Text('Device width:${ScreenUtil.screenWidth}px'),
            Text('Device height:${ScreenUtil.screenHeight}px'),
            Text('Device pixel density:${ScreenUtil.pixelRatio}'),
            Text('Bottom safe zone distance:${ScreenUtil.bottomBarHeight}px'),
            Text('Status bar height:${ScreenUtil.statusBarHeight}px'),
            Text(
              'Ratio of actual width dp to design draft px:${ScreenUtil().scaleWidth}',
              textAlign: TextAlign.center,
            ),
            Text(
              'Ratio of actual height dp to design draft px:${ScreenUtil().scaleHeight}',
              textAlign: TextAlign.center,
            ),
            Text(
              'The ratio of font and width to the size of the design:${ScreenUtil().scaleWidth * ScreenUtil.pixelRatio}',
              textAlign: TextAlign.center,
            ),
            Text(
              'The ratio of  height width to the size of the design:${ScreenUtil().scaleHeight * ScreenUtil.pixelRatio}',
              textAlign: TextAlign.center,
            ),
            SizedBox(
              height: ScreenUtil().setHeight(100),
            ),
            Text('System font scaling factor:${ScreenUtil.textScaleFactory}'),
            Column(
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                Text(
                    'My font size is 14px on the design draft and will not change with the system.',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: ScreenUtil().setSp(14, false),
                    )),
                Text(
                    'My font size is 14px on the design draft and will change with the system.',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: ScreenUtil().setSp(14),
                    )),
              ],
            )
          ],
        ),
      ),
    );
  }

example:

example demo

effect:

效果

[0.0.1] - first version

[0.2.2] - Fixed bug when releasing

[0.2.2] - Optimize documentation

[0.3.0] - Add font size adaptation

[0.3.0] - Perfect documentation

Width is enlarged relative to the design draft => The ratio of font and width to the size of the design Height is enlarged relative to the design draft => The ratio of height width to the size of the design

[0.4.0] - Optimize font adaptation method

[0.4.1] - Fix font adaptation issues

[0.4.2] - add two Properties

///Current device width dp ///当前设备宽度 dp ScreenUtil.screenWidthDp

///Current device height dp ///当前设备高度 dp ScreenUtil.screenHeightDp

example/README.md

example

flutter_screenutil的使用示例

效果 effect

Getting Started

For help getting started with Flutter, view our online documentation.

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_screenutil: ^0.4.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter packages get

Alternatively, your editor might support flutter packages get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_screenutil/flutter_screenutil.dart';
  
Version Uploaded Documentation Archive
0.4.2 Nov 26, 2018 Go to the documentation of flutter_screenutil 0.4.2 Download flutter_screenutil 0.4.2 archive
0.4.1 Nov 8, 2018 Go to the documentation of flutter_screenutil 0.4.1 Download flutter_screenutil 0.4.1 archive
0.4.0 Oct 17, 2018 Go to the documentation of flutter_screenutil 0.4.0 Download flutter_screenutil 0.4.0 archive
0.3.1 Oct 17, 2018 Go to the documentation of flutter_screenutil 0.3.1 Download flutter_screenutil 0.3.1 archive
0.3.0 Oct 16, 2018 Go to the documentation of flutter_screenutil 0.3.0 Download flutter_screenutil 0.3.0 archive
0.2.3 Oct 11, 2018 Go to the documentation of flutter_screenutil 0.2.3 Download flutter_screenutil 0.2.3 archive
0.2.2 Oct 10, 2018 Go to the documentation of flutter_screenutil 0.2.2 Download flutter_screenutil 0.2.2 archive
0.2.1 Oct 10, 2018 Go to the documentation of flutter_screenutil 0.2.1 Download flutter_screenutil 0.2.1 archive
0.2.0 Oct 10, 2018 Go to the documentation of flutter_screenutil 0.2.0 Download flutter_screenutil 0.2.0 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
86
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
93
Learn more about scoring.

We analyzed this package on Dec 5, 2018, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.1.0
  • pana: 0.12.7
  • Flutter: 1.0.0

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0-dev.68.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11
meta 1.1.6
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test