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