{"id":845,"date":"2024-07-01T15:27:09","date_gmt":"2024-07-01T15:27:09","guid":{"rendered":"https:\/\/www.cmsgalaxy.com\/blog\/?p=845"},"modified":"2024-07-01T15:27:11","modified_gmt":"2024-07-01T15:27:11","slug":"what-is-appbar-in-flutter","status":"publish","type":"post","link":"https:\/\/www.cmsgalaxy.com\/blog\/what-is-appbar-in-flutter\/","title":{"rendered":"what is AppBar() in flutter"},"content":{"rendered":"\n<p>In Flutter, the <code>AppBar<\/code> widget is a material design app bar that is typically placed at the top of the screen. It is used to display the title, navigation icons, and other actions related to the current screen. The <code>AppBar<\/code> can also include a variety of widgets such as icons, text, and menus.<\/p>\n\n\n\n<p><strong>Constructor of AppBar class:<\/strong>&#8211;<\/p>\n\n\n\n<p><code>AppBar(<br>{Key key,<br>Widget leading,<br>bool automaticallyImplyLeading: true,<br>Widget title,<br>List&lt;Widget> actions,<br>double elevation,<br>Color shadowColor,<br>ShapeBorder shape,<br>Color backgroundColor,<br>Brightness brightness,<br>IconThemeData iconTheme,<br>IconThemeData actionsIconTheme,<br>TextTheme textTheme,<br>...}<br>)<\/code><\/p>\n\n\n\n<p><strong>Key Properties of Appbar Widget:<\/strong>&#8211;<\/p>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>actions:\u00a0<\/strong>This property takes in a list of widgets as a parameter to be displayed after the title if the\u00a0<em>AppBar<\/em>\u00a0is a row<em>.<\/em><\/li>\n\n\n\n<li><strong>title:<\/strong>\u00a0This property usually takes in the main widget as a parameter to be displayed in the AppBar.<\/li>\n\n\n\n<li><strong>backgroundColor:<\/strong>\u00a0This property is used to add colors to the background of the\u00a0<em>Appbar.<\/em><\/li>\n\n\n\n<li><strong>elevation:\u00a0<\/strong>This property is used to set the z-coordinate at which to place this app bar relative to its parent.<\/li>\n\n\n\n<li><strong>shape:\u00a0<\/strong>This property is used to give shape to the\u00a0<em>Appbar\u00a0<\/em>and manage its shadow.<\/li>\n<\/ul>\n\n\n\n<p><strong><strong>Example :<\/strong><\/strong>&#8211;<\/p>\n\n\n\n<p>Here\u2019s a simple example of how to use <code>AppBar<\/code> in a <code>Scaffold<\/code>:<\/p>\n\n\n\n<p><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>import 'package:flutter\/material.dart';\n\nvoid main() {\nrunApp(MyApp());\n}\n\nclass MyApp extends StatelessWidget {\n@override\nWidget build(BuildContext context) {\nreturn MaterialApp(\nhome: HomeScreen(),\n);\n}\n}\n\nclass HomeScreen extends StatelessWidget {\n@override\nWidget build(BuildContext context) {\nreturn Scaffold(\nappBar: AppBar(\ntitle: Text('Motoshare'),\n),\n);\n}\n}\n<\/code><\/pre>\n\n\n\n<p><strong><strong>Output:<\/strong><\/strong>&#8211;<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"287\" height=\"593\" src=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/07\/image-3.png\" alt=\"\" class=\"wp-image-849\" srcset=\"https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/07\/image-3.png 287w, https:\/\/www.cmsgalaxy.com\/blog\/wp-content\/uploads\/2024\/07\/image-3-145x300.png 145w\" sizes=\"auto, (max-width: 287px) 100vw, 287px\" \/><\/figure>\n","protected":false},"excerpt":{"rendered":"<p>In Flutter, the AppBar widget is a material design app bar that is typically placed at the top of the<\/p>\n","protected":false},"author":5,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[1],"tags":[],"class_list":["post-845","post","type-post","status-publish","format-standard","hentry","category-uncategorized"],"_links":{"self":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/845","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/comments?post=845"}],"version-history":[{"count":1,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/845\/revisions"}],"predecessor-version":[{"id":850,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/posts\/845\/revisions\/850"}],"wp:attachment":[{"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/media?parent=845"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/categories?post=845"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.cmsgalaxy.com\/blog\/wp-json\/wp\/v2\/tags?post=845"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}