Recognized by Clutch.co as a top-rated Mobile App Development Company.
folio3-mobile
US 408 365 4638
START YOUR PROJECT
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise
    • AR/VR
    • IoT
    • Wearables
    • Field Sales
    • On Demand Apps
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical & Life Sciences
    • Manufacturing
    • Automotive
    • Logistics
    • Education
  • Technologies
    • Native Mobile Apps
      • iOS
      • Android
    • Cross Platform Apps
      • React Native
      • Flutter
      • Ionic
      • Xamarin
      • NativeScript
      • Sencha
  • Portfolio
  • Blog
  • Contact Us

Port your mobile apps on to web lightning quick with Flutter

Published by: Noc Folio3 | August 26, 2019
SCROLL AND BE AMAZED!
Home > Blog > Port your mobile apps on to web lightning quick with Flutter

The first look at Flutter’s web framework

In this blog, I’ll be experimenting with Flutter Web for the very first time. As of now, most people know about Flutter is that its a cross-platform mobile application development framework that has the capability to develop applications for both Android and iOS. Well, this is absolutely true, however, Flutter team has really geared up from the very beginning to take  Flutter beyond mobile devices.

As soon as the first stable version of Flutter was released, the company announced that they’ll be working to bring Flutter to the web.  Not only that, they are aiming to have similar experiences on Desktop(Mac, Linux, and Windows) as well as on IoT.

But in this blog, I’ll be focusing on the web. Please note that Flutter’s web implementation is currently in the technical preview which means the work is still going on and there may be some bugs and rough areas.

Installation

If you have Flutter already installed in your system, you won’t find it hard to set it up for the web. Here’s the link of Flutter Web, where you can find complete guidance along with the technical details.

To get started with Flutter web, check out this official repo available here which contains different example codes. You can also use Visual Studio Command Palette (Ctrl+Shift+P) to create a new web project by typing Flutter web which will give you the option to create a new web project.

Code Differences

I created a Flutter app for mobile a few days back just to demonstrate how a Flutter app looks like, so I decided to convert the same app for the web platform.

Below is the code for Welcome page of the mobile version of the app, let’s see how much change is required to run the same page on the web:

import 'package:flutter/material.dart';
import '../widgets/nav-drawer.dart';

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      drawer: NavDrawer(),
      body: Container(
        child: Center(
          child: Text(
            'Welcome to Flutter',
            style: TextStyle(fontSize: 40),
          ),
        ),
      ),
    );
  }
}

Code for Web:

import 'package:flutter_web/material.dart';
import '../widgets/nav-drawer.dart';

class WelcomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Demo'),
      ),
      drawer: NavDrawer(),
      body: Container(
        child: Center(
          child: Text(
            'Welcome to Flutter',
            style: TextStyle(fontSize: 40),
          ),
        ),
      ),
    );
  }
}

If you find it hard to spot the difference, let me tell you that the only difference is this single line at the start:

import 'package:flutter_web/material.dart';

That’s true if you are familiar with the layout of Flutter (mobile) you already know the same about its web. Isn’t that amazing? Chances are that in the future, Flutter may release new components for the web too.

Look at the following videos. The same app is running on two different platforms.

Flutter Mobile

Flutter Web

Although Flutter web is currently in the technical preview at this time, it looks very promising in various aspects. The good thing is if you know Flutter for mobile, you already know it for the Web (of course with some platform-based concepts). All you need to do is to learn its architecture and how it works under the hood with browser APIs. So, let’s wait until the first stable version launches. We’ll be diving deep into the details in the upcoming blogs on Flutter.


About Noc Folio3

Newsletter

Search

Archives

  • December 2023
  • April 2023
  • March 2023
  • October 2022
  • September 2022
  • August 2022
  • July 2022
  • June 2022
  • April 2022
  • March 2022
  • February 2022
  • October 2021
  • September 2021
  • May 2021
  • February 2021
  • January 2021
  • December 2020
  • November 2020
  • October 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • January 2020
  • December 2019
  • November 2019
  • October 2019
  • September 2019
  • August 2019
  • July 2019
  • May 2019

Recent Posts

  • Exploring Flutter Navigation: From Basics to Advanced Routes
  • Web UI Test Automation with Pytest-BDD
  • How to fix IOS compass calibration issues
  • Testing Android Applications With Perfect Coverage
  • How to use useRef hook efficiently? – React

Tags

  • android
  • angular-state-management
  • Automation
  • Compass
  • cross-platform
  • css
  • development
  • firebase
  • hooks
  • ios
  • learn-ngrx
  • ngrx-beginner
  • ngrx/store
  • QA
  • react-native
  • reactjs
  • scss
  • stylesheet
  • styling
  • Testing
  • Test Script
  • UI-UX

Newsletter

Newsletter

Post navigation

Previous How to make use of HTML5 Canvas with React
Next How to go from idea to app: building the right feature set
Schedule an Appointment with our Mobile App Development Expert
Footer Menu
  • Company
    • About Us
    • Portfolio
    • Blog
    • Careers
    • Contact Us
  • Solutions
    • Apps Discovery Services
    • Team Augmentation
    • Enterprise App Development
    • AR/VR Application Development
    • IoT Application Development
    • Wearables Apps Development
    • Field Sales
    • On-Demand Apps Development
  • Technologies
    • iOS
    • Android
    • React Native
    • Flutter
    • Ionic
    • Xamarin
    • NativeScript
    • HTML5
    • Sencha
  • Industries
    • Retail
    • Agriculture
    • Healthcare
    • Pharmaceutical
    • Manufacturing
    • Automotive
    • Logistics
    • Education

US Office

Belmont, California – 1301 Shoreway Road, Suite 160, Belmont, CA 94002

Pleasanton, California – 6701 Koll Center Parkway, #250 Pleasanton, CA 94566

Tel: +1 408 365 4638
Support: +1 (408) 512 1812

Mexico Office

Amado Nervo #2200, Edificio Esfera 1 piso 4, Col. Jardines del Sol, CP. 45050, Zapopan, Jalisco, Mexico

Bulgaria Office

49 Bacho Kiro Street, Sofia, 1000, Bulgaria

Canada Office​

895 Don Mills Road, Two Morneau Shepell Centre, Suite 900, Toronto, Ontario, M3C 1W3, Canada

UK Office

Export House, Cawsey Way, Woking Surrey, GU21 6QX

Tel: +44 (0) 14 8361 6611

UAE Office

Dubai, UAE – Dubai Internet City, 1st Floor, Building Number 12, Premises ED 29, Dubai, UAE

Tel: +971-55-6540154
Tel: +971-04-2505173

Pakistan Office

Folio3 Tower, Plot 26, Block B, SMCH Society, Main Shahrah-e-Faisal, Karachi.

First Floor, Blue Mall 8-R, MM Alam Road Gulberg III, Lahore.

Tel: +92-21-3432 3721-4 

© 2025, Folio3 Software Inc., All rights reserved.

  • Privacy policy and terms of use
  • Cookie Policy
Follow us on
Facebook-f Linkedin-in Instagram

Get a free app audit

[contact-form-7 id="3548" title="Float Banner Form"]