Building your First Flutter for Web App

- How to setup a Flutter app on web.
- Enable web support for an existing Flutter app
- Build and Run the Flutter Web app
- Tweak the app eg. change background color or texts
- An opening to now explore more on Flutter Web

Transcript

1. Building your first Flutter for Web App Flutter Maureen Josephine Software Developer - Carepay Limited Twitter : @J_Akello
2. What we’ll learn • How to setup a Flutter app on web. • Enable web support for an existing Flutter app • Build and Run the Flutter Web app • Tweak the app eg. change background color or texts • An opening to now explore more on Flutter Web
3. What we'll use • Flutter SDK • Chrome browser • Text editor or IDE NB: Run your web app in Chrome in order to debug with Dart DevTools during development
5. Enable Web Environment Run these Commands on Terminal $ flutter channel beta $ flutter upgrade $ flutter config --enable-web
6. Connected Devices Check the connected Devices using: $ flutter devices
7. Create and Run Create a new Flutter Web project Using: $ flutter create flutter_web_kisumu $ cd flutter_web_kisumu To serve the app from localhost in Chrome run, $ flutter run -d chrome
8. Build $ flutter build web
9. Add Web Support to Existing App $ flutter channel beta $ flutter upgrade $ flutter config --enable-web $ flutter create . $ flutter run -d chrome
10. Hurray!!!Let’s now Explore
11. Let’s Modify the app - Change App’s default theme colors - Add some text - Add some icons - Build and run - And push code to Github