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
✔ You can create list items like below.
- First import list_item_model like this:
import 'package:playable_toolbar_flutter/list_item_model.dart';
- Then create your items like this:
|
- Then create list of your items and pass it to
playable_menu_flutter
widget:
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,
),
),
);
}
}