Flutter & Firebase App Tutorial — Part 9 loading Spinkit and theme & layout

5 min readNov 6, 2021

--

Create a flutter authenticate app in 10 mins by using firebase as the back-end. You will learn to create a fancy Flutter app and show a loading animation while waiting for Firebase’s response.

Flutter tutorial for beginners step by step using Firebase — Lumei Digital

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Welcome to Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: const Text('Welcome to Lumei Digital'),
        ),
        body: const Center(
          child: Text('Hello World'),
        ),
      ),
    );
  }
}

A widget’s main job is to provide a build()method that describes how to display a wedget or a screen.

➡️ Theme:

We use a theme to share colors and fonts throughout an app. If you do not provide a theme, Flutter creates a deafult theme for you.

Other than using the default theme, you can extend the parent theme by using thecopyWith().

Text(
  "Sign In", 
  style: Theme.of(context).textTheme.headline5!.copyWith(fontWeight:      FontWeight.bold, color: LumeiColors.primary),
)

After defining a theme, use it within the widget’s build()methods by using the Theme.of(content)method.

The Theme.of(context) method looks up the widget tree and returns the nearest Theme in the tree. If you have a standalone Theme defined above your widget, that’s returned. If not, the app’s theme is returned.

➡️ Scaffold: Using Scaffoldwidget from the Material library to implement a basic layout such as a appBaron the top, background color, floating action buttons, and more. It holds the widget tree for the home screen.

all built-in Flutter widgets start with a capital latter

runApp(MaterialApp(
   home: Scaffold(
     //a appBar property, the value of the property is AppBar widget
     appBar: AppBar(),
   )));

➡️ Standard widgets:

✅ Stack: overlaps a widget on top of another. Often it’s used to arrange an image on top of a base widget.

️✅ Container: allows you to customize its child widget and add padding, margins, borders, background color, other decorations, and more.

✅ ListView: displays widgets as a scrollable list.

✅ GridView: displays widgets as a scrollable grid.

Stack(          
  fit: StackFit.loose,
  children : [
           Container(
              width: MediaQuery.of(context).size.width,
              height: MediaQuery.of(context).size.height,
              color: LumeiColors.primary,
              child: SvgPicture.asset(
                'assets/icons/bg.svg',                
                fit: BoxFit.cover,
                allowDrawingOutsideViewBox: true,
                matchTextDirection: true,
              ),
            ),
  ]
);

We use Stackso we can have an svg as a background image.

The difference between MediaQuery and double.infinity
MediaQuery: It’s used when you want the widget as big as the screen
double.infinity: It’s used when you want the widget as big as the parent widget

➡️ Colors:

Colors are important to your UI.

We add a property to the AppBarcalled backgroundColorand the value of it would be a material design color. We have full access to Material Design color palettes in the flutter app. In this example, we give the AppBara blue color with a strength of 600.

ctrl + Q in VS code to see different strength of blue

appBar:AppBar(
   backgroundColor: Colors.blue[600]
)

Flutter & Firebase App Tutorial — Part 9 loading Spinkit and theme & layout

More Tutorials:

Table of Contents

More Tutorials:

Written by Jumei Lin