
Flutter UI #2: Fun With AppBar in Flutter
Updated: Mar 24

AppBar is the widget in flutter which contains toolbar in particular flutter application. AppBar which is auto fixed toolbar at the top of the mobile screen.
In AppBar, we can create different toolbar widgets like actions, menu button, icon buttons and more.
Fun With Text in AppBar Flutter
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('AppBar Demo'),
),
body: null,
);
}
}

How To Remove Flutter Debug Banner From AppBar
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: MyStatelessWidget(),
);
}
Creating Leading Button and Action Button In Flutter AppBar
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return const MaterialApp(
debugShowCheckedModeBanner: false,
home: MyStatelessWidget(),
);
}
}
class MyStatelessWidget extends StatelessWidget {
const MyStatelessWidget({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Center(child: Text('AppBar Demo'),),
leading: GestureDetector(
onTap: () {
},
child: Icon(
Icons.menu,
),
),
actions: [
GestureDetector(
onTap: () {
},
child: Icon(
Icons.search,
),
),
SizedBox(width: 10,),
GestureDetector(
onTap: () {
},
child: Icon(
Icons.account_circle,
),
),
],
),
body: null,
);
}
}

#fluttertutorial #fluttertutorialforbeginners #flutterkicks #flutterfullcourse #flutterapp #flutterproject #fluttercourse #flutterappdevelopment #flutteranimation #flutterapi #flutterapptutorial #flutterapiintegration #flutterappproject #flutterbloc #flutterbasics #flutterbloctutorial #flutterbeginnertutorial #flutterbackend #flutterblocpattern #flutterbackgroundservice #fluttercrashcourse #fluttercompletetutorial #cookieswirlcfluttershydoll #flutterdevelopment #flutterdesktop #flutterdownload #flutterdesign #flutterdesktopapp #flutterdart #flutterd #flutterecommerceapp #flutterexplained