Flutter Logo (Google): https://flutter.io/
In this Flutter Tutorial, we look at the other main building block of the Flutter framework, Slivers. While Box Render widgets are static widgets based on constraints, the Sliver widgets are slivers of the viewport that can change dynamically in response to various different render events and variables.
Flutter widgets are generally grouped into two major types; Box Render widgets and Sliver Widgets. On one hand we have static widgets that build based off of a set of constraints which are passed down from their parents. On the other hand, we have widgets that can dynamically change based on various different build and render events. In this Flutter Video Tutorial, we take a look at the latter of these two, Sliver Widgets.
A sliver widget is literally a sliver or slice of the viewport. Each sliver is laid out in such a way that they cover part of the viewport. Because they are based on the viewport rather then a set of static constraints; slivers can change their size, shape, and extent based on various events and offset changes.
In this Animated GIF, you can see how the Sliver App Bar widget changes in response to scrolling events. As it slides up, the title at the top and the bottom slide towards one another and the background image eventually disappears. Once you scroll out of view, the bar disappears all together.
Each Sliver has a Sliver Constraints object which is used to create the Sliver Geometry Object. This Geometry object is what defines how the Sliver fits in the viewport. Slivers are defined by multiple dimensions which are used to describe the extent of the Sliver in relation to the Main Axis. Slivers are able to change their constraints based on non-linear events which allows them to have panning or scrolling effects.
Here you can see the Sliver Grid that was used in our example application. The cross axis which is the horizontal axis is modified so that we can have three equal columns in this grid. The column sizes are determined based on the number of widgets in the grid, the spacing of these widgets along both the main and cross axis and the aspect ratio of these children widgets. The more columns we add to this grid, the smaller these children will become in response.
As a result of having a dynamic layout, each Sliver Widget must be defined with a delegate. The delegate is what computes the resulting layout of the Sliver widget which allows us as developers to change how the widget will react to various events. More complex Slivers like the Sliver Grid widget have multiple delegates; a Grid Delegate and a normal Sliver Child Delegate.
In this image, you can see the Sliver Grid widget. This widget uses both a grid delegate and a normal delegate. The grid delegate controls the size and position of the children in the sliver and the normal delegate creates the sliver which then uses the builder to layout its box children.
The Source Code for this project can be found here
Related Tutorials
Stand Alone Projects:
- Dart Flutter Cross Platform Chat Application Tutorial
- Building a Temperature Conversion Application using Dart's Flutter Framework
- Managing State with Flutter Flux and Building a Crypto Tracker Application with Dart's Flutter Framework
Building a Calculator
- Building a Calculator Layout using Dart's Flutter Framework
- Finishing our Calculator Application with Dart's Flutter Framework
Movie Searcher Application
- Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 1)
- Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 2)
- Building a Movie Searcher with RxDart and SQLite in Dart's Flutter Framework (Part 3, Final)
Minesweeper Game
- Building a Mine Sweeper Game using Dart's Flutter Framework (Part 1)
- Building a Mine Sweeper Game using Dart's Flutter Framework (Part 2)
- Building a Mine Sweeper Game using Dart's Flutter Framework (Part 3)
- Building a Mine Sweeper Game using Dart's Flutter Framework (Part 4, Final)
Weather Application
- Building a Weather Application with Dart's Flutter Framework (Part 1, Handling Complex JSON with Built Code Generation)
- Building a Weather Application with Dart's Flutter Framework (Part 2, Creating a Repository and Model)
- Building a Weather Application with Dart's Flutter Framework (Part 3, RxCommand (RxDart) and Adding an Inherited Widget)
- Building a Weather Application with Dart's Flutter Framework (Part 4, Using RxWidget to Build a Reactive User Interface)
- Localize and Internationalize Applications with Intl and the Flutter SDK in Dart's Flutter Framework
