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

 

Flutter web app video tutorial :

Go through the below for more interesting details.

 

 

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

Flutter web app output :

The screen below depicts the implementation of flutter web app

flutter web app

If you have any queries in this tutorial on flutter web app do let us know in the comment section below.If you like this tutorial do like and share for more interesting content.

Show Buttons
Hide Buttons
Read previous post:
Flutter PDF viewer implementation for beginners

  Flutter PDF Viewer: Flutter PDF viewer is used to read the files ending with the extension '.pdf ' because...

Close