Skip to content

SalehTZ/playable_toolbar_flutter

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

32 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Pub

playable_toolbar_flutter

Playable toolbar package is a beautiful animated menu(toolbar) which you can customize as much as you want.

Installation

  1. Add the latest version of package to your pubspec.yaml (and rundart pub get):
dependencies:
  playable_toolbar_flutter: ^latest_version
  1. Import the package and use it in your Flutter App.
import 'package:playable_toolbar_flutter/playable_toolbar_flutter.dart';

Screenshots

Preview1

Preview2

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.

  1. First import list_item_model like this:
import 'package:playable_toolbar_flutter/list_item_model.dart';
  1. Then create your items like this:
ListItemModel(
  onTap: () => print("Edit is tapped."),
  title: 'Edit',
  color: Colors.pinkAccent,
  icon: Icons.edit,
),

editICon

  1. 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,
        ),
      ),
    );
  }
}

Support

You can support me by following me on and GitHub

And also don't forget to star this package on GitHub

About

A playable and customizable and easy-to-use toolbar made with flutter.

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages