{"id":20284920,"url":"https://github.com/chayanforyou/flutter_material_3_demo","last_synced_at":"2025-04-11T08:38:45.861Z","repository":{"id":97437862,"uuid":"493614728","full_name":"chayanforyou/flutter_material_3_demo","owner":"chayanforyou","description":"A flutter project showcasing supported Material 3 components, typography, color system and elevation. Supports different light/dark mode, color seed, and comparison to Material 2.","archived":false,"fork":false,"pushed_at":"2024-02-22T16:49:55.000Z","size":38823,"stargazers_count":64,"open_issues_count":1,"forks_count":25,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-03-25T06:11:15.297Z","etag":null,"topics":["dark-mode","flutter","light-mode","material-design","material-ui","material3"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/chayanforyou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-05-18T10:26:47.000Z","updated_at":"2025-01-06T08:28:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"a7a14a30-f47a-4c47-92d2-d92e56bbd9dd","html_url":"https://github.com/chayanforyou/flutter_material_3_demo","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/chayanforyou%2Fflutter_material_3_demo","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chayanforyou%2Fflutter_material_3_demo/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chayanforyou%2Fflutter_material_3_demo/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/chayanforyou%2Fflutter_material_3_demo/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/chayanforyou","download_url":"https://codeload.github.com/chayanforyou/flutter_material_3_demo/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248362160,"owners_count":21091061,"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":["dark-mode","flutter","light-mode","material-design","material-ui","material3"],"created_at":"2024-11-14T14:23:00.136Z","updated_at":"2025-04-11T08:38:45.851Z","avatar_url":"https://github.com/chayanforyou.png","language":"Dart","funding_links":[],"categories":["Awesome Lists \u0026 Resource Collections"],"sub_categories":["🚀 How to contribute"],"readme":"# Material 3 Demo\n\nThis sample Flutter app showcases Material 3 features in the Flutter Material library. These features include updated components, typography, color system and elevation support. The app supports light and dark themes, different color palettes, as well as the ability to switch between Material 2 and Material 3. For more information about Material 3, the guidance is now live at https://m3.material.io/.\n\nThis app also includes new M3 components such as IconButtons, Chips, TextFields, Switches, Checkboxes, Radio buttons and ProgressIndicators.\n\n# Preview\n\n\u003cimg width=\"400\" alt=\"Screen Shot 2022-08-12 at 12 00 28 PM\" src=\"https://user-images.githubusercontent.com/36861262/184426137-47b550e1-5c6e-4bb7-b647-b1741f96d42b.png\"\u003e\u003cimg width=\"400\" alt=\"Screen Shot 2022-08-12 at 12 00 38 PM\" src=\"https://user-images.githubusercontent.com/36861262/184426154-063a39e8-24bd-40be-90cd-984bf81c0fdf.png\"\u003e\n\n[Download APK](/apk/M3-demo.apk)\n\nYou can also check the web demo from [here](https://flutter.github.io/samples/web/material_3_demo)\n\n# Features\n## Icon Buttons on the Top App Bar\n\u003cimg src=\"https://user-images.githubusercontent.com/36861262/166506048-125caeb3-5d5c-4489-9029-1cb74202dd37.png\" width=\"25\"/\u003e  Users can switch between a light or dark theme with this button.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/36861262/166508002-90fce980-d228-4312-a95f-a1919bb79ccc.png\" width=\"25\" /\u003e  Users can switch between Material 2 and Material 3 for the displayed components with this button.\n\n\u003cimg src=\"https://user-images.githubusercontent.com/36861262/166511137-85dea8df-0017-4649-b913-14d4b7a17c2f.png\" width=\"25\" /\u003e This button will bring up a pop-up menu that allows the user to change the base color used for the light and dark themes. This uses a new color seed feature to generate entire color schemes from a single color.\n\n## Component Screen\nThe default screen displays all the updated components in Material 3: AppBar, common Buttons, Floating Action Button(FAB), Chips, Card, Checkbox, Dialog, NavigationBar, NavigationRail, ProgressIndicators, Radio buttons, TextFields and Switch.\n\n### Adaptive Layout\nBased on the fact that NavigationRail is not recommended on a small screen, the app changes its layout based on the screen width. If it's played on iOS or Android devices which have a narrow screen, a Navigation Bar will show at the bottom and will be used to navigate. But if it's played as a desktop or a web app, a Navigation Rail will show on the left side and at the same time, a Navigation Bar will show as an example but will not have any functionality.\n\nUsers can see both layouts on one device by running a desktop app and adjusting the screen width.\n\n## Color Screen\nWith Material 3, we have added support for generating a full color scheme from a single seed color. The Color Screen shows users all of the colors in light and dark color palettes that are generated from the currently selected color.\n\n## Typography Screen\nThe Typography Screen displays the text styles used in for the default TextTheme.\n\n## Elevation Screen\nThe Elevation screen shows different ways of elevation with a new supported feature \"surfaceTintColor\" in the Material library.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchayanforyou%2Fflutter_material_3_demo","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fchayanforyou%2Fflutter_material_3_demo","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fchayanforyou%2Fflutter_material_3_demo/lists"}