FlutterWebsite is a free, open-source Flutter web template that recreates the official flutter.dev website as a responsive Flutter application, built by Codelessly to demonstrate responsive web design with the Responsive Framework. The template includes the Flutter homepage's animated carousel, features grid, and feature detail sections, all reimplemented in Dart and Flutter Web, and ships with three deployment variants: a Flutter Web build, an HTML version, and a Canvas version.
What is FlutterWebsite?
FlutterWebsite is a Flutter web template that takes the content structure and visual design of flutter.dev and rebuilds it as a Flutter app. It takes Dart source code and the Responsive Framework as inputs and produces a fully responsive marketing website with desktop, tablet, and mobile layouts. The project was authored by Ray Li and sponsored by Codelessly, and runs on Flutter Web with a live demo hosted at gallery.codelessly.com.
Key Features
- Responsive Framework integration — Uses the Codelessly ResponsiveFramework package's
ResponsiveWrapper, which lets the whole site scale to any screen size; the animated carousel is wrapped with a fixed 1200 by 640 MediaQuery as an example. - Animated carousel architecture — The homepage carousel is split into carousel, slide, element, and animation layers, with four slides each displayed roughly 6400 milliseconds, and entrance/exit animations coordinated by each slide.
- ResponsiveRowColumn layout switching — The Features section uses
ResponsiveRowColumnto change from a horizontal row to a vertical column whenResponsiveWrapper.of(context).isSmallerThan(DESKTOP)returns true. - Flexible feature detail ordering — The Feature Detail component uses
ResponsiveRowColumnItemwithrowFlexandcolumnFlexto keep a 7:5 width balance, and usesrowOrderandcolumnOrderto reorder items per layout. - Three output variants — The repository offers the Flutter Web original, a separate HTML version, and a Canvas version, all linked directly from the project page so you can compare rendering targets.
- Description of animation model — The README explains the timeline-based animation model with relative durations and gives a five-step process for creating the carousel: create a slide, add elements, apply animations, coordinate entry/exit, then add to the carousel.
- Responsive screenshots included — The project page shows desktop, tablet, and mobile screenshots of the template, illustrating how the layout adapts across breakpoints.
Who is it for?
Flutter developers who want to study a real-world responsive Flutter website can use this template to see how the Responsive Framework handles breakpoints, flexible layouts, and ordering. Web developers exploring Flutter Web can compare the Flutter, HTML, and Canvas builds to evaluate performance and fidelity for marketing-page use cases. Students or freelancers building a portfolio or product site in Flutter can fork the BSD-licensed source and replace the carousel and feature content with their own.
What can you do with FlutterWebsite?
Flutter learners — Open the live demo, then read the README's component walkthrough to understand how the carousel's animation layers and ResponsiveRowColumn layout work. Studio teams — Fork the repository and modify the carousel slides, timings, text, and feature order to create a custom responsive marketing site. Flutter Web evaluators — Access the Flutter, HTML, and Canvas versions to compare how the same content renders and behaves in each technology.
How does it work?
The template works by composing the website from reusable widgets that are wrapped in Responsive Framework layout components. The README describes the carousel construction process as a five-step workflow: create a slide, add slide elements, apply animations to those elements, coordinate element entry and exit, and finally add the slide to a carousel. The whole animation is then wrapped in a ResponsiveWrapper with a reference MediaQueryData size, allowing it to render correctly at any screen size.
Pricing
FlutterWebsite is free to download and modify under the BSD Zero Clause License. The Flutter.dev content included in the repository is separately licensed under Creative Commons Attribution 3.0, with code samples under the BSD License.
FAQ
Is FlutterWebsite free?
Yes. The website template is released under the BSD Zero Clause License, which permits free use, copying, modification, and distribution. The Flutter.dev content within the repository carries a Creative Commons Attribution 3.0 license, so attribution is required if you reuse that specific content.
What versions of the template are available?
Three versions are linked from the project page: the original Flutter Web app, a separate HTML version, and a Canvas version. All three live on gallery.codelessly.com under the flutterwebsites directory.
Does the template include an embedded Flutter iframe?
Yes, the site has a 'Flutter in Flutter' section that embeds the Flutter website inside an iframe. The author notes that embedded iframes in Flutter Web have some issues, so that component is experimental and may not render perfectly in all browsers.
How do I customize the carousel?
The README explains that the carousel is organized into carousel, slide, element, and animation layers. To change it, you can create a new slide, add elements, apply animations, coordinate entry/exits, and add it to the carousel. All animation durations are relative, so timing adjustments are straightforward.
