Halo teman – teman,
Tau g sih sebenarnya AppBar itu bisanya apa aja ?
Sebenarnya ada banyak yang dapat di lakukan dalam AppBar seperti manaruh TexFormField bahkan gambar, sebernya kita bisa menampatkan widget – widget di dalam AppBar.

Seperti pada contoh berikut ini :

Dapat dilihat di AppBar nya sendiri terdapat 2 warna serta icon dan gambar

Birikut untuk code nya :

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0xff01c0c8), //bertujuan agar bagian atas layar tetap menampilkan 1 warna dasar
        toolbarHeight: 50,
        leading: Icon(Icons.arrow_back_ios, size: 20,),
        flexibleSpace: SafeArea(   //untuk mengatur 2 warna yang berbeda
          child: Container(
            decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  stops: [
                    0.5,
                    0.5,
                  ],
                  colors: [
                    Color(0XFF01B6BE),
                    Color(0xff01c0c8)
                  ]),
              boxShadow: [
                BoxShadow(
                  color: Colors.grey.withOpacity(0.1),
                  spreadRadius: 0,
                  blurRadius: 1,
                  offset: Offset(0, 0),           //changes position of shadow
                ),
              ],
            ),
          ),
        ),
        title: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Container(
              decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(30),
                  border: Border.all(color: Color(0xff2B976B))),
              child: CircleAvatar(
                radius: 15,
                backgroundColor: Colors.white,
                child: Icon(Icons.info)
              ),
            ),
            SizedBox(width: 5),
            Text(
              'Yayasan Dar El-Iman',
              style: TextStyle(
                fontSize: 16,
                fontWeight: FontWeight.w900,
                fontFamily: 'Inter',
                color: Colors.white,
              ),
            ),
          ],
        ),
        
// centerTitle: true,
        actions: [                         //menambahkan Widget di bagian kanan AppBar
          CircleAvatar(
            radius: 15,
            backgroundColor: Colors.white,
            child: Icon(
              Icons.person,
              color: Color(0XFF2B976B),
            ),
          )
        ],
      ),
    );

Pada code di atas, pada bagian title menggunakan widget Row, sehingga centerTitle tidak perlu digunakan lagi kita daapt mengaturnya langsung pada Row dengan menambahkan mainAxisAlignment: MainAxisAlignment.center,

Selain itu, kita juga dapat menonaktifkan icon back, mengganti warna icon bahkan menghapus bayangan yang ada di AppBar seperti berikut :

Secara default Text dan Icon di dalam TabBar bewarna putih, sehingga saat background dari AppBar dirubah menjadi putih kita perlu memberikan warna pada icon serta Text agar dapat terlihat. Selain itu Icon Back pada AppBar juga dapat dihilangkan, berikut code nya :

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        automaticallyImplyLeading: false,  //menonaktifkan icon back
        backgroundColor: Colors.white,
        iconTheme: IconThemeData(color: Colors.black),  //memberikan warna pada icon back
        title: Text('Page Baru'),
        titleTextStyle: TextStyle(color: Colors.black),
        centerTitle: true,
        elevation: 0,       //menonaktifkan shadow
      ),
      body: Container(
        child: Center(
          child: Text('Hai'),
        ),
      ),
    );
  }