Hello All Flutter Developers
This the 3rd Artice of series What’s Inside material.dart
Let's start exploring flutter.
This the continuation of my previous article What’s Inside material.dart #2 — Flutter
What’s Inside material.dart #2 — Flutter
Second article What’s Inside material.dart #2 where we see whats available inside the material.dart file and how to…
Let's get started
if you see when you
ctrl + click on the
material.dart in your code, you will be taken to
material.dart let's see what's inside it
Let's see what's inside
app_bar.dart we find
Here what comments says about
An app bar consists of a toolbar and potentially other widgets, such as a [TabBar] and a [FlexibleSpaceBar]. App bars typically expose one or more common [actions] with [IconButton]s which are optionally followed by a [PopupMenuButton] for less common operations (sometimes called the “overflow menu”).
General use of
Under the hood of the
AppBar they use normal widgets like
NavigationToolbar, etc., to build the
AppBar by performing various if else using the data provided by the user
If we see the class line of
AppBar we can find
PreferredSizeWidget is a widget with a preferred size.
PreferredSize which accepts two properties
AppBar accepts the following parameters
A widget to display before the [title].
Controls whether we should try to imply the leading widget if null.
if true and leading is null then it tries to figure which widget should show, if false and leading is null then this space is given to the title
Primary widget of the
Widgets to display after the title
This widget is stacked behind the toolbar and the tab bar. Its height will be the same as the app bar’s overall height.
Typically a [FlexibleSpaceBar]
A [SliverAppBar] in a [CustomScrollView] changes the [AppBar]’s height when scrolled.
This widget appears across the bottom of the app bar.
TabBar at this location other than
TabBar we can use any widget which implements
Technically z-coordinates at which the
AppBar to be placed
This controls the size of the shadow below the app bar. if elevation is not provided then it uses the value from ThemeData.appBarTheme.elevation
elevation cannot be negative
The color to use for the app bar’s material. Typically this should be setalong with [brightness], [iconTheme], [textTheme]. If this property is null, then [ThemeData.appBarTheme.color] is used, if that is also null, then [ThemeData.primaryColor] is used.
This can be of two values, this is used mainly for switching light and dark theme.
You can see its effect if you set it with
The color, opacity, and size to use for app bar icons.
The color, opacity, and size to use for the icons that appear in the app bar’s [actions].
The typographic styles to use for text in the app bar.
Whether this app bar is being displayed at the top of the screen.
if true the app is padded at the top with a height of status bar or else app bar starts from the top of the screen
Whether the title should be centered.
The spacing around [title] content on the horizontal axis. This spacing is applied even if there is no [leading] content or [actions]. If you want [title] to take all the space available, set this value to 0.0.
How opaque the bottom part of the app bar is. A value of 1.0 is fully opaque, and a value of 0.0 is fully transparent.
How opaque the bottom part of the app bar is.
A value of 1.0 is fully opaque, and a value of 0.0 is fully transparent.
app_bar.dart file we also see
SliverAppBar a material design app bar that integrates with a [CustomScrollView].
Basic use of
SliverAppBar we have some additional properties which are not included in
AppBar they are
Whether to show the shadow appropriate for the [elevation] even if the content is not scrolled under the [AppBar].
The size of the app bar when it is fully expanded.
Whether the app bar should become visible as soon as the user scrolls towards the app bar.
Otherwise, the user will need to scroll near the top of the scroll view to reveal the app bar.
Whether the app bar should remain visible at the start of the scroll view.
The app bar can still expand and contract as the user scrolls, but it will remain visible rather than being scrolled out of view.
If [snap] and [floating] are true then the floating app bar will “snap” into view.
If [snap] is true then a scroll that exposes the floating app bar will trigger an animation that slides the entire app bar into view. Similarly, if a scroll dismisses the app bar, the animation will slide the app bar completely out of view.
Note: Most of the content is from the flutter source
Stay tuned more coming…
Thanks for your time.
Hope you like it, if yes clap & share.