slidable_bottom_app_bar 1.1.1

A slidable bottom app bar can slide to the medal of the screen.

A flutter package create a bottom app bar that can slide to the position of the screen that spicefied in maxHeight property when clicking on the button or by sliding by hande.

Preview

    ...
        SlidableBottomAppBar(
            hasCenterButton: true,
    ...

copied to clipboard

    ...
        SlidableBottomAppBar(
            hasCenterButton: false,
    ...

copied to clipboard

Getting started

In the pubspec.yaml of your flutter project, add the following dependency:

dependencies:
  slidable_bottom_app_bar: ^1.0.1

copied to clipboard

Then run $ flutter pub get. In your library, add the following import:

import 'package:slidable_bottom_app_bar/slidable_bottom_app_bar.dart';

copied to clipboard

Usage

the way to use it is by put it in the value of body parameter in Scaffold widget and put the page contents in the pageBody property, as shown in the example below:

return Scaffold(
      body: SlidableBottomAppBar(
        //appearance parameters
        shape: SlidableBottomAppBarShape.rounded,
        color: Colors.blue,
        buttonColor: Colors.blue,
        maxHeight: screenSize.height * 0.5,
        allowShadow: true,
        //main screen body
        pageBody: const SafeArea(
          child: Center(
            child: Text('page contents'),
          ),
        ),
        //the body of the SlidableBottomAppBar
        body: Column(
          children: const [
            Center(
              child: Text('content'),
            ),
          ],
        ),
        //the center button child
        buttonChild: const Icon(
          Icons.refresh,
          color: Colors.white,
        ),
        //the center button onPressed event
        onButtonPressed: () {
          //do some thing
        },
        //the content of the bottom app bar
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: [
            const Icon(
              Icons.home,
              color: Colors.white,
            ),
            SizedBox(
              width: screenSize.width * 0.1,
            ),
            const Icon(
              Icons.local_activity,
              color: Colors.white,
            ),
          ],
        ),
      ),
    );

copied to clipboard

the example above gives you the folowing result:

shapes

the parameter shape takes three values:

shape: SlidableBottomAppBarShape.rounded,

copied to clipboard

this value will give you the folowing result:

shape: SlidableBottomAppBarShape.wave,

copied to clipboard

this value will give you the folowing result:

shape: SlidableBottomAppBarShape.roundedCurved,

copied to clipboard

this value will give you the folowing result:

Author

Abbas al turkmani - githup mail me