Flutter web app : how to start with

How to start with a Flutter web app? In this section we will build a few widgets and connect them first.

Next, we will build our dynamic flutter web app on top of that.

In our previous section we have seen how we can build progressive web applications (PWA), and single page applications (SPA) with the help of flutter.

Therefore let’s take a look at the flutter web app first.

Firstly, we need a home page.

Let’s create a homepage where we will place the photo of the blogger.

import 'package:flutter/material.dart';

import '../controller/constrained_controller.dart';
import 'blog_list_tile_class.dart';

class BlogHomePage extends StatelessWidget {
  const BlogHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Align(
        alignment: Alignment.topCenter,
        child: Container(
          width: 600,
          padding: const EdgeInsets.symmetric(horizontal: 18),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const ConstrainedControllerCentre(
                child: CircleAvatar(
                  radius: 70,
                  backgroundImage: NetworkImage(
                    'https://cdn.pixabay.com/photo/2018/03/24/00/36/girl-3255402_960_720.png',
                  ),
                ),
              ),
              const SizedBox(height: 18),
              ConstrainedControllerCentre(
                child: SelectableText(
                  'Angel\'s Blog',
                  style: Theme.of(context).textTheme.headline1,
                ),
              ),
              const SizedBox(height: 40),
              SelectableText(
                'Hello, my name is Angel, and I want peace above all. What about you?',
                style: Theme.of(context).textTheme.bodyText2,
              ),
              const SizedBox(height: 40),
              SelectableText(
                'Angel',
                style: Theme.of(context).textTheme.headline2,
              ),
              const BlogListTileClass(),
            ],
          ),
        ),
      ),
    );
  }
}

For instance, in the above two parts are important. 

Firstly, we have placed the image and the page title in the center. 

Secondly, we have used a SelectableText widget to announce the purpose of the blog.

Why have we chosen the SelectableText widget?

The advantage is we can break the string across multiple lines. In addition, the SelectableText widget uses a single style.

Meanwhile in the next section we will see how we can change this SelectableText widget to apply a different style.

Flutter Web app and the position

Our next challenge was to place the image and top level content in a center position. 

For that purpose, we have built a separate widget.

import 'package:flutter/material.dart';

class ConstrainedControllerCentre extends StatelessWidget {
  final Widget child;

  const ConstrainedControllerCentre({Key? key, required this.child})
      : super(key: key);
  @override
  Widget build(BuildContext context) {
    return SizedBox(width: double.infinity, child: Center(child: child));
  }
}

Finally, we want the date and the title of the blog will come from the Firebase and Firestore. And to manage them dynamically we will use the Provider package.

import 'package:flutter/material.dart';

class BlogListTileClass extends StatelessWidget {
  const BlogListTileClass({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        const SizedBox(height: 20),
        InkWell(
          child: Text(
            'How to get peace?',
            style: TextStyle(color: Colors.blueAccent.shade700),
          ),
          onTap: () {},
        ),
        const SizedBox(height: 10),
        SelectableText(
          'May 14, 2022',
          style: Theme.of(context).textTheme.caption,
        ),
      ],
    );
  }
}

Till now, we have hard coded everything. But as we progress we will make every component dynamic.

So stay tuned. 

You’ll get full code in this GitHub repository branch.

What Next?

Books at Leanpub

Books in Apress

My books at Amazon

Courses at Educative

GitHub repository

Technical blog

Twitter