Building Web Apps with Flutter
Flutter has gained a huge popularity in very less time. Flutter is Google’s UI toolkit to design beautiful and natively complied app for multiple platforms with single codebase. Flutter apps run both on Android and IOS. Lot of developers are also migrating towards Flutter from React Native and new developers also opt for Flutter. But Flutter is also used for Web and Desktop applications. Yes, you heard it right, web apps are also being developed using Flutter. In this blog I have tried to explain how to build web apps with Flutter and enable web support for your Flutter app.
Pre-requisites:
1. At first you need to download the Flutter sdk you can find it here. Download stable version based on your operating system.
2. You’ll need an IDE for writing code. You can download Android Studio or VS code or IntelliJ, VS code is recommended. Then you’ll need to install the plugin/extensions for Dart and Flutter. You can this official documentation of Flutter for setup of IDE.
3. You’ll need a browser. You can download Chrome or Edge, Chrome is recommended.
Create New Project with Web support:
For web you’ll need to use the latest version of Flutter sdk with beta channel.
1. Open your command prompt or terminal and type the following commands.
flutter channel beta
flutter upgrade
flutter config —enable-web (hyphen is two time before enable)
2. Running flutter channel beta replaces your current version of Flutter with beta version, this might take some time. Running flutter upgrade, upgrades your sdk and installs the latest version of Flutter. Finally after running flutter config enable-web, web support is enabled, you can check this using the command flutter config.
3. After enabling web support restart your IDE, if it was already running.
4. You can type flutter devices to see the available devices for web app. You’ll find Chrome or Edge, whichever you have installed.
Note: If you want again switch to stable channel from beta, run flutter channel stable.
Create a new project:
1. You can create a new Project either from terminal or from your IDE. Creating a project from IDE automatically creates Android, IOS and Web versions of your app.
2. If you want create a project from terminal run the following commands in your terminal.
flutter create newflutterapp
cd newflutterapp
flutter run -d chrome or flutter run -d edge
To generate the release build of your app type,
flutter build web
Adding web support to existing app:
To add web support to an existing app, run the following command from you root project directory
flutter create .
For more info about Flutter you can refer the official documentation by Google Flutter team.
So, this was all about Building Web Apps with Flutter. Next blog will be about hosting the Flutter Web App using GitHub pages or Firebase or AWS. If you like this Blog clap, comment and share. If you have any suggestions please drop them in comments section. Thanks for Reading.
