flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
李卓原
3eff3064 1 parent 4f879007

merge v4 

update readme
Inline Side-by-side
Showing 11 changed files with 118 additions and 78 deletions
... ... @@ -82,6 +82,7 @@ class MyApp extends StatelessWidget {
ScreenUtil().scaleWidth //The ratio of actual width to UI design
ScreenUtil().scaleHeight //The ratio of actual height to UI design
ScreenUtil().orientation //Screen orientation
0.2.sw //0.2 times the screen width
0.5.sh //50% of screen height
```
... ... @@ -181,11 +182,31 @@ Column(
)
```
#### Setting font does not change with system font size
```
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
),
builder: (context, widget) {
return MediaQuery(
///Setting font does not change with system font size
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
child: widget,
);
},
home: HomePage(title: 'FlutterScreenUtil Demo'),
),
```
[widget test](https://github.com/OpenFlutter/flutter_screenutil/issues/115)
### Example:
[example demo](https://github.com/OpenFlutter/flutter_screenutil/blob/master/example/lib/main_zh.dart)
[example demo](https://github.com/OpenFlutter/flutter_screenutil/blob/master/example/lib/main.dart)
### Effect:
... ...
... ... @@ -49,24 +49,22 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
```dart
//填入设计稿中设备的屏幕尺寸
class HomePage extends StatelessWidget {
const HomePage({Key key}) : super(key: key);
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
// 初始化
ScreenUtil.init(
// 设备像素大小(必须在首页中获取)
BoxConstraints(
maxWidth: MediaQuery.of(context).size.width,
maxHeight: MediaQuery.of(context).size.height,
),
// 设计尺寸
designSize: Size(750, 1334),
return ScreenUtilInit(
designSize: Size(360, 690),
allowFontScaling: false,
);
return Container(
child: child,
builder: () => MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HomePage(title: 'FlutterScreenUtil Demo'),
),
);
}
}
... ... @@ -94,6 +92,8 @@ class HomePage extends StatelessWidget {
ScreenUtil().scaleWidth // 实际宽度设计稿宽度的比例
ScreenUtil().scaleHeight // 实际高度与设计稿高度度的比例
ScreenUtil().orientation //屏幕方向
0.2.sw //屏幕宽度的0.2倍
0.5.sh //屏幕高度的50%
```
... ... @@ -182,6 +182,26 @@ Column(
)
```
#### 设置字体不随系统字体大小进行改变
```
MaterialApp(
debugShowCheckedModeBanner: false,
title: 'Flutter_ScreenUtil',
theme: ThemeData(
primarySwatch: Colors.blue,
),
builder: (context, widget) {
return MediaQuery(
///设置文字大小不随系统设置改变
data: MediaQuery.of(context).copyWith(textScaleFactor: 1.0),
child: widget,
);
},
home: HomePage(title: 'FlutterScreenUtil Demo'),
),
```
[widget test](https://github.com/OpenFlutter/flutter_screenutil/issues/115)
... ...
... ... @@ -84,6 +84,8 @@ class MyApp extends StatelessWidget {
ScreenUtil().scaleWidth //The ratio of actual width to UI design
ScreenUtil().scaleHeight //The ratio of actual height to UI design
ScreenUtil().orientation //Screen orientation
0.2.sw //0,2 vezes a largura da tela
0.5.sh //50% altura da tela
```
... ... @@ -334,7 +336,7 @@ class _HomePageState extends State<HomePage> {
### Exemplo:
[Demonstração](https://github.com/OpenFlutter/flutter_screenutil/blob/master/example/lib/main_zh.dart)
[Demonstração](https://github.com/OpenFlutter/flutter_screenutil/blob/master/example/lib/main.dart)
Efeito:
... ...
... ... @@ -5,12 +5,9 @@ export "FLUTTER_APPLICATION_PATH=/Users/lizhuoyuan/Development/Project/flutter_s
export "FLUTTER_TARGET=/Users/lizhuoyuan/Development/Project/flutter_screenutil/example/lib/main.dart"
export "FLUTTER_BUILD_DIR=build"
export "SYMROOT=${SOURCE_ROOT}/../build/ios"
export "OTHER_LDFLAGS=$(inherited) -framework Flutter"
export "FLUTTER_FRAMEWORK_DIR=/Users/lizhuoyuan/Development/flutter/bin/cache/artifacts/engine/ios"
export "FLUTTER_BUILD_NAME=1.0.0"
export "FLUTTER_BUILD_NUMBER=1"
export "DART_DEFINES=flutter.inspector.structuredErrors%3Dtrue"
export "DART_OBFUSCATION=false"
export "TRACK_WIDGET_CREATION=true"
export "TREE_SHAKE_ICONS=false"
export "PACKAGE_CONFIG=.packages"
export "PACKAGE_CONFIG=/Users/lizhuoyuan/Development/Project/flutter_screenutil/example/.dart_tool/package_config.json"
... ...
... ... @@ -2,6 +2,6 @@
<Workspace
version = "1.0">
<FileRef
location = "group:Runner.xcodeproj">
location = "self:">
</FileRef>
</Workspace>
... ...
... ... @@ -34,8 +34,6 @@ class HomePage extends StatefulWidget {
class _HomePageState extends State<HomePage> {
@override
Widget build(BuildContext context) {
//Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
printScreenInformation();
return Scaffold(
appBar: AppBar(
... ... @@ -105,20 +103,17 @@ class _HomePageState extends State<HomePage> {
textAlign: TextAlign.center,
),
SizedBox(
height: 50.h,
height: 10.h,
),
Text('System font scaling factor:${ScreenUtil().textScaleFactor}'),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Container(
height: 32.h,
child: Text(
'My font size is 16sp on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: 16.sp,
),
Text(
'My font size is 16sp on the design draft and will not change with the system.',
style: TextStyle(
color: Colors.black,
fontSize: 16.nsp,
),
),
Text(
... ... @@ -147,5 +142,6 @@ class _HomePageState extends State<HomePage> {
print('System font scaling:${ScreenUtil().textScaleFactor}');
print('0.5 times the screen width:${0.5.sw}dp');
print('0.5 times the screen height:${0.5.sh}dp');
print('Screen orientation:${ScreenUtil().orientation}');
}
}
... ...
... ... @@ -8,7 +8,7 @@ class MyApp extends StatelessWidget {
Widget build(BuildContext context) {
//Set the fit size (fill in the screen size of the device in the design) If the design is based on the size of the iPhone6 ​​(iPhone6 ​​750*1334)
return ScreenUtilInit(
designSize: Size(750, 1334),
designSize: Size(360, 690),
allowFontScaling: false,
builder: () => MaterialApp(
debugShowCheckedModeBanner: false,
... ... @@ -51,9 +51,9 @@ class _HomePageState extends State<HomePage> {
height: 200.h,
color: Colors.red,
child: Text(
'我的实际宽度:${0.5.sw}dp \n'
'我的实际高度:${ScreenUtil().setHeight(200)}dp',
style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12)),
'我的实际宽度:${180.w}dp \n'
'我的实际高度:${200.h}dp',
style: TextStyle(color: Colors.white, fontSize: 12.sp),
),
),
Container(
... ... @@ -64,7 +64,9 @@ class _HomePageState extends State<HomePage> {
child: Text(
'我的设计稿宽度: 180dp \n'
'我的设计稿高度: 200dp',
style: TextStyle(color: Colors.white, fontSize: ScreenUtil().setSp(12))),
style: TextStyle(
color: Colors.white,
fontSize: ScreenUtil().setSp(12))),
),
],
),
... ... @@ -131,10 +133,13 @@ class _HomePageState extends State<HomePage> {
print('状态栏高度:${ScreenUtil().statusBarHeight}dp');
print('实际宽度的dp与设计稿px的比例:${ScreenUtil().scaleWidth}');
print('实际高度的dp与设计稿px的比例:${ScreenUtil().scaleHeight}');
print('宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}');
print('高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}');
print(
'宽度和字体相对于设计稿放大的比例:${ScreenUtil().scaleWidth * ScreenUtil().pixelRatio}');
print(
'高度相对于设计稿放大的比例:${ScreenUtil().scaleHeight * ScreenUtil().pixelRatio}');
print('系统的字体缩放比例:${ScreenUtil().textScaleFactor}');
print('屏幕宽度的0.5:${0.5.sw}dp');
print('屏幕高度的0.5:${0.5.sh}dp');
print('屏幕方向:${ScreenUtil().orientation}');
}
}
... ...
... ... @@ -6,5 +6,5 @@
library flutter_screenutil;
export 'size_extension.dart';
export 'screenutil.dart';
export 'screen_util.dart';
export 'screenutil_init.dart';
... ...
... ... @@ -3,9 +3,8 @@
* email: zhuoyuan93@gmail.com
*/
import 'dart:ui' as ui;
import 'dart:math';
import 'dart:ui' as ui;
import 'package:flutter/material.dart';
... ... @@ -21,6 +20,9 @@ class ScreenUtil {
/// allowFontScaling Specifies whether fonts should scale to respect Text Size accessibility settings. The default is false.
late bool allowFontScaling;
///屏幕方向
static late Orientation _orientation;
static late double _pixelRatio;
static late double _textScaleFactor;
static late double _screenWidth;
... ... @@ -35,9 +37,8 @@ class ScreenUtil {
}
static void init(
BoxConstraints constraints,
Orientation orientation,
{
BoxConstraints constraints,
Orientation orientation, {
Size designSize = defaultSize,
bool allowFontScaling = false,
}) {
... ... @@ -45,12 +46,14 @@ class ScreenUtil {
_instance
..uiSize = designSize
..allowFontScaling = allowFontScaling;
if(orientation == Orientation.portrait){
_orientation = orientation;
if (orientation == Orientation.portrait) {
_screenWidth = constraints.maxWidth;
_screenHeight = constraints.maxHeight;
}else{
_screenHeight = constraints.maxHeight;
} else {
_screenWidth = constraints.maxHeight;
_screenHeight = constraints.maxWidth;
_screenHeight = constraints.maxWidth;
}
var window = WidgetsBinding.instance?.window ?? ui.window;
... ... @@ -60,6 +63,10 @@ class ScreenUtil {
_textScaleFactor = window.textScaleFactor;
}
///获取屏幕方向
///Get screen orientation
Orientation get orientation => _orientation;
/// 每个逻辑像素的字体像素数，字体的缩放比例
/// The number of font pixels for each logical pixel.
double get textScaleFactor => _textScaleFactor;
... ... @@ -119,12 +126,7 @@ class ScreenUtil {
///Font size adaptation method
///- [fontSize] The size of the font on the UI design, in dp.
///- [allowFontScaling]
double setSp(num fontSize, {bool? allowFontScalingSelf}) =>
allowFontScalingSelf == null
? (allowFontScaling
? (fontSize * scaleText) * _textScaleFactor
: (fontSize * scaleText))
: (allowFontScalingSelf
? (fontSize * scaleText) * _textScaleFactor
: (fontSize * scaleText));
double setSp(num fontSize, {bool? allowFontScalingSelf}) => allowFontScalingSelf == null
? (allowFontScaling ? (fontSize * scaleText) * _textScaleFactor : (fontSize * scaleText))
: (allowFontScalingSelf ? (fontSize * scaleText) * _textScaleFactor : (fontSize * scaleText));
}
... ...
import 'package:flutter/widgets.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/screen_util.dart';
import 'screenutil.dart';
class ScreenUtilInit extends StatelessWidget {
/// A helper widget that initializes [ScreenUtil]
... ... @@ -21,23 +21,20 @@ class ScreenUtilInit extends StatelessWidget {
@override
Widget build(BuildContext context) {
return LayoutBuilder(
builder: (_, BoxConstraints constraints) {
return OrientationBuilder(
builder: (_, Orientation orientation) {
// ignore: missing_return
if (constraints.maxWidth != 0) {
ScreenUtil.init(
constraints,
orientation,
designSize: designSize,
allowFontScaling: allowFontScaling,
);
}
return builder();
},
);
},
);
return LayoutBuilder(builder: (_, BoxConstraints constraints) {
return OrientationBuilder(
builder: (_, Orientation orientation) {
if (constraints.maxWidth != 0) {
ScreenUtil.init(
constraints,
orientation,
designSize: designSize,
allowFontScaling: allowFontScaling,
);
}
return builder();
},
);
});
}
}
... ...
import 'package:flutter_screenutil/screenutil.dart';
import 'package:flutter_screenutil/screen_util.dart';
extension SizeExtension on num {
///[ScreenUtil.setWidth]
... ...