Web Application with Flutter (Flutter web)
Flutter is the trending technology for mobile application development and many developers start learning it. The best reason to love flutter is the, you can develop a mobile application (Android,iPhone), desktop application (mac, windows, Linux) and web application too. This article will help mobile developers to develop web application in Flutter.
Yes, you heard right, you can develop a Web application with flutter.
Formerly, Google has introduced the Flutter web as hummingbird but later google changed it to flutter web and recently merged flutter web to flutter on the release of flutter 1.9.1
So let’s start to learn flutter web. It’s the right time start to learn flutter web because you can access local storage, session storage and cookies of the web browser in flutter web and YES API calls too.
here is some information about it.
storing value is the required thing in any application development, whether it is a mobile app, desktop app or web app. So for web application development, there are session storage, local storage, indexed DB and web SQL to store value in a purely application-specific browser. You learned about them in the previous section.
I am sharing the screenshot with code of flutter web application and will also host on GitHub.
html.window.localStorage['local_value'] = localStorage;html.window.sessionStorage['session_value'] = sessionStorage;html.window.document.cookie= "username=${cookies}; expires=Thu, 18 Dec 2020 12:00:00 UTC";
don’t forget to move your flutter channel in beta or master and import
‘dart:html’ as html;
import 'dart:html' as html;You can get/retrieve those saved value like this way
html.window.localStorage['key']html.window.sessionStorage['key']html.window.document.cookie
Here I am sharing full code
import 'package:flutter/material.dart';
import 'package:http/http.dart';
import 'package:web_example/app_util.dart';
import 'package:web_example/home_screen.dart';
import 'package:web_example/register_screen.dart';
import 'package:web_example/user.dart';
import 'dart:html' as html;
import 'package:http/http.dart' as http;class LoginScreen extends StatefulWidget {
@override
_LoginScreenState createState() => _LoginScreenState();
}class _LoginScreenState extends State<LoginScreen> {
final GlobalKey<ScaffoldState> _scaffoldKey = new GlobalKey<ScaffoldState>();String localStorage="";
String sessionStorage="";
String cookies="";@override
Widget build(BuildContext context) {Widget enterLocalStorageValue() {
return Container(
width: 400.0,
child: TextField(decoration: InputDecoration(
labelText: "Enter local storage value",
labelStyle: TextStyle(color: Colors.green),
hintText: "Enter local storage value",
alignLabelWithHint: true,
prefixIcon: new Icon(Icons.text_fields)
),
obscureText: false,
onChanged: (value) {
localStorage = value.trim();
},
),
);
}Widget enterSessionStorageValue() {
return Container(
width: 400.0,
child: TextField(
decoration: InputDecoration(
labelText: "Enter session storage value",
labelStyle: TextStyle(color: Colors.green),
hintText: "Enter session storage value",
alignLabelWithHint: true,
prefixIcon: new Icon(Icons.text_fields)
),
obscureText: false,
onChanged: (value) {
sessionStorage = value.trim();
},
),
);
}Widget enterCookieValue() {
return Container(
width: 400.0,child: TextField(
decoration: InputDecoration(
labelText: "Enter cookies value",
labelStyle: TextStyle(color: Colors.green),
hintText: "Enter cookies value",
alignLabelWithHint: true,
prefixIcon: new Icon(Icons.text_fields)
),
obscureText: false,
onChanged: (value) {
cookies = value.trim();
},
),
);
}final localStoreBtn = new Container(
width: 400.0,
height: 40.0,
child: new RaisedButton(
child: new Text(
'Local storage',
style: new TextStyle(color: Colors.white),
),
onPressed : () => _localStorage(),
color: Colors.blue,
),
margin: new EdgeInsets.only(top: 25.0)
);final sessionStoreBtn = new Container(
width: 400.0,height: 40.0,
child: new RaisedButton(
child: new Text(
'Session storage',
style: new TextStyle(color: Colors.white),
),
onPressed : () => _sessionStore(),
color: Colors.blue,
),
margin: new EdgeInsets.only(top: 25.0)
);final cookieStoreBtn = new Container(
width: 400.0,height: 40.0,
child: new RaisedButton(
child: new Text(
'Cookies',
style: new TextStyle(color: Colors.white),
),
onPressed : () => _cookieStorage(),
color: Colors.blue,
),
margin: new EdgeInsets.only(top: 25.0)
);final apiCallBtn = new Container(
width: 400.0,
height: 40.0,
child: new RaisedButton(child: new Text('Tap to call api',
style: new TextStyle(color: Colors.white),
),
onPressed : () => getData(),
color: Colors.blue,),
margin: new EdgeInsets.only(top: 25.0)
);return Scaffold(
key: _scaffoldKey,
appBar: AppBar(
centerTitle: true,
title: Text('Flutter web sample',style: TextStyle(fontSize: 18),),
),
body: Container(
width: double.infinity,
height: double.infinity,
child: ListView(children: <Widget>[Row(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
enterLocalStorageValue(),
localStoreBtn,
],
),Padding(
padding: const EdgeInsets.all(8.0),
),Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
enterSessionStorageValue(),
sessionStoreBtn,
],
),Padding(
padding: const EdgeInsets.all(8.0),
),Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
enterCookieValue(),
cookieStoreBtn,
],
),Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
apiCallBtn,
],
),],
),
)
);}_localStorage() {
html.window.localStorage['local_value'] = localStorage;
}_sessionStore() {
html.window.sessionStorage['session_value'] = sessionStorage;
}_cookieStorage() {
html.window.document.cookie= "username=${cookies}; expires=Thu, 18 Dec 2020 12:00:00 UTC";
}getData() async {
try {
final response = await http.get('https://jsonplaceholder.typicode.com/posts');
print(response.body);} catch (e) {
print(e);
}
}}
Video Link which shows the working of code.
Github source code link:
You can check the working demo available online on this link:
