Flutter Scaffold and AppBar Widgets help in the beautification of our App and display some string in the app bar. Consider the following flutter code.

import 'package:flutter/material.dart';

void main() => runApp(
      const MaterialApp(
        home: Text("Flutter Scaffold & AppBar Widgets"),
      ),
    );

Here we have used MaterialApp() widget and are using home parameter of the MaterialApp() widget. In the home parameter, we are using a Text widget that displays some text.

Output

The above output is not clean. We need to use MaterialDesign() in order to make our app fancy. Remember everything in Flutter is a widget?
MaterialApp() is a widget that wraps various widgets usually required for material design applications.
Resource: https://api.flutter.dev/flutter/material/MaterialApp-class.html

Let’s rewrite the above flutter code. Use Scaffold() widget that accepts various parameters.

1. AppBar: accepts an AppBar() constructor and provide title paramater with a value of Text() widget.with body parameter and use the Text Widget in body parameter.
2. body: accepts a Text() widget.

import 'package:flutter/material.dart';

void main() => runApp(
       MaterialApp(
        home: Scaffold(
          appBar: AppBar(
            title: const Text("Flutter Scaffold and AppBar"),
          ),
          body: const Text("Flutter Scaffold & AppBar Widgets"),
        ),
      ),
    );

Output

The output looks so clean now with an elegant AppBar and some text in the body.

Comments

comments