Flutter AppBar, With Icon, Title and Actions Link

Flutter AppBar Skeleton
It is very common to have AppBar in mobile apps, most mobile apps have app bar. AppBar or top App Bars is a collection of widget located at the top of the app, for wrapping our app's title, icon and action link. This app bar will work the same looks, style both in Android and IOS. Basically almost everything will work the same, Flutter is cross platform mobile app Framework.

Here's example code of AppBar in Flutter with icon, title and action:

import 'package:flutter/material.dart';

void main() {
  runApp(new MyApp());
class MyApp extends StatelessWidget {

  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Generated App',
      theme: new ThemeData(
        primarySwatch: Colors.blue,
        primaryColor: const Color(0xFF2196f3),
        accentColor: const Color(0xFF2196f3),
        canvasColor: const Color(0xFFfafafa),
      home: new MyHomePage(),

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);
  _MyHomePageState createState() => new _MyHomePageState();

class _MyHomePageState extends State {
    Widget build(BuildContext context) {
      return new Scaffold(
        appBar: AppBar(
          title: new Text('App Name'),

          actions: [
            // action button
              icon: Icon( Icons.search ),
              onPressed: () { },
          leading: IconButton(
            icon: Image.asset('assets/logo.png'), 
            onPressed: () { },


Don't forget to add asset for your mobile app logo in the pubspec.yaml like this, and add your image named logo.png inside assets directory.

   - assets/logo.png

I can't explains that much about the codes above, it is just simple UI, it is pretty straight forward and easy to read. But here's some explanation:

- Scaffold is they main layout of our mobile app, there's parameter appBar where you can add your customize app bar
- AppBar is the class for displaying your app bar, the actions parameter is the action located on the right of app bar. leading is located on the front of app bar and title is text located on the center of app bar after the leading icon. The default leading icon is arrow left icon.

In Flutter, you can customize the look of your app bar whatever you like, although it is better to just follow their default API, which you can see here https://api.flutter.dev/flutter/material/AppBar-class.html, AppBar class API documentation.

AppBar is based on Material design principle here https://material.io/components/app-bars-top/. Although it is Material design for android, it can also work the same deliciousness in IOS.


Popular posts from this blog

ERROR 1348 Column Password Is Not Updatable When Updating MySQL Root Password

Spring Kafka - how to use ReplyingKafkaTemplate send and reply synchronously

How To Create Spring Boot Project Using Netbeans

How To Connect SSH Using PEM Certificate On Windows

Intellij Error: Spring class file has wrong version 61.0, should be 55.0