Flutter UI #2: Fun With AppBar in Flutter

Updated: Mar 24


Flutter UI #2: Fun With AppBar in Flutter
Flutter UI #2: Fun With AppBar in Flutter


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,
    );
  }
}


Flutter AppBar
Flutter AppBar with Text

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,
    );
  }
}



Flutter Appbar Leading Button & Action Buttons
Flutter Appbar Leading Button & Action Buttons


#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

25 views0 comments