Are you enthusiastic about Web Development? Try Flutter for Web! Here’s a guide on Flutter for web with demo to learn everything about Flutter Web development.

1. www.bacancytechnology.com

2. Google’s UI library- Flutter, was initially
developed to build native performant
mobile applications. Nonetheless, Flutter
isn’t limited to just mobile applications; it
has been working proactively to use the
single codebase for iOS, Android, and
Desktop. Are you passionate about Web
Development? You should definitely try out
Flutter for Web then!
In this guide, we will learn about Flutter for
Web and build a small demo for the same.
Without further ado, let’s get started with
Flutter Web development!

3. What is
Flutter for
Web?

4. Flutter’s web support helps you
develop complex standalone web
applications, graphically rich and
interactive content to reach end-users
on a broad variety of devices.
Flutter for Web support offers a
delivery model based on browsers for
the existing Flutter mobile
applications.

5. How does
Flutter for
Web work?

6. Flutter renders web apps 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, keep in
mind that Flutter Web creates Single
Page Web Applications! You can
definitely have multi-pages, but when
the Flutter framework converts the web
app into the native language, there will
only be one HTML file, i.e., index.html.
So how do we have multiple pages? The
answer to this question is pretty simple.
If we have a closer look at how
Navigator works, we will observe that it
works on the Stack data structure.
Hence, Flutter for Web is a single page,
but it pushes multiple pages on that
same single native page.

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

9. Flutter Web works pretty smooth
compared to native as it creates only a
single-page application and hence
creates less load on the browser. Though
we can say that Flutter Web is
improving, its performance is not upto
the mark.
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 code, if in native, separately.
Flutter, as it is a cross-platform
framework, can add some platform-
specific code without any configuration
changes.

10. How to run
your existing
project on
Flutter Web?

11. Flutter Web is now on the stable
channel from Flutter 2.0!
Nevertheless, if you are not working on
Flutter 2.0, you can still use it by
running the below commands:
flutter channel beta
flutter upgrade
flutter config --enable-web
flutter create .
If you are already on Flutter 2.0 but
have never run your old project on the
Web, you can run the following set of
commands:
flutter config --enable-web
flutter create

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

13. How to create
a new app
with Web
support?

14. When we create our new project with
Flutter 2.0, web support is already
enabled with new projects.
But if, for some reason, it’s not enabled,
you can run the following commands:
Now Web has been enabled in your
project, and you can run it directly.
flutter config --enable-web
flutter create

15. Some key
points you
must
consider
when using
Flutter Web!

16. Flutter Web creates a Single Page App!
As users can open your website in any
screen size now, you need to make it
responsive.
Many packages support the web, but
always check the supported platforms
before coding.
If you are from a web development
background and if you feel like making
any changes in native code, you are
highly welcomed to do so. You can
change the native code the same way we
can change it for Android and iOS.
When you want to deploy your web app,
you can simply run:
When you are working with Flutter Web,
you need to keep few points in mind:

17. flutter build web
And you will get a folder web in your
project directory that contains native codes,
including index.html
Quick Read: :Flutter for App Development

18. Tips and
Tricks to
make your
web app
responsive!

19. The best way to make your web app
responsive is to use MediaQuery to get
the height and width of the screen, and
based on that; you can assign font size.
Many other packages help you to make
your app responsive. Some of the most
useful packages are
➢ responsive_framework
➢ flutter_screenutil

20. Let’s make a
small
responsive
web app for
all screen
sizes.

21. 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();
}
}
Create a new project and delete all code
available in main.dart
Paste the following code in main.dart:

22. 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),
),
),
);
}

23. 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),
),
),
);
}

24. The code is pretty simple. There’s one
Container whose height and width are
being maintained using MediaQuery.
We have Text as its child whose 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 find the entire source code, clone
the Github Repository and run it on your
system.

25. Conclusion

26. Flutter for Web Apps are Single Page
Apps.
Flutter renders web apps the same as it
renders Flutter Android or iOS apps by
converting dart code into native code.
We need to check whether a particular
package has Web Support before using it
in our project.
Always make your Web App responsive
as users can open it in any screen size.
Bacancy has dedicated and enthusiastic
Flutter developers enriched with
fundamental and advanced knowledge. If
you’re looking for a helping hand for your
Flutter application, contact us and hire
Flutter developers.

27. Thank You
www.bacancytechnology.com