flutter_scrolling_fab_animated 0.1.4 icon indicating copy to clipboard operation
flutter_scrolling_fab_animated: ^0.1.4 copied to clipboard

Package to add a floating button whose change of size when scroll down

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.

With animated icon

New Features 💥 #

  • Changing the animation method for a better behavior
  • Fixing bugs
  • Adding inverted prop to invert the animation behavior
  • Adding radius prop to set the button radius

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,
        animateIcon: true,
        inverted: false,
        radius: 10.0,
      )
    );
  }

...

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,
        animateIcon: true,
        inverted: false,
        radius: 10.0,
      )
    );
  }

...

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
animateIconValue to indicate if animate or not the iconFalsetrue
invertedValue to inverte the behavior of the animationFalsefalse
radiusDouble value to set the button radiusFalsenull
35
likes
140
pub points
81%
popularity

Publisher

verified publisher iconajomuch92.site

Package to add a floating button whose change of size when scroll down

Repository (GitHub)

Documentation

API reference

License

Icon for licenses.MIT (LICENSE)

Dependencies

flutter

More

Packages that depend on flutter_scrolling_fab_animated