slidable_bottom_app_bar 1.0.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.

Things to note

the slidable_bottom_app_bar is a widget for mobile platform, if you use it in desktop or web it will be ugly.

Preview

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

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

Getting started

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

dependencies:
  slidable_bottom_app_bar: ^1.0.1

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

import 'package:slidable_bottom_app_bar/slidable_bottom_app_bar.dart';

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,
            ),
          ],
        ),
      ),
    );

the example above gives you the folowing result:

shapes

the parameter shape takes three values:

shape: SlidableBottomAppBarShape.rounded,

this value will give you the folowing result:

shape: SlidableBottomAppBarShape.wave,

this value will give you the folowing result:

shape: SlidableBottomAppBarShape.roundedCurved,

this value will give you the folowing result:

Author

Abbas al turkmani - githup - mail me: [e-mail]