flutter_package / flutter_screenutil

Go to a project
Toggle navigation Toggle navigation pinning
Thalles Santos
eda02caf 1 parent f080dcb4

Readme translation to Portuguese

Inline Side-by-side
Showing 3 changed files with 267 additions and 5 deletions
@@ -7,6 +7,7 @@ @@ -7,6 +7,7 @@
7 *Note*: This plugin is still under development, and some APIs might not be available yet. 7 *Note*: This plugin is still under development, and some APIs might not be available yet.
8 8
9 [中文文档](https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md) 9 [中文文档](https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md)
  10 +[README em Português](https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_PT.md)
10 11
11 github: https://github.com/OpenFlutter/flutter_screenutil 12 github: https://github.com/OpenFlutter/flutter_screenutil
12 13
@@ -230,13 +231,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; @@ -230,13 +231,13 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
230 crossAxisAlignment: CrossAxisAlignment.start, 231 crossAxisAlignment: CrossAxisAlignment.start,
231 children: <Widget>[ 232 children: <Widget>[
232 Text( 233 Text(
233 - 'My font size is 14px on the design draft and will not change with the system.', 234 + 'My font size is 24px on the design draft and will not change with the system.',
234 style: TextStyle( 235 style: TextStyle(
235 color: Colors.black, 236 color: Colors.black,
236 - fontSize: ScreenUtil.getInstance().setSp(14), 237 + fontSize: ScreenUtil.getInstance().setSp(24),
237 )), 238 )),
238 Text( 239 Text(
239 - 'My font size is 14px on the design draft and will change with the system.', 240 + 'My font size is 24px on the design draft and will change with the system.',
240 style: TextStyle( 241 style: TextStyle(
241 color: Colors.black, 242 color: Colors.black,
242 fontSize: ScreenUtil(allowFontScaling: true).setSp(24), 243 fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
@@ -9,6 +9,7 @@ @@ -9,6 +9,7 @@
9 *注意*：此插件仍处于开发阶段，某些API可能尚未推出。 9 *注意*：此插件仍处于开发阶段，某些API可能尚未推出。
10 10
11 [README of English](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README.md) 11 [README of English](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README.md)
  12 +[README em Português](https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_PT.md)
12 13
13 github: https://github.com/OpenFlutter/flutter_screenutil 14 github: https://github.com/OpenFlutter/flutter_screenutil
14 15
@@ -228,10 +229,10 @@ import 'package:flutter_screenutil/flutter_screenutil.dart'; @@ -228,10 +229,10 @@ import 'package:flutter_screenutil/flutter_screenutil.dart';
228 Column( 229 Column(
229 crossAxisAlignment: CrossAxisAlignment.start, 230 crossAxisAlignment: CrossAxisAlignment.start,
230 children: <Widget>[ 231 children: <Widget>[
231 - Text('我的文字大小在设计稿上是25px，不会随着系统的文字缩放比例变化', 232 + Text('我的文字大小在设计稿上是24px，不会随着系统的文字缩放比例变化',
232 style: TextStyle( 233 style: TextStyle(
233 color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))), 234 color: Colors.black, fontSize: ScreenUtil.getInstance().setSp(24))),
234 - Text('我的文字大小在设计稿上是25px，会随着系统的文字缩放比例变化', 235 + Text('我的文字大小在设计稿上是24px，会随着系统的文字缩放比例变化',
235 style: TextStyle( 236 style: TextStyle(
236 color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))), 237 color: Colors.black, fontSize: ScreenUtil(allowFontScaling: true).setSp(24))),
237 ], 238 ],
  1 +
  2 +# flutter_screenutil
  3 +[![pub package](https://img.shields.io/pub/v/flutter_screenutil.svg)](https://pub.dartlang.org/packages/flutter_screenutil)
  4 +
  5 +**Um plugin Flutter para adaptação de tamanho de tela e fontes. Deixe sua UI exibir um layout aceitável em diferentes tamanhos de tela!**
  6 +
  7 +*Nota*: Este plugin ainda está em desenvolvimento e algumas APIs podem ainda não estar disponíveis.
  8 +
  9 +[中文文档](https://github.com/OpenFlutter/flutter_screenutil/blob/master/README_CN.md)
  10 +[README of English](https://github.com/OpenFlutter/flutter_ScreenUtil/blob/master/README.md)
  11 +
  12 +github: https://github.com/OpenFlutter/flutter_screenutil
  13 +
  14 +[Histórico de atualizações](/CHANGELOG.md)
  15 +
  16 +## Como usar:
  17 +
  18 +### Adicionando a dependência：
  19 +Por favor, verifique a última versão antes da instalação.
  20 +```
  21 +dependencies:
  22 + flutter:
  23 + sdk: flutter
  24 + # add flutter_ScreenUtil
  25 + flutter_screenutil: ^0.5.3
  26 +```
  27 +
  28 +### Adicione o seguinte import em seu código Dart:
  29 +```
  30 +import 'package:flutter_screenutil/flutter_screenutil.dart';
  31 +```
  32 +
  33 +### Propriedades
  34 +
  35 +|Propriedade|Tipo|Valor Padrão|Descrição|
  36 +|:---|:---|:---|:---|
  37 +|width|double|1080px|A largura do dispositivo no protótipo de design, em px|
  38 +|height|double|1920px|A altura do dispositivo no protótipo de design, em px|
  39 +|allowFontScaling|bool|false|Defina caso o tamanho da fonte seja dimensionado de acordo com a opção "tamanho de fonte" na acessibilidade do sistema|
  40 +
  41 +### Inicialize e defina o tamanho de ajuste e tamanho da fonte para dimensionar de acordo com a opção "tamanho de fonte" na acessibilidade do sistema
  42 +Por favor, defina a largura e altura do protótipo de design antes de usar (em pixels).
  43 +Certifique-se de definir as dimensões na paginal inicial do MaterialApp (ou seja, no arquivo de entrada, defina apenas uma vez) para garantir que o tamanho de ajuste seja o mesmo antes de cada uso:
  44 +
  45 +```dart
  46 +
  47 +//Preencha o tamanho da tela do dispositivo no protótipo de design
  48 +
  49 +//Valor padrão: width : 1080px , height:1920px , allowFontScaling:false
  50 +ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
  51 +
  52 +//Se o design é baseado no iPhone6 ​​(iPhone6 ​​750*1334)
  53 +ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
  54 +
  55 +//Se você quer definir que o tamanho da fonte seja ajustado de acordo com a opção "tamanho da fonte" na acessibilidade do sistema
  56 +ScreenUtil.instance = ScreenUtil(width: 750, height: 1334, allowFontScaling: true)..init(context);
  57 +
  58 +```
  59 +
  60 +### Uso：
  61 +
  62 +#### Adaptar o tamanho da tela：
  63 +
  64 +Informe o tamanho em pixels do protótipo de design:
  65 +
  66 +Adaptado à largura da tela: `ScreenUtil.getInstance().setWidth(540)`,
  67 +
  68 +Adaptado à altura da tela: `ScreenUtil.getInstance().setHeight(200)`,
  69 +
  70 +Você também pode utilizar `ScreenUtil()` ao invés de `ScreenUtil.getInstance()`,
  71 +por exemplo:`ScreenUtil().setHeight(200)`
  72 +
  73 +**Nota**
  74 +
  75 +Altura também é adaptada de acordo com o setWidth para garantir que não tenha deformação (quando quiser um quadrado)
  76 +
  77 +O método setHeight é a principal forma de adaptar a altura, se quiser controlar a altura e a realidade de uma tela na UiUsed quando a mesma for exibida.
  78 +
  79 +```dart
  80 +//Exemplo:
  81 +//Retângulo
  82 +Container(
  83 + width: ScreenUtil.getInstance().setWidth(375),
  84 + height: ScreenUtil.getInstance().setHeight(200),
  85 + ...
  86 + ),
  87 +
  88 +////Se quiser exibir um quadrado:
  89 +Container(
  90 + width: ScreenUtil.getInstance().setWidth(300),
  91 + height: ScreenUtil.getInstance().setWidth(300),
  92 + ),
  93 +
  94 +```
  95 +
  96 +#### Adaptar fonte:
  97 +``` dart
  98 +//Tamanho da fonte informado, em pixels, a fonte não irá dimensionar respeitando a opção "Tamanho de Fonte" nas configurações de acessibilidade
  99 +//(allowFontScaling quando iniciar o ScreenUtil)
  100 +ScreenUtil.getInstance().setSp(28)
  101 +
  102 +//Tamanho da fonte informado，em pixels，a fonte irá dimensionar respeitando a opção "Tamanho de Fonte" nas configurações de acessibilidade
  103 +//(Se em algum lugar não seguir a configuração global da propriedade allowFontScaling)
  104 +ScreenUtil(allowFontScaling: true).setSp(28)
  105 +
  106 +//Exemplo:
  107 +
  108 +Column(
  109 + crossAxisAlignment: CrossAxisAlignment.start,
  110 + children: <Widget>[
  111 + Text(
  112 + 'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.',
  113 + style: TextStyle(
  114 + color: Colors.black,
  115 + fontSize: ScreenUtil.getInstance().setSp(24),
  116 + )),
  117 + Text(
  118 + 'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.',
  119 + style: TextStyle(
  120 + color: Colors.black,
  121 + fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
  122 + )),
  123 + ],
  124 + )
  125 +
  126 +
  127 +```
  128 +
  129 +#### Outras APIs relacionadas：
  130 +```dart
  131 + ScreenUtil.pixelRatio //Densidade de pixels do dispositivo
  132 + ScreenUtil.screenWidth //Largura da tela do dispositivo
  133 + ScreenUtil.screenHeight //Altura da tela do dispositivo
  134 + ScreenUtil.bottomBarHeight //Distância segura do rodapé, adequada para botões em tela cheia
  135 + ScreenUtil.statusBarHeight //Altura da status bar em pixels, Notch será maior
  136 + ScreenUtil.textScaleFactory //Fator de escala da fonte do sistema
  137 +
  138 + ScreenUtil.getInstance().scaleWidth //Razão entre a largura atual e a largura do protótipo de design em pixels
  139 + ScreenUtil.getInstance().scaleHeight //Razão entre a altura atual e a altura do protótipo de design em pixels
  140 +
  141 +```
  142 +
  143 +```dart
  144 +//import
  145 +import 'package:flutter_screenutil/flutter_screenutil.dart';
  146 +
  147 +...
  148 +
  149 + @override
  150 + Widget build(BuildContext context) {
  151 + ///Define o tamanho de ajuste (preenche o tamanho da tela do dispositivo no design). Se o design é baseado no tamanho do iPhone6 (iPhone6 ​​750*1334)
  152 + ScreenUtil.instance = ScreenUtil(width: 750, height: 1334)..init(context);
  153 +
  154 + print('Largura do dispositivo:${ScreenUtil.screenWidth}'); //Largura do dispositivo
  155 + print('Altura do dispositivo:${ScreenUtil.screenHeight}'); //Altura do dispositivo
  156 + print(
  157 + 'Densidade de pixels do dispositivo:${ScreenUtil.pixelRatio}'); //Densidade de pixels do dispositivo
  158 + print(
  159 + 'Distância segura do rodapé:${ScreenUtil.bottomBarHeight}'); //Distância segura do rodapé, adequada para botões em tela cheia
  160 + print(
  161 + 'Altura da status bar:${ScreenUtil.statusBarHeight}px'); //Altura da status bar em pixels, Notch será maior
  162 + print(
  163 + 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleWidth}');
  164 + print(
  165 + 'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleHeight}');
  166 + print(
  167 + 'Razão da fonte e largura para o tamanho do design:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}');
  168 + print(
  169 + 'Razão da fonte e altura para o tamanho do design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}');
  170 +
  171 + return new Scaffold(
  172 + appBar: new AppBar(
  173 + title: new Text(widget.title),
  174 + ),
  175 + body: new Center(
  176 + child: Column(
  177 + crossAxisAlignment: CrossAxisAlignment.center,
  178 + children: <Widget>[
  179 + Row(
  180 + children: <Widget>[
  181 + Container(
  182 + padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
  183 + width: ScreenUtil.getInstance().setWidth(375),
  184 + height: ScreenUtil.getInstance().setHeight(200),
  185 + color: Colors.red,
  186 + child: Text(
  187 + 'Minha largura:${ScreenUtil.getInstance().setWidth(375)}dp',
  188 + style: TextStyle(
  189 + color: Colors.white,
  190 + fontSize: ScreenUtil.getInstance().setSp(12)),
  191 + ),
  192 + ),
  193 + Container(
  194 + padding: EdgeInsets.all(ScreenUtil.getInstance().setWidth(10)),
  195 + width: ScreenUtil.getInstance().setWidth(375),
  196 + height: ScreenUtil.getInstance().setHeight(200),
  197 + color: Colors.blue,
  198 + child: Text('Minha largura:${ScreenUtil.getInstance().setWidth(375)}dp',
  199 + style: TextStyle(
  200 + color: Colors.white,
  201 + fontSize: ScreenUtil.getInstance().setSp(12))),
  202 + ),
  203 + ],
  204 + ),
  205 + Text('Largura do dispositivo:${ScreenUtil.screenWidth}px'),
  206 + Text('Altura do dispositivo:${ScreenUtil.screenHeight}px'),
  207 + Text('Densidade de pixels do dispositivo:${ScreenUtil.pixelRatio}'),
  208 + Text('Distância segura do rodapé:${ScreenUtil.bottomBarHeight}px'),
  209 + Text('Altura da status bar:${ScreenUtil.statusBarHeight}px'),
  210 + Text(
  211 + 'Razão entre a largura atual e a largura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleWidth}',
  212 + textAlign: TextAlign.center,
  213 + ),
  214 + Text(
  215 + 'Razão entre a altura atual e a altura do protótipo de design em pixels:${ScreenUtil.getInstance().scaleHeight}',
  216 + textAlign: TextAlign.center,
  217 + ),
  218 + Text(
  219 + 'Razão da fonte e largura para o tamanho do design:${ScreenUtil.getInstance().scaleWidth * ScreenUtil.pixelRatio}',
  220 + textAlign: TextAlign.center,
  221 + ),
  222 + Text(
  223 + 'Razão da fonte e altura para o tamanho do design:${ScreenUtil.getInstance().scaleHeight * ScreenUtil.pixelRatio}',
  224 + textAlign: TextAlign.center,
  225 + ),
  226 + SizedBox(
  227 + height: ScreenUtil.getInstance().setHeight(100),
  228 + ),
  229 + Text('Fator de escala da fonte do sistema:${ScreenUtil.textScaleFactory}'),
  230 + Column(
  231 + crossAxisAlignment: CrossAxisAlignment.start,
  232 + children: <Widget>[
  233 + Text(
  234 + 'Minha fonte tem 24px no protótipo de design e não irá mudar com o sistema.',
  235 + style: TextStyle(
  236 + color: Colors.black,
  237 + fontSize: ScreenUtil.getInstance().setSp(24),
  238 + )),
  239 + Text(
  240 + 'Minha fonte tem 24px no protótipo de design e poderá mudar com o sistema.',
  241 + style: TextStyle(
  242 + color: Colors.black,
  243 + fontSize: ScreenUtil(allowFontScaling: true).setSp(24),
  244 + )),
  245 + ],
  246 + )
  247 + ],
  248 + ),
  249 + ),
  250 + );
  251 + }
  252 +```
  253 +
  254 +### Exemplo:
  255 +
  256 +[Demonstração](/example/lib/main_zh.dart)
  257 +
  258 +Efeito:
  259 +
  260 +![效果](demo_en.png)