Flutter And Web!

Passionate about Web Development? You should definitely try out Flutter Web then!

Let’s summarize what we will see in this blog:

• What is Flutter Web and how it works?
• How to run your existing project on Flutter Web?
• How to create new app with Web support?
• Some key points that you must take care of when using Flutter Web!
• How is the performance for Flutter Web and how it is different?
• Conclusion

What is Flutter Web and how it works?

• Flutter’s web support enables complex standalone web apps that are rich with graphics and interactive content to reach end users on a wide variety of devices. Web support for Flutter provides a browser-based delivery model for existing Flutter mobile apps.
• Flutter renders web app in the same way as it will render your android/iOS apps, i.e. Flutter Web will convert your project to native code (HTML, CSS, JS) when you wish to deploy. Now, one thing you need to keep in mind is that Flutter Web creates Single Page Web App! You can definitely have multi-pages but when Flutter framework converts the web app into native language, there will only be one html file i.e. index.html.
• So how does we have multiple pages? The answer to this question is pretty simple. If we have a closer look on how Navigator works, we will observe that it works on Stack data structure. Hence, Flutter Web is single page but it pushes multiple pages on that same single native page.

How to run your existing project on Flutter Web?

• Flutter Web is now on stable channel from Flutter 2.0!
• However if you are not working on Flutter 2.0, you can still use it by running following commands:

flutter channel beta
flutter upgrade
flutter config --enable-web
flutter create .

• If you are already on Flutter 2.0, but have never ran your old project on Web, you can run the following set of commands:

flutter config --enable-web
flutter create .

• Once the commands are successfully executed, your project is ready to set fire on Web! You will be able to see a Web folder in your project directory.
• Now, to run your project on Web, simply select Chrome or Edge as your device and click Run.

How to create new app with Web support?

• When we create our new project with Flutter 2.0, web support is already enabled with new projects.
• But if for some reasons it’s not enabled, you can run the following commands:

flutter config --enable-web
flutter create .

• Now your project is enabled with Web and you can run it directly.

Some key points that you must take care of when using Flutter Web!

When you are working with Flutter Web, you need to keep few points in mind:

• Flutter Web creates Single Page App!
• As users can open your website in any screen sizes now, you need to make it responsive.
• There are many packages that supports web, but always check the supported platforms before coding.
• If you are from web development background and if you feel to make any changes in native code, you are highly welcomed to do so. You can change the native code the same way we can change for Android and iOS.
• When you want to deploy your web app, you can simply run:

flutter build web

And you will get a folder web in your project directory which contains native codes including index.html

Tips and Tricks to make your web app responsive!

• The best way to make your web app responsive is to use MediaQuery to get height and width of screen and based on that you can assign font size.
• There are many other packages which helps you to make your app responsive. Some of the most useful packages are: responsive_framework, flutter_screenutil, etc.

Let’s make a small web app which will be responsive for all screen size!

• Create a new project and delete all code available in main.dart
• Paste the following code in main.dart:

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Material App',
      home: HomePage(),
    );
  }
}
class HomePage extends StatefulWidget {
  const HomePage({Key? key}) : super(key: key);
@override
  _HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        height: MediaQuery.of(context).size.height - 100.0,
        width: MediaQuery.of(context).size.width - 100.0,
        color: Colors.orange,
        child: Text(
          'Responsive Text',
          style: TextStyle(fontSize: MediaQuery.of(context).size.width / 10),
        ),
      ),
    );
  }
}

• The code is pretty simple. There’s one Container who’s height and width is being maintained using MediaQuery . We have Text as it’s child who’s fontSize is maintained using MediaQuery Now, you can check whether this project is responsive or not by simply increasing and decreasing the size of your browser! You can check out the complete repository, clone it and run on your own system here: https://github.com/AbhishekDoshi26/web_example

How is the performance for Flutter Web and how it is different?

• Flutter Web works pretty smooth compared to native as it creates only single page app and hence creates less load on the browser.
• With Flutter, you can create some great animations very easily compared to native, hence making your web-app more beautiful.
• Flutter Web directly supports installing your website as a standalone application (Web-App) for which you need to separately code if in native.
• Flutter, as it is cross-platform framework, you can add some platform specific code without any configuration changes.

Conclusion!

• Flutter Web Apps are Single Page Apps.
• Flutter renders web app same as it renders Flutter Android or iOS apps by converting dart code into native code.
• We need to check whether a particular package is having Web Support or not before using it in our project.
• Always make your Web App responsive as user can open it in any screen sizes.

Hope you enjoyed this article!

If you loved it, you can Buy Me A Coffee!

Don’t forget to connect with me on:

• Instagram
• Twitter
• LinkedIn
• GitHub

Don’t stop, until you are breathing!💙
- Abhishek Doshi