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 {

  @override
  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);
  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

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

          actions: [
            // action button
            IconButton(
              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:
   - 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.


Comments

Popular posts from this blog

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

Flixify Video Streaming Platform, Watch Movies and TV Show Online

ASUS Battery Health Charging Software To Make Your Battery Life Longer

JavaFX Combo Box with Search Autocomplete

How To Uninstall Angular CLI, The Angular Framework

How to Add MySQL JDBC Driver To Wildfly