design2ui 0.1.1

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

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 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:design2ui/design2ui.dart';
  
Version Uploaded Documentation Archive
0.1.1 Nov 17, 2018 Go to the documentation of design2ui 0.1.1 Download design2ui 0.1.1 archive
0.0.1 Nov 16, 2018 Go to the documentation of design2ui 0.0.1 Download design2ui 0.0.1 archive
Popularity:
Describes how popular the package is relative to other packages. [more]
0
Health:
Code health derived from static analysis. [more]
90
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
47
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.

Health issues and suggestions

Document public APIs (-10 points)

23 out of 23 API elements (library, class, field or method) have no adequate dartdoc content. Good documentation improves code readability and discoverability through search.

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