{"id":13551702,"url":"https://github.com/MisterJimson/multi_screen_layout","last_synced_at":"2025-04-03T02:31:34.073Z","repository":{"id":45330277,"uuid":"292574407","full_name":"MisterJimson/multi_screen_layout","owner":"MisterJimson","description":"A collection of Flutter Widgets that make multi screen user experiences easy to build","archived":false,"fork":false,"pushed_at":"2021-12-21T18:39:01.000Z","size":4361,"stargazers_count":76,"open_issues_count":1,"forks_count":9,"subscribers_count":5,"default_branch":"main","last_synced_at":"2024-11-03T22:33:21.882Z","etag":null,"topics":["dart","flip","flutter","fold","samsung","surface-duo"],"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/MisterJimson.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null},"funding":{"github":["MisterJimson"]}},"created_at":"2020-09-03T13:13:20.000Z","updated_at":"2024-09-10T15:01:46.000Z","dependencies_parsed_at":"2022-08-29T14:20:34.977Z","dependency_job_id":null,"html_url":"https://github.com/MisterJimson/multi_screen_layout","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/MisterJimson%2Fmulti_screen_layout","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MisterJimson%2Fmulti_screen_layout/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MisterJimson%2Fmulti_screen_layout/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/MisterJimson%2Fmulti_screen_layout/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/MisterJimson","download_url":"https://codeload.github.com/MisterJimson/multi_screen_layout/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246925324,"owners_count":20855873,"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":["dart","flip","flutter","fold","samsung","surface-duo"],"created_at":"2024-08-01T12:01:52.471Z","updated_at":"2025-04-03T02:31:32.047Z","avatar_url":"https://github.com/MisterJimson.png","language":"Dart","funding_links":["https://github.com/sponsors/MisterJimson"],"categories":["Dart"],"sub_categories":[],"readme":"# Multi Screen Layout for Flutter\n[![pub package](https://img.shields.io/pub/v/multi_screen_layout.svg?label=multi_screen_layout\u0026color=blue)](https://pub.dev/packages/multi_screen_layout)\n\nA collection of Widgets that make multi screen user experiences easy to build\n## Supported Devices\n- [x] Surface Duo\n- [x] Surface Duo 2\n- [x] Galaxy Z Fold 1 (Flex Mode)\n- [x] Galaxy Z Fold 2 (Flex Mode)\n- [x] Galaxy Z Flip (Flex Mode)\n- [ ] LG Wing\n\nIf you know of other devices that could support multi screen layouts, please submit a PR and add them to this list.\n\n## Install\nIn your pubspec.yaml\n```yaml\ndependencies:\n  multi_screen_layout: ^3.1.0\n```\nIn your app build.gradle\n```\ndependencies { \n    implementation \"androidx.window:window:1.0.0-rc01\"\n    implementation 'androidx.window:window-java:1.0.0-rc01'\n}\n```\n## Testing\nFor testing without access to these physical devices you can use some specific emulators.\n- 6.7 Horizontal Fold-in emulator available in Android Studio\n- 7.6 Fold-in with outer display emulator available in Android Studio\n- 8 Fold-out emulator available in Android Studio\n- Surface Duo Emulator available [here](https://www.microsoft.com/en-us/download/details.aspx?id=100847).\n\n## Layouts\n### TwoPageLayout\nDisplays two Widgets, one per screen. \n\nOn a Microsoft dual screen device when the app is being spanned across two screens, TwoPageLayout displays both widgets, one per screen. This is designed to help you build Two Page, Dual View, and Companion Pane [dual screen app patterns from Microsoft](https://docs.microsoft.com/en-us/dual-screen/introduction#dual-screen-app-patterns).\n\nOn a folding screen device when the display could be utilized to split content areas, TwoPageLayout displays both widgets, one per content area. This is designed to help you build [Flex Mode](https://developer.samsung.com/galaxy-z/flex-mode.html) user experiences. You can read more about how when to split content is decided in the [AndroidX WindowManager documentation](https://developer.android.com/reference/androidx/window/layout/FoldingFeature#isSeparating()).\n\nOn a single screen device, or when the app is only running on a single screen, only `child` will be displayed.\n\n```dart\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return TwoPageLayout(\n      child: Scaffold(body: Center(child: Text('Hello from page 1!'))),\n      secondChild: Scaffold(body: Center(child: Text('Hello from page 2!'))),\n    );\n  }\n}\n```\n#### Surface Duo Example\n![Two Page 1](https://raw.githubusercontent.com/MisterJimson/multi_screen_layout/main/.media/two_page_1.png)\n\n![Two Page 2](https://raw.githubusercontent.com/MisterJimson/multi_screen_layout/main/.media/two_page_2.png)\n#### Samsung Z Fold 2 Flex Mode Example\n[See video here](https://i.imgur.com/I6lAkYF.mp4)\n### MasterDetailLayout\nVery similar to `TwoPageLayout`. This layout has better support for having related, \"deeper\", content in the second page that would usually be accessed by navigating to a new page.\n\nIt's common to use this type of layout when you have a list of items that when tapped let you view a detailed view of the item. Email and instant messaging apps are good examples of this.\n\nOn a single screen device, or when the app is only running on a single screen, `master` will display first. When `isSelected` is true, `detail` is displayed as a new page on top of `master`, similar to using `Navigator.push`.\n\nWhen displaying on 2 screens, both `master` and `detail` display at the same time and no navigation occurs. Even when `isSelected` is false. \n\nSimilar to `TwoPageLayout`, on a folding screen device when the screen is half opened the screen is treated as a dual screen device.\n\n`MasterDetailLayout` also handles switching between spanned and non-spanned modes appropriately, so the UI will be the same if you select and then span, or span and then select.\n \n```dart\nclass MasterDetailLayoutExample extends StatefulWidget {\n  @override\n  _MasterDetailLayoutExampleState createState() =\u003e\n      _MasterDetailLayoutExampleState();\n}\n\nclass _MasterDetailLayoutExampleState extends State\u003cMasterDetailLayoutExample\u003e {\n  int selectedItem;\n\n  @override\n  Widget build(BuildContext context) {\n    return MasterDetailLayout(\n      master: EmailList(onItemSelected: (selected) {\n        setState(() {\n          selectedItem = selected;\n        });\n      }),\n      detail: EmailDetail(itemNumber: selectedItem),\n      isSelected: selectedItem != null,\n    );\n  }\n}\n```\n#### Surface Duo Example\n![MasterDetail](https://raw.githubusercontent.com/MisterJimson/multi_screen_layout/main/.media/master_detail.gif)\n#### Samsung Z Fold 2 Flex Mode Example\n[See video here](https://i.imgur.com/dHFlvMx.mp4)\n## Direct Data Access\nDirect access is for advanced uses cases. The above layouts should be suitable for most apps.\n\nThere may be cases where you want to access multi screen information instead of just using the above layout widgets. Here is how to do that.\n### MultiScreenInfo\n`MultiScreenInfo` is a Widget that lets you access information about the device directly in your Widget tree, it will rebuild when the data changes.\n```dart\nclass MyApp extends StatelessWidget {\n  @override\n  Widget build(BuildContext context) {\n    return Scaffold(\n      body: MultiScreenInfo(\n        builder: (info) {\n          return Column(\n            children: \u003cWidget\u003e[\n              Text('The below information is from the Surface Duo SDK'),\n              Text('isAppSpanned: ${info.surfaceDuoInfoModel.isSpanned}'),\n              Text('hingeAngle: ${info.surfaceDuoInfoModel.hingeAngle}'),\n            ],\n          );\n        },\n      ),\n    );\n  }\n}\n```\n### PlatformHandlers\nIf you need access to information about the device outside of the Widget tree, you can also make platform calls yourself.\n#### SurfaceDuoPlatformHandler\n```dart\nFuture getSurfaceDuoInfo() async {\n    var hingeAngle = await SurfaceDuoPlatformHandler.getHingeAngle();\n    var isDual = await SurfaceDuoPlatformHandler.getIsDual();\n    var isSpanned = await SurfaceDuoPlatformHandler.getIsSpanned();\n    var nonFunctionalBounds = await SurfaceDuoPlatformHandler.getNonFunctionalBounds();\n  }\n```\n\n## Extra Documentation\n- [Microsoft Dual Screen](https://docs.microsoft.com/en-us/dual-screen/introduction)\n- [Samsung Flex Mode](https://developer.samsung.com/galaxy-z/flex-mode.html)\n- [Android Window DeviceState](https://developer.android.com/reference/androidx/window/DeviceState)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMisterJimson%2Fmulti_screen_layout","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FMisterJimson%2Fmulti_screen_layout","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FMisterJimson%2Fmulti_screen_layout/lists"}