CollapsingToolbar constructor

const CollapsingToolbar({
  1. Key? key,
  2. required ScrollController controller,
  3. required double expandedHeight,
  4. required double collapsedHeight,
  5. required dynamic onCollapsing(
    1. double offset
    ),
  6. Curve animationCurve = Curves.easeIn,
  7. Widget? leading,
  8. Widget? title,
  9. List<Widget>? actions,
  10. required Widget featureIconBuilder(
    1. BuildContext context,
    2. int index
    ),
  11. required Widget featureLabelBuilder(
    1. BuildContext context,
    2. int index
    ),
  12. required int featureCount,
  13. ButtonStyle? featureButtonStyle,
  14. double featureCollapsedFactor = 0.6,
  15. required dynamic featureOnPressed(
    1. BuildContext context,
    2. int index
    ),
  16. double horizontalPadding = 12,
  17. double verticalPadding = 12,
  18. Color decorationBackgroundColor = _kDefaultBackgroundColor,
  19. Color decorationForegroundColor = _kDefaultForegroundColor,
  20. bool useDefaultDecoration = true,
})

Create a CollapsingToolbar.

controller is the ScrollController of your current scroll view, it's used to listen the scrolling offset and calculate the animation value. collapsedHeight & expandedHeight are required to handle the animation. onCollapsing is a callback function, it is important because it is a part that help this widget can standalone with the scroll view. During scrolling, you need to use its offset value to make a padding for your scroll|list view. For more details please see the example. animationCurve it helps the collapsing effect more excited. There is an AppBar in this. It helps easier to handle some regular features such as: a leading action, list of right actions and the title of the screen.

featureIconBuilder & featureLabelBuilder & featureOnPressed & featureButtonStyle, they help you can create your own styled feature buttons easier. featureButtonStyle is used to create the pressing effect. featureCount is count of your feature buttons. Tips: many regular designs use only 4 feature buttons. featureCollapsedFactor is the scale of the Row of feature buttons when it is collapsed.

horizontalPadding & verticalPadding are used to set padding and margin the whole widget.

useDefaultDecoration : if you want not to use the default CollapsingToolbarDecoration, set it to false, default is true.

decorationBackgroundColor & decorationForegroundColor are used to draw the default CollapsingToolbarDecoration.

Implementation

const CollapsingToolbar({
  Key? key,
  required this.controller,
  required this.expandedHeight,
  required this.collapsedHeight,
  required this.onCollapsing,
  this.animationCurve: Curves.easeIn,
  this.leading,
  this.title,
  this.actions,
  required this.featureIconBuilder,
  required this.featureLabelBuilder,
  required this.featureCount,
  this.featureButtonStyle,
  this.featureCollapsedFactor: 0.6,
  required this.featureOnPressed,
  this.horizontalPadding: 12,
  this.verticalPadding: 12,
  this.decorationBackgroundColor: _kDefaultBackgroundColor,
  this.decorationForegroundColor: _kDefaultForegroundColor,
  this.useDefaultDecoration: true,
}) : super(key: key);