Step By Step Tutorial In Learning Flutter: Lesson 03 — The AppBar

In this lesson we will look at the AppBar where we will be adding icons to make it more appealing.

Below is the finished product that we are going to accomplish today

If you haven’t followed along from day 1, I advise you to see the following articles:

My First Flutter Application

Renaming Project and Module in Android Studio

Downloading the Files

You can either start creating a new Project, download the lesson03_the_appbar, or if you have downloaded the previous lesson02_creating_new_project_from_existing then you can follow on how to rename the project and module.

In my case, I have renamed the previous lesson and will work from there

And the current main.dart code is as follows

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('Lesson 02 Renaming Project and Modules'),
        ),
        body: Center(
          child: Text('This is the second lesson in Flutter'),
        ),
      ),
    );
  }
}

Let’s get started, let us change the appBar title from Lesson 02 Renaming Project and Modules to TREE

Then click the Hot Reload

The code will look like below

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TREE'),
        ),
        body: Center(
          child: Text('This is the second lesson in Flutter'),
        ),
      ),
    );
  }
}

After the Hot Reload the screen will be

OK, next is to change the body text This is the second lesson in Flutter to This is the third lesson in Flutter

The code will look like this now

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          title: Text('TREE'),
        ),
        body: Center(
          child: Text('This is the third lesson in Flutter'),
        ),
      ),
    );
  }
}

Click Hot Reload, below will be the new screen

Next question I have in mind is, how can I make the title in the center

It is very easy with one line of code which is centertitle: true

The code now will be

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          title: Text('TREE'),
        ),
        body: Center(
          child: Text('This is the third lesson in Flutter'),
        ),
      ),
    );
  }
}

Perform a Hot Reload

New screen will be

Looks very good, its now time to add the Icon

The line of code is leading: new Icon(Icons.menu)

Here is the code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          leading: new Icon(Icons.menu),
          title: Text('TREE'),
        ),
        body: Center(
          child: Text('This is the third lesson in Flutter'),
        ),
      ),
    );
  }
}

Click the Hot Reload button to see the results

And finally, let us add the other icon

The code will be

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          leading: new Icon(Icons.menu),
          titleSpacing: 0.0,
          title:
          Text('TREES'),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.search,
                color: Colors.white,
              ),
              onPressed: () {
                // do something
              },
            ),
          ],
        ),
        body: Center(
          child: Text('This is the third lesson in Flutter'),
        ),
      ),
    );
  }
}

Click Hot Reload

There are many icons that you can choose from let say if you want shopping cart, all you need to do is to change the dot (.) after the Icons

So let say, shopping

Code will be

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter',
      home: Scaffold(
        appBar: AppBar(
          centerTitle: true,
          leading: new Icon(Icons.menu),
          titleSpacing: 0.0,
          title:
          Text('TREES'),
          actions: <Widget>[
            IconButton(
              icon: Icon(
                Icons.shopping_cart,
                color: Colors.white,
              ),
              onPressed: () {
                // do something
              },
            ),
          ],
        ),
        body: Center(
          child: Text('This is the third lesson in Flutter'),
        ),
      ),
    );
  }
}

Click Hot Reload

And if we want to change the colour of the icon to yellow we can change it by doing below

Finally, as last exercise, put it back to search Icon on white colour

Hope you enjoy as much as I do. Comment below or give me a clap. Thanks everyone, till next time :)