Flutter : Web App Tutorial For Beginners

Flutter Web App :

Flutter web app creation is explained in this part of the tutorial where we will use the same code that we use for mobile app to design a web page too!!!

We can provide the same UI similar to that of the web pages design using Html, CSS. As it came with same source code base it much simpler to handle projects for teams.

Flutter also provides a detailed documentation for the web developers to use their existing development skills and get throught the flutter development process.

Can find more info on web development on flutter

pubspec.yaml :

In the pubspec file we need to add a dependency using which we can develop a basic web app you can find more info on this plugin at flutter_webview_plugin.

dependencies:
  flutter:
    sdk: flutter
  flutter_webview_plugin: ^0.3.11

main.dart :

We need to initialize the app with void main() from where the actual compilation process begins.

void main() => runApp(MyApp());

Now we have specified a default class MyApp() extending a stateless widget using which we provide the specifications required in the app like Material Designs and more.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      
    );
  }
}

So inside the MaterialApp we need to specify the constraints here we are routing to a screen

routes: {
  '/': (context) => Screen(),
},

Create a Screen class extending stateless widget and specify a Card widget

class Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        child: SizedBox(
          width: 400,
          child: Card(
            child: Home(),
          ),
        ),
      ),
    );
  }
}

Inside the Card widget we are adding a Container which holds the data to be displayed onto the web app.

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      
    );
  }
}

Add a Text widget to the Container

Text("Welcome to flutter webpage...")

Provide the height for the Container

height: 400,

FullCode :

The complete code is as below

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      routes: {
        '/': (context) => Screen(),
      },
    );
  }
}

class Screen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey[200],
      body: Center(
        child: SizedBox(
          width: 400,
          child: Card(
            child: Home(),
          ),
        ),
      ),
    );
  }
}

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      height: 400,
      child: Center(child: Text("Welcome to flutter webpage...")),
    );
  }
}