Description:

slidable bottom app bar

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,
...
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: abbas.az408@gmail.com

License

For personal and professional use. You cannot resell or redistribute these repositories in their original state.

Share

• Share on Facebook
• Share on Twitter