Deep Dive into Flutter AppBar

This tutorial, we’re going to work with flutter AppBar. To do that, first we need to create a new project

flutter create flutterdemo
cd flutterdemo

Next, we can edit our main.dart as follows

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(home: MyApp()));

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("FlutterOwl"),
        centerTitle: true,
        backgroundColor: Colors.lightBlue[900],
        leading: Icon(Icons.menu),
        actions: <Widget>[
          Icon(Icons.notifications),
          Icon(Icons.more_vert)
        ],
      ),
    );
  }
}

Explanation:

  • We created AppBar with centered title & leading and action buttons
  • We can also change background color of appbar using backgroundColor property

Screenshot


Share on:

Download Source Code:


Comments: