In this blog, I will show you how to set up your first Flutter Web project and host it on Firebase.
1. Create a Project
I am using IntelliJ IDEA on the Windows platform. You have installed IDE after that install a few plugins so IDE can support Flutter and Dart projects. Go to File->Settings->Plugins and search and install these plugins Dart and Flutter.
You can download them separately also, make sure you add your Flutter and Dart in Environment Path.
After installation restart IDE and choose File->Project, and choose option Flutter Web App
2. Understanding Project Structure
- web, this folder has your main code i.e HTML, CSS, Dart (Web), Images, Assets, etc. All web features and getting Flutter UI from lib will be done here.
- lib, this contains all your Flutter UI code,
main.dartwhich will be your launch of UI. All Flutter UI changes will be done within this folder. This is the same as you work for Flutter Mobile Apps.
- pubspec.yaml, this contains information and dependency of your Flutter project
Now as your project is created we will make some changes in UI i.e. in lib, there is some by default code, we will change to this:
return Scaffold( appBar: AppBar( title: Text( title, style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold,color: Colors.white), ), ), body: Center( child: Column( mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[ Image.network( 'https://ml7wbiu8jnl5.i.optimole.com/j2ulR6E-001lcCgo/w:auto/h:auto/q:auto/https://navoki.com/wp-content/uploads/2019/09/200_40.png', scale: 0.5, ), Padding( padding: EdgeInsets.only(top: 40), ), Text( 'Welcome to Navoki', style: TextStyle(fontSize: 30), ), ], ), ), );
2. Run on localhost
To run test code in your web browser you need to run command and open http://127.0.0.1:8080 in your browser
this will be you Web Page
3. Build for Production
But this build will not work on your system, you need a server to host and run. Here I will be using Firebase Hosting to publish my project. To install Firebase CLI and set up on your system refer Firebase Docs before proceeding.
4. Publish on Firebase Hosting
I created a firebase_hosting folder and copied files from build and setup for Firebase Hosting. These hosting steps are common to host any HTML project on Firebase, so you can refer these simple steps from here.
Live Webiste: https://testing-8118b.web.app
Thanks for reading this article. If you found this article helpful please consider sharing it.
You can follow me : @theshivamlko