Flutter Web App Demo

Responsive web app powered by Flutter and Dart.

Contents

• Features
• Requirements
• Develop
• Building with the production JavaScript compiler
• FAQ
• Troubleshooting
• License

???? Features

• photos fetched from a remote 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 beta channel
• Dart: 2.7.0+
• Xcode: 11.2.0+
• Androind Studio 3.5.0+
• Ruby: 2.6.0+
• CocoaPods: 1.8.4+
• Flutter & Dart plugins:
  • Visual Studio Code
  • Android Studio / IntelliJ

???? Develop

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

⛑Troubleshooting

In case of some errors try to run:

flutter clean

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

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

Download Flutter Web App Demo Source Code on GitHub

https://github.com/minikin/flutter-web-demo