Tale Drawer Package

Collection with many drawer types, including a differents configurations to have more flexibility to implementing drawer in your Flutter applications

style: lint

Flip Guillotine Zoom


Add the following to your pubspec.yaml file:

  tale_drawer: ^latest_version

Basic Implementation

There are two ways which the TaleDrawer can easily be added to your project.

  • Using the TaleDrawer as the root widget for the body (recommended).
  • Nesting the TaleDrawer

Change the type between: TaleType.Flip, TaleType.Guillotine, TaleType.Zoom

final type = TaleType.Zoom;

  type: type,
  body: Scaffold(
    appBar: AppBar(
      backgroundColor: const Color(0xff2E2C3C),
      leading: IconButton(
        icon: Icon(Icons.menu),
        onPressed: () {},
      title: Text('Tale Example'),
    body: Stack(
      children: [
        Center(child: Text('Hello TKMonkey')),
  drawer: ContentWidget(
    child: ListView.builder(...),

Custom Usage

There are several options that allow for more control:

typeThe type of drawer to build Flip, Guillotine, or Zoom
drawerThe widget that represented the content in the drawer
bodyThe Widget displayed overtop the drawer, like Scaffold body
drawerBackgroundBackground of drawer content widget
sideStateChooose between Left and Right side to change animation direction
drawerStateChoose the drawer start open or close
settingsSet specific settings for the type of drawer, help to set a custom behavior for TaleDrawer
listenerSet listener to get updates, of changes in state
controllerCreate a custom controller to control the animation behavior and state of the drawer

Using the TaleController

At times, it can be useful to manually change the state of the TaleDrawer. This can be easily achieved by using a TaleController. Note that since the TaleController modifies the state of a TaleDrawer.

drawerPositionEvaluates to the current drawer position (a value between 0.0 and 1.0)
isDrawerOpenReturns whether or not the drawer is open.
isDrawerClosedReturns whether or not the drawer is collapsed.

open()Opens the the drawer fully
close()Closes the drawer fully
start()Execute open or close functions depends on the situation
final controller = TaleController();

Widget build(BuildContext context) {
  return TaleDrawer(
    type: type,
    controller: controller,
    body: ...,
    drawer: ...,