Category: Flutter Web

With great power, comes great responsibility…

Bring back the web development days,….some of us would ask…Wish answered….

Before flutter web, some of us would think, which web development framework to hop on ??

HOSTED URL : https://fir-signin-4477d.firebaseapp.com/#/

BEGIN….

Flutter web was announced at Google I/O 2019. If you want to catch up with the Flutter updates in Google I/O, please refer this article…

https://medium.com/flutterpub/breakdown-flutter-i-o-2019-2fe07c13ea04

Long Story, Short….

Flutter has expanded its universe from Mobile, now to Web… 🙂

Architecture :

For detailed information on Arch, refer this.

Installation : 

Prerequisites:

1. Your Flutter version needs to be 1.5.4 and higher
2. Flutter plugin 3.0 in VSCode
3. Dart plugin 3.0 in VSCode

There may be some cases, where you might not find the below,

Don’t worry, follow this article.

What we will make…

Breakdown….

1. Level 1 : It has 4 widgets….

Gmail, Images, Apps and Sign In….

Simple as we would do for a normal Flutter app…:)

2. Level 2 : It can be broken into

> Google Logo, 

> Search bar, 

> 2 buttons (Google Search and I’m feeling lucky)

> Google Languages Options.

3. Level 3: This displays the user’s network country..

4. Level 4: This comprises of widgets like,

> Advertising, Business, About, Privacy Terms and Settings…

Assets :

Google Logo is an asset which we need to include as 

create a folder, assets under the web folder.

Paste the image inside this…

For including assets, refer this article.

Takeaways :

1. Flutter Web is powerful in its early stages….
2. Issues in getting the Rounded Corners..

There is a difference in which flutter_web renders the BoxDecoration, specially the borderRadius.

3. Detect the Hyperlink.

The text, for instance, Gmail should detect Hyperlink on Pointer Hover.

4. Way to specify the favicon (for the Title) of the page..

Things to Note :

flutter_web is still under technical preview ,

DO NOT USE IT IN PRODUCTION…..

import 'package:flutter_web/material.dart';

In the near future, this will be merged as (our favourite),

import 'package:flutter/material.dart';

No support for Hot-Reload, but the team is working on it…

For importing packages, you need to make sure they are supported by Web now…

For detailed info about the Flutter Web, refer this article

Future Scope…

1. Maybe we can integrate the Search functionality
2. Going to links as suggested by the option, for instance, Gmail
3. Sub-Menu Option on Apps Icon, Sign In with Google
4. Feedback by You..

Src code: https://github.com/AseemWangoo/experiments_with_web