The website, now in Flutter!




This template was created for a Flutter Week presentation about building responsive websites with the Flutter Responsive Framework.

If 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!


Build Responsive Flutter Websites Easily - Flutter Week Presentation

29:45 - recreating the Flutter website in Flutter.


Select components with development commentary and Responsive Framework usage walkthrough.

Animated Carousel


The 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!

The 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.

  • 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.

  • 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.

  • 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.

  • animation - Animation behaviors. Animations expose an interface that animators such as our slide can use to control the animation state.


With the animation scaffold created, creating the animation itself is very easy.

  1. Create a slide.
  2. Add slide elements.
  3. Apply animations to slide elements.
  4. Coordinate element entry and exits.
  5. Add slide to carousel.

Finally, 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.

      maxWidth: 1200,
      minWidth: 1200,
      defaultScale: true,
      mediaQueryData: MediaQueryData(size: Size(1200, 640)),
      child: Carousel()

The 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.



The 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!

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.

        rowColumn: !ResponsiveWrapper.of(context).isSmallerThan(DESKTOP),
        children: [
            child: Feature()

Feature Detail


The 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.

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.

        rowFlex: 5,
        columnOrder: 1,
        child: FeatureDetail(),

Another responsiveness challenge is item ordering. To control the specific order of items in a row or column layout, set a rowOrder or columnOrder.

Flutter in Flutter


Amazing, FLutter inside of Flutter! It works… sort of. Embedded iframes in Flutter Web has some issues.

Final Thoughts

Flutter 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.

Flutter 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.

Building 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.

  • Animation editor.
  • RichText generator.
  • A Flutter analytics framework.

#flutter #mobile-apps

The website, recreated in Flutter!
18.70 GEEK