Create Flutter App with AppBar

AppBar widget created Material style AppBar in flutter app for all the available devices. Basic use of AppBar is to display app screen Title and If we are using multiple screens in our app it will show us Screen name with Back button to go to previous screens. When we create app for iOS devices it is recommended to use AppBar because iOS devices does not have Back hardware button.

Create Flutter App with AppBar

1. Defining appBar property in Scaffold widget and create AppBar widget. We will be using AppBar Title property to define screen Title and assign Text widget to it. This is the default AppBar with default styling.

AppBar(
          title: const Text('Flutter AppBar'),
     )

Source code for main.dart file:

import 'package:flutter/material.dart';

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

class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
            appBar: AppBar(
              title: const Text('Flutter AppBar'),
            ),
            body: SafeArea(
                child: Center(
              child: Text(
                'Flutter App With AppBar',
                style: TextStyle(fontSize: 24),
              ),
            ))));
  }
}

Screenshot: