{"id":21018719,"url":"https://github.com/tal-tech/flutter_screen_adapter","last_synced_at":"2025-05-15T06:31:44.667Z","repository":{"id":56830133,"uuid":"310529573","full_name":"tal-tech/flutter_screen_adapter","owner":"tal-tech","description":"Flutter application different terminal screen adaptation scheme.","archived":false,"fork":false,"pushed_at":"2020-11-06T08:44:14.000Z","size":324,"stargazers_count":8,"open_issues_count":0,"forks_count":1,"subscribers_count":14,"default_branch":"master","last_synced_at":"2025-04-03T05:12:16.021Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/tal-tech.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2020-11-06T07:56:16.000Z","updated_at":"2023-09-27T05:26:13.000Z","dependencies_parsed_at":"2022-09-02T05:50:23.896Z","dependency_job_id":null,"html_url":"https://github.com/tal-tech/flutter_screen_adapter","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tal-tech%2Fflutter_screen_adapter","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tal-tech%2Fflutter_screen_adapter/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tal-tech%2Fflutter_screen_adapter/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/tal-tech%2Fflutter_screen_adapter/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/tal-tech","download_url":"https://codeload.github.com/tal-tech/flutter_screen_adapter/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254288236,"owners_count":22045864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-11-19T10:27:17.655Z","updated_at":"2025-05-15T06:31:42.140Z","avatar_url":"https://github.com/tal-tech.png","language":"Dart","funding_links":[],"categories":[],"sub_categories":[],"readme":"# flutter_screen_adapter\n\n[![pub package](https://img.shields.io/pub/v/flutter_screen_adapter.svg)](https://pub.dartlang.org/packages/flutter_screen_adapter)\n\n[README of English](https://github.com/tal-tech/flutter_screen_adapter/blob/master/README_EN.md)\n\n`Flutter` 应用不同终端屏幕适配方案。\n\n\u003cimg src='https://raw.githubusercontent.com/tal-tech/flutter_screen_adapter/master/doc/example_zh.png' alt='example' /\u003e\n\n## 使用步骤\n\n### 步骤1：添加 `flutter_screen_adapter` 到 `pubspec.yaml` 中\n\n```yaml\ndependencies:\n  flutter:\n    sdk: flutter\n\n  flutter_screen_adapter: ^0.0.1\n```\n\n### 步骤2：初始化\n\n```dart\nimport 'package:flutter_screen_adapter/flutter_screen_adapter.dart';\n\nclass MyHomePage extends StatefulWidget {\n  MyHomePage({Key key, this.title}) : super(key: key);\n\n  final String title;\n\n  @override\n  _MyHomePageState createState() =\u003e _MyHomePageState();\n}\n\nclass _MyHomePageState extends State\u003cMyHomePage\u003e {\n  @override\n  Widget build(BuildContext context) {\n\n    /// 注意：\n    /// 一定要在 `WidgetsApp` 或者 `MaterialApp widget` 中初始化\n    /// 否则，会因为 `MediaQuery` 找不到报错\n\n    ScreenAdapter.init(context);\n    return ...\n  }\n}\n```\n\n### 步骤3：设置元素大小\n\n```dart\n// 正方形\nContainer(\n  width: ScreenAdapter.value(100),\n  height: ScreenAdapter.value(100),\n  color: Colors.yellow,\n  child: null\n)\n\n// 长方形\n\nContainer(\n  width: ScreenAdapter.value(200),\n  height: ScreenAdapter.value(100),\n  color: Colors.red,\n  child: null\n)\n\n```\n\n## 提供的属性\n\n\u003cimg src=\"https://raw.githubusercontent.com/tal-tech/flutter_screen_adapter/master/doc/property.png\" alt=\"property\"  \u003e\n\n### 这里列举两个常用的属性\n\n```dart\n...\n\n/// 根据设备信息得到自适应值\n/// 用来使用不同屏幕达到跟设计稿一致效果\n///\n/// [vertical] 是否是垂直自适应数值，默认是水平\n\nstatic double value(num value, {vertical = false});\n\n/// 获取当前设备屏幕宽度\n///\nstatic double get screenWidth;\n\n...\n```","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftal-tech%2Fflutter_screen_adapter","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftal-tech%2Fflutter_screen_adapter","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftal-tech%2Fflutter_screen_adapter/lists"}