Pada artikel kali ini saya akan menjelaskan cara membuat Appbar (Aplikasi Bar) menggunakan Flutter. Disini saya sudah membuat sebuah project Flutter yang baru, dan membuat sebuah class baru bernama HalamanHome sebagai halaman utamanya.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return MaterialApp(
title: 'App Bar',
debugShowCheckedModeBanner: false,
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: HalamanHome(),
);
}
}
class HalamanHome extends StatelessWidget {
@override
Widgetbuild(BuildContext context) {
return Scaffold(
);
}
}
Pada MaterialApp saya tambahkan properti debugShowCheckedModeBanner untuk menghilangkan pita merah dikanan atas layar. Untuk class HalamanHome saya gunakan StatelessWidget.
debugShowCheckedModeBanner: false,
...
return Scaffold(
appBar: AppBar(),
);
...

...
appBar: AppBar(
leading: Icon(Icons.home),
title: Text('Hallo Appbar'),
actions: <Widget>[
Icon(Icons.search),
],
elevation: 0,
backgroundColor: Colors.red,
centerTitle: true,
)
...

...
actions: <Widget>[
Padding(
padding: const EdgeInsets.only(right:12.0),
child: Icon(Icons.search),
),
],
...
