Flutter Appbar Example

In this tutorial, we’re going to add AppBar with your flutter application. where the app bar contains menu icons, title, action buttons, change the background color of AppBar.

Checkout Flutter Tutorials for more articles on flutter

Let’s start by creating a new project or you can also choose exiting project

flutter create appbar
<span class="hljs-built_in">cd</span> appbar

once we created a new project, we can start working with lib/main.dart file

Flutter AppBar Example

<span class="hljs-keyword">import</span> <span class="hljs-symbol">'package</span>:flutter/material.dart';

void main() => runApp(<span class="hljs-type">MyApp</span>());

<span class="hljs-class"><span class="hljs-keyword">class</span> <span class="hljs-title">MyApp</span> <span class="hljs-keyword">extends</span> <span class="hljs-title">StatelessWidget</span></span>{
  <span class="hljs-meta">@override</span>
  <span class="hljs-type">Widget</span> build(<span class="hljs-type">BuildContext</span> context) {
    <span class="hljs-keyword">return</span> <span class="hljs-type">MaterialApp</span>(home: <span class="hljs-type">Scaffold</span>(
      appBar: <span class="hljs-type">AppBar</span>(
        title: <span class="hljs-type">Text</span>(<span class="hljs-string">"CODESUNDAR"</span>),
        leading: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.menu),
        backgroundColor: <span class="hljs-type">Colors</span>.redAccent,
        actions: <<span class="hljs-type">Widget</span>>[
          <span class="hljs-type">IconButton</span>(icon: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.videocam), onPressed: () => { }),
          <span class="hljs-type">IconButton</span>(icon: <span class="hljs-type">Icon</span>(<span class="hljs-type">Icons</span>.account_circle), onPressed: () => { })
        ]
      )
    ));
  }
}

Explanation: We have created a stateless widget (because we’re not going to handle any data at this moment).

• We have implemented material design with MaterialApp, which needs Scaffold (is nothing but a single page/view).
• Scaffold widget contains more parameters but for now, we only need appBar
• Inside AppBar widget we have passed title: as a Text widget
• We have set backgroundColor using Colors objects (you can choose any colors)
• The leading parameter allows you to put any widget as the left side (front slot) where actions are the right side.
• Now, we have created IconButton inside actions

The final output for flutter AppBar

Hope this tutorial helps you.

Download