design2ui 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 56

design2ui #

中文文档

UI adaptation plugin, so that the interface and font display the same effect on the different ppi phones

  • Scale based on the design pixel density
  • Scale according to the design map dp and the corresponding px
  • Scale according to design width and pixel

Instructions: #

  • Import design2ui.dart

     import 'package:design2ui/design2ui.dart';
    
  • Init Initialize on the home page

     D2U.init(context);
    
  • Load design settings

    • Know the pixel ratio and width of the design, assuming the design width is 1080px/540dp
      D2U.load(D2UDesign(2.0,540.0));
      
    • Know the design map ppi and width, assuming the design map ppi is 320, width 540dp, can also be px
      D2U.load(D2UDesign.fromDensity(320,widthDp:540.0));
      D2U.load(D2UDesign.fromDensity(320,widthPx:1080));
      
    • Know the design dp and px, assuming the design image has an icon width of 540dp/1080px
      D2U.load(D2UDesign.fromCompare(540.0,1080));
      
    • Only know the design width dp or px (fill in px, use px and dp effect is the same)
      D2U.load(D2UDesign.fromSize(widthDp:540.0));
      D2U.load(D2UDesign.fromSize(widthPx:1080));
      
  • Usage

    • Set width and height:D2U.d2u(dp:dp,px:px);
      Container(
        width: D2U.d2u(dp: 100.0),
        height: D2U.d2u(dp: 100.0),
      )
      
    • Font settings can choose whether to follow the system zoom
      //scale:false
      TextStyle(
        fontSize: D2U.d2ut(24.0),
      )
      
      //scale
      TextStyle(
        fontSize: D2U.d2ut(24.0,scale: true),
      )
      

example:

[0.0.1] - Implement basic functions.

[0.1.1] - Add example

example/README.md

Example #

design width: 540dp/1080px

  • Initialization

      D2U.init(context);
      D2U.load(D2UDesign.fromCompare(540.0, 1080));
    
  • Use

    The design has a square of 378dp size and color is blue

     Container(
                     width: D2U.d2u(dp: 378.0),
                     height: D2U.d2u(dp: 378.0),
                     color: Colors.blue,
                     child: Center(
                       child: Text(
                         'width:${D2U.d2u(dp: 378.0).floor()}dp\n'
                             'height:${D2U.d2u(dp: 378.0).floor()}dp\n'
                             'density:${D2U.defaultDensity * D2U.pixelRatio}\n'
                             'screen width:${D2U.screenWidth * D2U.pixelRatio}px\n'
                             'screen height:${D2U.screenHeight * D2U.pixelRatio}px',
                         style: TextStyle(
                           fontSize: D2U.d2ut(18.0),
                         ),
                       ),
                     ),
                   ),
    

screenshot: #

Use this package as a library

1. Depend on it

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


dependencies:
  design2ui: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

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

3. Import it

Now in your Dart code, you can use:


import 'package:design2ui/design2ui.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
13
Health:
Code health derived from static analysis. [more]
99
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
56
Learn more about scoring.

We analyzed this package on Oct 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health issues and suggestions

Document public APIs. (-1 points)

25 out of 25 API elements have no dartdoc comment.Providing good documentation for libraries, classes, functions, and other API elements improves code readability and helps developers find and use your API.

Format lib/d2u_design.dart.

Run flutter format to format lib/d2u_design.dart.

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 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test