{"id":20292839,"url":"https://github.com/codelessly/flutterwebsite","last_synced_at":"2026-03-07T04:03:51.498Z","repository":{"id":41084436,"uuid":"257016531","full_name":"Codelessly/FlutterWebsite","owner":"Codelessly","description":"The flutter.dev website recreated in Flutter. https://gallery.codelessly.com/flutterwebsites/flutterwebsite","archived":false,"fork":false,"pushed_at":"2024-09-06T03:20:30.000Z","size":24539,"stargazers_count":180,"open_issues_count":0,"forks_count":46,"subscribers_count":5,"default_branch":"master","last_synced_at":"2025-10-27T14:38:42.779Z","etag":null,"topics":["android","app","demo","flutter-ui","framework","futter","ios","responsive","responsive-design","theme","webapp","website","website-builder","website-design","website-template"],"latest_commit_sha":null,"homepage":"","language":"Dart","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"0bsd","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Codelessly.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","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":"2020-04-19T14:12:22.000Z","updated_at":"2025-10-17T00:00:10.000Z","dependencies_parsed_at":"2024-12-15T19:07:38.527Z","dependency_job_id":"57e2a71b-8251-4562-862a-0f31b81f2cdd","html_url":"https://github.com/Codelessly/FlutterWebsite","commit_stats":null,"previous_names":[],"tags_count":3,"template":false,"template_full_name":null,"purl":"pkg:github/Codelessly/FlutterWebsite","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FFlutterWebsite","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FFlutterWebsite/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FFlutterWebsite/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FFlutterWebsite/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Codelessly","download_url":"https://codeload.github.com/Codelessly/FlutterWebsite/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Codelessly%2FFlutterWebsite/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":30207393,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-03-07T03:24:23.086Z","status":"ssl_error","status_checked_at":"2026-03-07T03:23:11.444Z","response_time":53,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"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":["android","app","demo","flutter-ui","framework","futter","ios","responsive","responsive-design","theme","webapp","website","website-builder","website-design","website-template"],"created_at":"2024-11-14T15:19:37.888Z","updated_at":"2026-03-07T04:03:46.481Z","avatar_url":"https://github.com/Codelessly.png","language":"Dart","readme":"![Screenshots](screenshots/Flutter%20Website%20Home.png)\n# [Flutter.dev Website - Recreated in Flutter](https://gallery.codelessly.com/flutterwebsites/flutterwebsite)\n[![Flutter Responsive](https://img.shields.io/badge/flutter-responsive-brightgreen.svg?style=flat-square)](https://github.com/Codelessly/ResponsiveFramework) [![GitHub release](https://img.shields.io/github/release/Codelessly/FlutterWebsite.svg?style=flat-square)](https://github.com/Codelessly/FlutterWebsite/releases) [![GitHub Release Date](https://img.shields.io/github/release-date/Codelessly/FlutterWebsite.svg?style=flat-square)](https://github.com/Codelessly/FlutterWebsite/releases) [![GitHub issues](https://img.shields.io/github/issues/Codelessly/FlutterWebsite.svg?style=flat-square)](https://github.com/Codelessly/FlutterWebsite/issues) [![GitHub top language](https://img.shields.io/github/languages/top/Codelessly/FlutterWebsite.svg?style=flat-square)](https://github.com/Codelessly/FlutterWebsite) [![GitHub code size in bytes](https://img.shields.io/github/languages/code-size/Codelessly/FlutterWebsite.svg?style=flat-square)](https://github.com/Codelessly/FlutterWebsite) [![Libraries.io for GitHub](https://img.shields.io/librariesio/github/Codelessly/FlutterWebsite.svg?style=flat-square)](https://libraries.io/github/Codelessly/FlutterWebsite) [![License](https://img.shields.io/badge/License-BSD%200--Clause-orange.svg?style=flat-square)](https://opensource.org/licenses/0BSD)\n\n\u003cimg src=\"web/icons/Icon-192.png\" width=\"128\"\u003e\n\n\u003e ### The flutter.dev website, now in Flutter!\n\n[View Flutter Website](https://gallery.codelessly.com/flutterwebsites/flutterwebsite)\n\n[HTML Version](https://gallery.codelessly.com/flutterwebsites/flutterwebsite-html)\n\n[Canvas Version](https://gallery.codelessly.com/flutterwebsites/flutterwebsite-canvas)\n\n## Screenshots\n\n|Desktop|Tablet|Mobile| \n|--|--|--|\n|![Screenshots](screenshots/Flutter%20Website%20Desktop.png)|![Screenshots](screenshots/Flutter%20Website%20Tablet.png)|![Screenshots](screenshots/Flutter%20Website%20Mobile.png)|\n\n## About\n\nThis template was created for a [Flutter Week](https://flutter-week.com) presentation about building responsive websites with the [Flutter Responsive Framework](https://github.com/Codelessly/ResponsiveFramework).\n\nIf you like this project or it helped you, please leave your email for updates. Although it is not required, I'd very much appreciate it!\n\n\u003ca href=\"https://codelessly.com/?utm_medium=banner\u0026utm_campaign=newsletter_subscribe\" target=\"_blank\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Email%20Newsletter%20Signup.png\"\u003e\u003c/a\u003e\n\n## Video\n\nBuild Responsive Flutter Websites Easily - Flutter Week Presentation\n\n\u003ca href=\"https://youtu.be/7Zql2rvYRLE\" target=\"_blank\"\u003e\u003cimg src=\"screenshots/Flutter%20Week%20Video%20Thumbnail.png\" width=\"600\" height=\"auto\"\u003e\u003c/a\u003e\n\n[29:45](https://youtu.be/7Zql2rvYRLE?t=1785) - recreating the Flutter website in Flutter.\n\n## Components\n\nSelect components with development commentary and Responsive Framework usage walkthrough.\n\n### Animated Carousel\n\n![Screenshots](screenshots/Flutter%20Website%20Animated%20Carousel.png)\n    \nThe animated carousel component is eye-catching and beautiful. Fortunately, creating it in Flutter is very easy. All we need is to first create an animation scaffold!\n\nThe animation can be broken down into `carousel`, `slide`, `element`, and `animation` components. Each component is a layer in our animation scaffold with its own responsibilities and logic.\n\n- `carousel` - There are 4 carousel slides. Each slide is displayed for approximately 6400 milliseconds. The responsibility of the carousel is to hold child slides and coordinate their transitions.\n\n        carousel\n        \n- `slide` - Each slide contains images and text that appear and disappear with entrance and exit animations. The responsibility of the slide is to position its child elements and coordinate their animations.\n\n        carousel_slide_1\n        carousel_slide_2\n        carousel_slide_3\n        carousel_slide_4\n        model_carousel_item_animation\n\n- `element` - Elements are the content of the slides. Elements are plain widgets that do not know how they will be animated. Their only requirement is to support being animated. The animation logic is abstracted to a separate layer. \n        \n        carousel_text\n        Image\n        \n- `animation` - Animation behaviors. Animations expose an interface that animators such as our slide can use to control the animation state.\n\n        animation_slide_up_down_fade\n\nWith the animation scaffold created, creating the animation itself is very easy.\n\n1. Create a slide.\n2. Add slide elements.\n3. Apply animations to slide elements.\n4. Coordinate element entry and exits. \n5. Add slide to carousel.\n\nFinally, the entire animation is wrapped in a `ResponsiveWrapper` and given a reference `MediaQuery` width and height. This allows the carousel to display correctly at any screen size.\n\n```dart\n  ResponsiveWrapper(\n      maxWidth: 1200,\n      minWidth: 1200,\n      defaultScale: true,\n      mediaQueryData: MediaQueryData(size: Size(1200, 640)),\n      child: Carousel()\n    )\n```\n\nThe animation scaffold was constructed based on a timeline animation model. All animation durations are relative which allows for easy customization and adjustments in the future. Hopefully one day, someone will create a drag and drop animation editor for Flutter that will generate all the code automatically.\n\n### Features\n\n![Screenshots](screenshots/Flutter%20Website%20Features.png)\n\nThe Features section is a simple row with Feature components. That is until the layout narrows and there is not enough room for a row. Then it needs to become a column!\n\n`ResponsiveRowColumn` helps transition between row and column layouts at different screen sizes. When `rowColumn` is true, the layout is a row. When `rowColumn` is false, the layout is a column.\n\n```dart\nResponsiveRowColumn(\n        rowColumn: !ResponsiveWrapper.of(context).isSmallerThan(DESKTOP),\n        children: [\n          ResponsiveRowColumnItem(\n            child: Feature()\n            )\n        ]\n    )\n```\n\n### Feature Detail\n\n![Screenshots](screenshots/Flutter%20Website%20Feature%20Detail.png)\n\nThe Feature Detail component has two rows of content, each with a different width percentage. The balance here is 7:5 with the graphic taking up slightly more space than the text. This behavior can be created by setting a flex value for each row. However, the flex needs to be removed when the layout is in column mode to avoid invalid constraints errors. \n\n`ResponsiveRowColumnItem` is used to wrap children in a `Flexible` widget when in a row or column layout. When `rowFlex` is set, the child will be wrapped in a `Flexible` with a flex value of 5. Likewise, `columnFlex` provides the same behavior for column layouts. Layouts are inherited from the parent `ResponsiveRowColumn`'s `isRowColumn` value.\n\n```dart\nResponsiveRowColumnItem(\n        rowFlex: 5,\n        columnOrder: 1,\n        child: FeatureDetail(),\n    )\n```\n\nAnother responsiveness challenge is item ordering. To control the specific order of items in a row or column layout, set a `rowOrder` or `columnOrder`.\n\n### Flutter in Flutter\n\n![Screenshots](screenshots/Flutter%20Website%20Flutter%20Embed.png)\n\nAmazing, FLutter inside of Flutter! It works.. sort of. Embedded iframes in Flutter Web has some issues.\n\n## Final Thoughts\n\nFlutter Web is phenomenal and it was really fun to solve some of the basic essential problems of responsiveness on the web. Despite all the years I've been doing web development, this template is the most \"perfect\" website I've ever created. Thanks to power of the underlying framework, I know precisely how the layout looks at every size.\n\nFlutter Web is revolutionary but there is still much work to do. In some areas, Flutter is already ahead but in others, the ecosystem is literally years behind. For the challenges ahead, let's tackle them together head-on and solve the core problems.\n\nBuilding this Flutter website also exposed a few pain points. Please let me know if you're working on or are interested in tackling one of the items below.\n\n- Animation editor.\n- RichText generator.\n- A Flutter analytics framework.\n\n## Acknowledgements ❤️\n\n**Inspiration:** \n\n\u003ca href=\"https://flutter-week.com/?utm_medium=logo\u0026utm_campaign=responsive_framework\"\u003e\n  \u003cimg alt=\"Flutter\"\n       src=\"screenshots/Flutter%20Week%20Logo.png\" /\u003e\n\u003c/a\u003e\u0026nbsp;\u0026nbsp;\u0026nbsp;\u0026nbsp;\u003ca href=\"https://flutter.dev\"\u003e\n  \u003cimg alt=\"Flutter\"\n       src=\"https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Flutter%20Logo%20Banner.png\" /\u003e\n\u003c/a\u003e\n\n**Development:** \n* [Ray Li](https://github.com/rayliverified)\n\n**Sponsor:** [Codelessly - Flutter App UI and Website Builder](https://codelessly.com/?utm_medium=link\u0026utm_campaign=direct)\n\n\u003ca href=\"mailto:ray@codelessly.com\"\u003e\n  \u003cimg alt=\"Codelessly Email\"\n       src=\"https://lh3.googleusercontent.com/yN_m90WN_HSCohXdgC2k91uSTk9dnYfoxTYwG_mv_l5_05dV2CzkQ1B6rEqH4uqdgjA=w96\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://codelessly.com/?utm_medium=icon\u0026utm_campaign=direct\"\u003e\n  \u003cimg alt=\"Codelessly Website\"\n       src=\"https://lh3.googleusercontent.com/YmMGcgeO7Km9-J9vFRByov5sb7OUKetnKs8pTi0JZMDj3GVJ61GMTcTlHB7u9uHDHag=w96\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://twitter.com/BuildCodelessly\"\u003e\n  \u003cimg alt=\"Codelessly Twitter\"\n       src=\"https://lh3.ggpht.com/lSLM0xhCA1RZOwaQcjhlwmsvaIQYaP3c5qbDKCgLALhydrgExnaSKZdGa8S3YtRuVA=w96\" /\u003e\n\u003c/a\u003e\n\u003ca href=\"https://github.com/Codelessly\"\u003e\n  \u003cimg alt=\"Codelessly GitHub\"\n       src=\"https://lh3.googleusercontent.com/L15QqmKK7Vl-Ag1ZxaBqNQlXVEw58JT2BDb-ef5t2eboDh0pPSLjDgi3-aQ3Opdhhyk=w96\" /\u003e\n\u003c/a\u003e\n\u003cbr\u003e\u003c/br\u003e\n\u003ca href=\"https://github.com/Codelessly/ResponsiveFramework\"\u003e\n  \u003cimg alt=\"Built with Responsive Framework\"\n       src=\"https://raw.githubusercontent.com/Codelessly/ResponsiveFramework/master/packages/Built%20with%20Responsive%20Badge.png\" /\u003e\n\u003c/a\u003e\n\n\n## License\n### Website Template\n\n    BSD Zero Clause License\n\n    Copyright © 2020 Codelessly\n\n    Permission to use, copy, modify, and/or distribute this software for any\n    purpose with or without fee is hereby granted.\n\n    THE SOFTWARE IS PROVIDED \"AS IS\" AND THE AUTHOR DISCLAIMS ALL WARRANTIES WITH\n    REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF MERCHANTABILITY\n    AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR ANY SPECIAL, DIRECT,\n    INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES WHATSOEVER RESULTING FROM\n    LOSS OF USE, DATA OR PROFITS, WHETHER IN AN ACTION OF CONTRACT, NEGLIGENCE OR\n    OTHER TORTIOUS ACTION, ARISING OUT OF OR IN CONNECTION WITH THE USE OR\n    PERFORMANCE OF THIS SOFTWARE.\n\n### Flutter.dev\n\n    Except as otherwise noted, the content of this repository is licensed under the\n    Creative Commons Attribution 3.0 License [1], and code samples are licensed\n    under the BSD License:\n\n    Copyright 2012, the project authors. All rights reserved. Redistribution and use\n    in source and binary forms, with or without modification, are permitted provided\n    that the following conditions are met:\n\n        * Redistributions of source code must retain the above copyright\n          notice, this list of conditions and the following disclaimer.\n        * Redistributions in binary form must reproduce the above\n          copyright notice, this list of conditions and the following\n          disclaimer in the documentation and/or other materials provided\n          with the distribution.\n        * Neither the name of Google Inc. nor the names of its\n          contributors may be used to endorse or promote products derived\n          from this software without specific prior written permission.\n\n    THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS\n    \"AS IS\" AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT\n    LIMITED TO, THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR\n    A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT\n    OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL,\n    SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT\n    LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE,\n    DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY\n    THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT\n    (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE\n    OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.\n\n    [1] http://creativecommons.org/licenses/by/3.0/\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelessly%2Fflutterwebsite","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcodelessly%2Fflutterwebsite","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcodelessly%2Fflutterwebsite/lists"}