Showing
1 changed file
with
12 additions
and
9 deletions
@@ -40,31 +40,36 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | @@ -40,31 +40,36 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; | ||
40 | ### Property | 40 | ### Property |
41 | 41 | ||
42 | | Property | Type | Default Value | Description | | 42 | | Property | Type | Default Value | Description | |
43 | -| --------------- | ------------ | ------------- | ---------------------------------------------------------------------- | | 43 | +| --------------- | ------------ | ------------- | --------------------------------------------------------------------------- | |
44 | | deviceSize | Size | null | The size of the physical device | | 44 | | deviceSize | Size | null | The size of the physical device | |
45 | | designSize | Size | Size(360,690) | The size of the device screen in the design draft, in dp | | 45 | | designSize | Size | Size(360,690) | The size of the device screen in the design draft, in dp | |
46 | -| builder | Function | null | Generally returning a Function of MaterialApp type | | ||
47 | -| child | Widget | null | A part of builder that never being rebuilt | | 46 | +| builder | Function | null | Return widget that uses the library in a property (ex: MaterialApp's theme) | |
47 | +| child | Widget | null | A part of builder that its dependencies/properties don't use the library | | ||
48 | +| rebuildFactor | Function | *default* | Returns whether to rebuild or not when screen metrics changes. | | ||
48 | | orientation | Orientation | portrait | screen orientation | | 49 | | orientation | Orientation | portrait | screen orientation | |
49 | | splitScreenMode | bool | false | support for split screen | | 50 | | splitScreenMode | bool | false | support for split screen | |
50 | | minTextAdapt | bool | false | Whether to adapt the text according to the minimum of width and height | | 51 | | minTextAdapt | bool | false | Whether to adapt the text according to the minimum of width and height | |
51 | | context | BuildContext | null | Get physical device data if not provided, by MediaQuery.of(context) | | 52 | | context | BuildContext | null | Get physical device data if not provided, by MediaQuery.of(context) | |
52 | 53 | ||
54 | +**Note : You must either provide builder, child or both.** | ||
55 | + | ||
53 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option | 56 | ### Initialize and set the fit size and font size to scale according to the system's "font size" accessibility option |
54 | 57 | ||
55 | Please set the size of the design draft before use, the width and height of the design draft. | 58 | Please set the size of the design draft before use, the width and height of the design draft. |
56 | 59 | ||
57 | -#### The first way | 60 | +#### The first way (Recommended) |
58 | 61 | ||
59 | ```dart | 62 | ```dart |
60 | void main() => runApp(MyApp()); | 63 | void main() => runApp(MyApp()); |
61 | 64 | ||
62 | class MyApp extends StatelessWidget { | 65 | class MyApp extends StatelessWidget { |
66 | + const MyApp({Key? key}) : super(key: key); | ||
67 | + | ||
63 | @override | 68 | @override |
64 | Widget build(BuildContext context) { | 69 | Widget build(BuildContext context) { |
65 | //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp) | 70 | //Set the fit size (Find your UI design, look at the dimensions of the device screen and fill it in,unit in dp) |
66 | return ScreenUtilInit( | 71 | return ScreenUtilInit( |
67 | - designSize: Size(360, 690), | 72 | + designSize: const Size(360, 690), |
68 | minTextAdapt: true, | 73 | minTextAdapt: true, |
69 | splitScreenMode: true, | 74 | splitScreenMode: true, |
70 | builder: (child) { | 75 | builder: (child) { |
@@ -74,22 +79,20 @@ class MyApp extends StatelessWidget { | @@ -74,22 +79,20 @@ class MyApp extends StatelessWidget { | ||
74 | // You can use the library anywhere in the app even in theme | 79 | // You can use the library anywhere in the app even in theme |
75 | theme: ThemeData( | 80 | theme: ThemeData( |
76 | primarySwatch: Colors.blue, | 81 | primarySwatch: Colors.blue, |
77 | - textTheme: TextTheme(bodyText2: TextStyle(fontSize: 30.sp)), | 82 | + textTheme: Typography.englishLike2018.apply(fontSizeFactor: 1.sp), |
78 | ), | 83 | ), |
79 | home: child, | 84 | home: child, |
80 | ); | 85 | ); |
81 | }, | 86 | }, |
82 | - child: HomePage(title: 'First Method'), | 87 | + child: const HomePage(title: 'First Method'), |
83 | ); | 88 | ); |
84 | } | 89 | } |
85 | } | 90 | } |
86 | - | ||
87 | ``` | 91 | ``` |
88 | 92 | ||
89 | #### The second way:You need a trick to support font adaptation in the textTheme of app theme | 93 | #### The second way:You need a trick to support font adaptation in the textTheme of app theme |
90 | 94 | ||
91 | **Hybrid development uses the second way** | 95 | **Hybrid development uses the second way** |
92 | -**(If it is not necessary, it is recommended to use the second)** | ||
93 | 96 | ||
94 | not support this: | 97 | not support this: |
95 | 98 |
-
Please register or login to post a comment