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:

Libraries

d2u
d2u_design
design2ui

Dart

dart:ui
Built-in types and core primitives for a Flutter application. [...]

Core

dart:async
Support for asynchronous programming, with classes such as Future and Stream. [...]
dart:collection
Classes and utilities that supplement the collection support in dart:core. [...]
dart:convert
Encoders and decoders for converting between different data representations, including JSON and UTF-8. [...]
dart:core
Built-in types, collections, and other core functionality for every Dart program. [...]
dart:developer
Interact with developer tools such as the debugger and inspector. [...]
dart:math
Mathematical constants and functions, plus a random number generator. [...]
dart:typed_data
Lists that efficiently handle fixed sized data (for example, unsigned 8 byte integers) and SIMD numeric types. [...]

VM

dart:io
File, socket, HTTP, and other I/O support for non-web applications. [...]
dart:isolate
Concurrent programming using isolates: independent workers that are similar to threads but don't share memory, communicating only via messages. [...]