• Courses
  • YouTube
  • Dev News
  • Technology
  • Blogs
  • Flutter Jobs
  • Contact
    • About Us
    • RegisterLogin
    Navoki
    • Courses
    • YouTube
    • Dev News
    • Technology
    • Blogs
    • Flutter Jobs
    • Contact
      • About Us
    • RegisterLogin

      Developers

      • Home
      • Blog
      • Developers
      • Make your first Flutter Web app and Publish [2019]
      Flutterwebdemo

      Make your first Flutter Web app and Publish [2019]

      • Posted by Shivam Srivastava
      • Categories Developers
      • Date September 18, 2019
      • Comments 0 comment
      Spread the love

      Flutter now also provides support for Web Platform using standards-based web technologies: HTML, CSS, and JavaScript. Now your Flutter UI code written in Dart can be used to make Web Apps and publish on any web server. Since Flutter Web is still in reached alpha version, so it’s not recommended for production but you can try and learn many features supported in Flutter.

      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

      Newproject

      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.dart which 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://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

      webdev serve

      this will be you Web Page

      Flutterwebdemo

      3. Build for Production

      You need to build this Flutter Web project that will convert project to HTML, CSS, Javascript version, you need to run this command that will make production files in build folder where index.html will be your starting page

      webdev build

      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

      Github Code: https://github.com/theshivamlko/FlutterWebDemo_Firebase

      Thanks for reading this article. If you found this article helpful please consider sharing it.

      You can follow me : @theshivamlko

      Twitter, LinkedIn, Facebook, Github, Instagram

      Bookmark(0)

      Please login to bookmark

      Continue with Google
      0

      Tag:flutter web app example, flutter web demo, flutter web deploy, flutter web tutorial

      • Share:
      author avatar
      Shivam Srivastava

      Mobile Solution [email protected], Android and Flutter Dev, Dart ,Founder of @Navoki, Instructor

      Previous post

      Flutter 1.9 and Dart 2.5
      September 18, 2019

      Next post

      Flutter shared preference
      September 19, 2019

      You may also like

      everything-about-flutter-3-in-google-i-o-2022 navoki.com
      Everything about Flutter 3 in Google I/O 2022
      12 May, 2022
      How Video Call works in Flutter
      How Incoming Video Call Notification works in Flutter
      15 April, 2022
      How-to-Create-Flutter-Desktop-Navoki-Blog
      How to Install Flutter on Windows, macOS and Ubuntu
      11 April, 2022

      Leave A Reply Cancel reply

      You must be logged in to post a comment.


      Categories

      • Android
      • Dart
      • Dart Server
      • Dart Web
      • Developers
      • Flutter
      • Flutter Desktop
      • Flutter Mobile
      • Flutter Web
      • Fuchsia
      • Go Lang
      • Technology
      • Uncategorized

      Recent Post

      • Everything-About-Flutter-3-In-Google-I-O-2022 Navoki.comEverything about Flutter 3 in Google I/O 2022
      • Flutter-Web-Cors-Error-Solved-Navoki.com[SOLVED] Flutter Web CORS Error
      • How Video Call Works In FlutterHow Incoming Video Call Notification works in Flutter

      Subscribe Now

       

      Recent Courses

      Single And Multi Selection Listview In Flutter

      Single and Multi Selection ListView in Flutter

      Go Installation And Variables

      Go Installation and Variables

      List In Dart Programming Language

      List in Dart Programming language

      Variables In Dart Programming Language

      Variables in Dart Programming language

      View All

      DON’T MISS
      FLUTTER UPDATES

      Be the first to know when our blog is published.

      flutter-mobile-mockup

      Check your inbox or spam folder to confirm your subscription.

      Contact

      •   Navoki Technologies Pvt. Ltd.
        JMD Megapolis , Sector 48, Gurugram, Haryana 122018

      Company

      • About Us
      • Blogs
      • Contact
      • Privacy policy
      • Terms & Condition

      Useful Links

      • Courses
      • Youtube
      • Dev News

      Mobile

      Click and Get started in seconds

      "Navoki" is a registered trademark of Navoki.com ® 2020–2030 Navoki Technologies Pvt Ltd.

      • Terms & Condition

      Login with your site account

      Continue with Google

      By "Sign in” above to accept Navoki’s Terms of Service & Privacy Policy.

      Not a member yet? Register now

      Register a new account

      Continue with Google

      By "Sign Up” above to accept Navoki’s Terms of Service & Privacy Policy.

      Are you a member? Login now