playable_toolbar_flutter
Playable toolbar package is a beautiful animated menu(toolbar) which you can customize as much as you want.
Installation
- Add the latest version of package to your pubspec.yaml (and run
dart pub get):
dependencies:
playable_toolbar_flutter: ^latest_version
- Import the package and use it in your Flutter App.
import 'package:playable_toolbar_flutter/playable_toolbar_flutter.dart';
Screenshots
|
|
|
Example
There are a number of properties that you can modify. Customize them as you want:
- List of items
π See example below. - Height & Width ππ»
toolbarHeight & toolbarWidth - Items Gutter ππ»
itemsGutter - Items Offset ππ»
itemsOffset - Background color ππ»
toolbarBackgroundColor - Shadow under the toolbar ππ»
toolbarShadow - Toolbar Radius ππ»
toolbarBackgroundRadius - Horizontal padding ππ»
toolbarHorizontalPadding - Animation duration (will be added in future updates)
- Animation curve (will be added in future updates)
List Items
- First import list_item_model like this:
import 'package:playable_toolbar_flutter/list_item_model.dart';
- Then create your items like this:
ListItemModel(
onTap: () => print("Edit is tapped."),
title: 'Edit',
color: Colors.pinkAccent,
icon: Icons.edit,
),
|
|
- Then create list of your items and pass it to
playable_menu_flutterwidget:
List<ListItemModel> someToolbarItems = [
ListItemModel(
onTap: () => print("Edit is tapped."),
title: 'Edit',
color: Colors.pinkAccent,
icon: Icons.edit,
),
ListItemModel(
onTap: () => print("Delete is tapped."),
title: 'Delete',
color: Colors.lightBlueAccent,
icon: Icons.delete,
),
ListItemModel(
onTap: () => print("Comment is tapped."),
title: 'Comment',
color: Colors.cyan,
icon: Icons.comment,
),
];
main.dart
class MyApp extends StatelessWidget {
const MyApp({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
title: 'playable_toolbar_flutter test App',
home: Scaffold(
body: PlayableToolbarWidget(
toolbarItems: someToolbarItems,
),
),
);
}
}
Support
You can support me by following me on 
And also don't forget to star this package on GitHub
2 May 30, 2022
3 May 26, 2022
428 Dec 30, 2022
2 Feb 9, 2022
352 Dec 25, 2022
30 Dec 21, 2022
3 Dec 12, 2022
29 Mar 29, 2022
97 Dec 14, 2021
3 Jun 25, 2022