AppBar examples

main.dart

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        backgroundColor: Colors.grey,

        /// Change the appBar here
        appBar: appBar3,

        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }

  final Widget appBar1 = AppBar(
    backgroundColor: Colors.red,
    title: Text(
      "Title",
    ),
    elevation: 4.0,
  );

  final Widget appBar2 = AppBar(
    title: Text("Title"),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
      IconButton(
        icon: Icon(Icons.add),
        onPressed: () {},
      ),
    ],
  );

  final Widget appBar3 = AppBar(
    backgroundColor: Colors.blueAccent,
    title: Text("Title"),
    actions: [
      IconButton(
        icon: Icon(Icons.search),
        onPressed: () {},
      ),
    ],
    iconTheme: IconThemeData(
      color: Colors.white,
    ),
    textTheme: TextTheme(
      headline6: TextStyle(color: Colors.white, fontSize: 20.0),
    ),
  );

  final Widget appBar4 = AppBar(
    automaticallyImplyLeading: false,
    title: Center(
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Text(
            "Title",
            style: TextStyle(fontSize: 18.0),
          ),
          Text(
            "subtitle",
            style: TextStyle(fontSize: 14.0),
          ),
        ],
      ),
    ),
  );

  final Widget appBar5 = AppBar(
    automaticallyImplyLeading: false,
    backgroundColor: Colors.yellow,
    title: Row(
      mainAxisAlignment: MainAxisAlignment.start,
      mainAxisSize: MainAxisSize.max,
      children: [
        FlutterLogo(),
        Padding(
          padding: const EdgeInsets.only(left: 16.0),
          child: Text(
            "Title with image",
          ),
        ),
      ],
    ),
  );

  final Widget appBar6 = AppBar(
    backgroundColor: Colors.transparent,
    elevation: 0,
    title: Text("Transparent AppBar"),
    actions: [
      IconButton(
        icon: Icon(
          Icons.search,
        ),
        onPressed: () {},
      )
    ],
  );
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: EdgeInsets.all(20),
      child: Column(
          children: <Widget>[
            Text('AppBar Example'),
          ]),
    );
  }
}