Flutter Scrolling Fab Animated

This package is a floating button whose change of size when scroll down and return to its original size when on top again. It's useful with ListView widget and other scrollable widgets.

Instalation

Include flutter_scrolling_fab_animated in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  flutter_scrolling_fab_animated: version

Usage

To use this package, just import it into your file and enjoy it.

import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:flutter_scrolling_fab_animated/flutter_scrolling_fab_animated.dart';

...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Scrolling Fab Animated Demo'),
      ),
      body: Container(
        child: new ListView.builder(
          controller: _scrollController,
          itemCount: items.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return new Card(
              child: ListTile(
                title: Text(items[index]),
              )
            );
          }
        ),
      ),
      floatingActionButton: ScrollingFabAnimated(
        icon: Icon(Icons.add, color: Colors.white,),
        text: Text('Add', style: TextStyle(color: Colors.white, fontSize: 16.0),),
        onPress: (){},
        scrollController: _scrollController,
      )
    );
  }

...

Example with a GridView

import 'package:bottom_sheet_expandable_bar/bottom_sheet_bar_icon.dart';
import 'package:flutter_scrolling_fab_animated/flutter_scrolling_fab_animated.dart';

...

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Flutter Scrolling Fab Animated Demo'),
      ),
      body: Container(
        child: new GridView.builder(
          gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(crossAxisCount: 2),
          controller: _scrollController,
          itemCount: items.length,
          itemBuilder: (BuildContext ctxt, int index) {
            return new Card(
              child: ListTile(
                title: Center(child: Text(items[index])),
              )
            );
          }),
      ),
      floatingActionButton: ScrollingFabAnimated(
        icon: Icon(Icons.add, color: Colors.white,),
        text: Text('Add', style: TextStyle(color: Colors.white, fontSize: 16.0),),
        onPress: (){},
        scrollController: _scrollController,
      )
    );
  }

...

Properties

NameDescriptionRequiredDefault
iconWidget to use as button iconTrue
textWidget to use as button text when button is expandedTrue
onPressFunction to use when press the buttonTrue
scrollControllerScrollController to use to determine when user is on top or notTrue
elevationDouble value to set the button elevationFalse5.0
widthDouble value to set the button width when is expandedFalse120.0
heightDouble value to set the button heightFalse60.0
durationValue to set the duration for animationFalse250 milliseconds
curveValue to set the curve for animationFalseCurves.easeInOut
limitIndicatorDouble value to set the boundary value when scroll animation is triggeredFalse10.0
colorColor to set the button background colorFalseColors.blueAccent

Libraries

flutter_scrolling_fab_animated