What’s Inside material.dart #3 — Flutter

Karthik Ponnam
Jun 6 · 5 min read

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

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

app_bar.dart (AppBar)

export 'src/material/app_bar.dart';

Let's see what's inside app_bar.dart

Inside app_bar.dart we find AppBar class

Here what comments says about AppBar

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 AppBar

Under the hood of the AppBar they use normal widgets like Column, ClipRect, Flexible, 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

AppBar implements PreferredSizeWidget

PreferredSizeWidget is a widget with a preferred size.

A PreferredSize which accepts two properties child(Widget) and preferredSize(Size)

AppBar accepts the following parameters

leading

A widget to display before the [title].

automaticallyImplyLeading

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

title

Primary widget of the AppBar

actions

Widgets to display after the title

flexibleSpace

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.

bottom (PreferredSizeWidget)

This widget appears across the bottom of the app bar.

Generally, use TabBar at this location other than TabBar we can use any widget which implements PreferredSizeWidget

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

shape

backgroundColor

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.

brightness

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 ThemeData in MaterialApp

iconTheme (IconThemeData)

The color, opacity, and size to use for app bar icons.

actionsIconTheme (IconThemeData)

The color, opacity, and size to use for the icons that appear in the app bar’s [actions].

textTheme (TextTheme)

The typographic styles to use for text in the app bar.

primary (true/false)

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

centerTitle (true/false)

Whether the title should be centered.

titleSpacing

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.

toolbarOpacity

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.

bottomOpacity

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.

SliverAppBar

In app_bar.dart file we also see SliverAppBar

SliverAppBar a material design app bar that integrates with a [CustomScrollView].

Basic use of SliverAppBar in CustomScrollView

In SliverAppBar we have some additional properties which are not included in AppBar they are forceElevated, expandedHeight, floating, pinned and snap

forceElevated (true/false)

Whether to show the shadow appropriate for the [elevation] even if the content is not scrolled under the [AppBar].

expandedHeight

The size of the app bar when it is fully expanded.

floating (true/false)

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.

Appbar with floating set to false
App bar with floating set to true

pinned (true/false)

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.

App bar with [pinned] set to false
App bar with [pinned] set to true

snap (true/false)

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.

App bar with [snap] set to false
App bar with [snap] set to true

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.

https://twitter.com/FlutterComm

Flutter Community

Articles and Stories from the Flutter Community

    Karthik Ponnam

    Written by

    ❤️ to Code. Full Stack Developer, Flutter, Android Developer, Web Development, Known Languages Java, Python so on.,

    Flutter Community

    Articles and Stories from the Flutter Community

    Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
    Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
    Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade