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?

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

How to create new app with Web support?

flutter config --enable-web
flutter create .

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 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!

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

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

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

Conclusion!

Hope you enjoyed this article!

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

Don’t forget to connect with me on:

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

--

--

Google Developer Expert — Dart, Flutter & Firebase 💙💛

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store