Flutter Web App Demo

Experimental responsive web app powered by Flutter and Dart.

• Flutter Web App Demo
  • Features
  • Requirements
  • Develop
  • Building with the production JavaScript compiler
  • FAQ
  • Troubleshooting

Features

• photos are fetched from a server
• infinity scrolling
• responsive to screen size changes including mobile device orientation changes
• powered by build_value and built_collection
• background JSON parsing

Requirements

• Flutter: the latest version on flutter dev channel
• Dart: 2.5.0+
• Xcode: 10.0+
• Androind Studio 3.3.1+
• Ruby: 2.4+
• CocoaPods: 1.7.0+
• Flutter & Dart plugins:
  • Visual Studio Code
  • Android Studio / IntelliJ

Develop

Activate webdev package

flutter config --enable-web

Run you app in Chrome

flutter run -d chrome

To hot restart (and rebuild state), press "R".

Building with the production JavaScript compiler

To enable the release compiler, run.

flutter build web

This will create a build/web directory with index.html, main.dart.js and the rest of the files needed to run the application using a static HTTP server.

FAQ

Read more about Flutter for web

If you have any questions ping me on twitter: @minikin

Troubleshooting

1

In case of some errors try to run:

flutter clean

2

If you catch an error like this:

flutter packages pub global run webdev serve -r
webdev could not run for this project.
Could not find a file named "pubspec.yaml" in "/Users/JohnDoe/flutter/.pub-cache/hosted/pub.dartlang.org/built_value-6.7.1".
pub finished with exit code 78

try to run:

pub cache repair

3

This project use built_value and built_collection as dependencies so you might need to run command below before to start a web server:

flutter packages pub run build_runner build --delete-conflicting-outputs