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.