wave_drawer

pub package

Donate

Wave Drawer is an easy way to create stunning app drawer with a bezier curve boundary. Animated bezier curves are coming soon!

Installing

Add this to your package's pubspec.yaml file:

dependencies:
  wave_drawer: "^0.1.1"

Demo

Simple usage

import 'package:flutter_wave_drawer/wave_drawer.dart';
.
.
.
   
    @override
    Widget build(BuildContext context)
    {
        return Scaffold(
      appBar: AppBar(
        backgroundColor: Color(0XFF4E5B81),
        title: Text("Wave Drawer Example"),
      ),
      drawer: WaveDrawer(
        backgroundColor: Color(0XFF4E5B81),
        boundaryColor: Colors.blue,
        boundaryWidth: 8.0,
        child: ListView(
          // Important: Remove any padding from the ListView.
          padding: EdgeInsets.zero,
          children: <Widget>[
            DrawerHeader(
              child: Text(
                'Drawer Header',
                style: Theme.of(context).primaryTextTheme.title,
              ),
              decoration: BoxDecoration(
                color: Colors.blue,
              ),
            ),
            ListTile(
              title: Text(
                'Item 1',
                style: Theme.of(context).primaryTextTheme.subtitle,
              ),
              onTap: () {
                // Update the state of the app.
                // ...
              },
            ),
            ListTile(
              title: Text('Item 2',
                style: Theme.of(context).primaryTextTheme.subtitle,
              ),
              onTap: () {
                // Update the state of the app.
                // ...
              },
            ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
          child: Center(child: Icon(Icons.add)),
          onPressed: () => _incrementCount()),
      body: Container(
          color: Color(0XFF27314F),
          child: Center(child: Text('You tapped the button $_count times'))),
    );
    }

WaveDrawer Parameters

PropNameDescriptiondefault value
widthWidth of the Drawer90%
backgroundColorDrawer Background Colorrequired
backgroundColorOpacityBackground Color's Opacity0.5
boundaryColorColor of Wave Paintrequired
boundaryWidthWidth of Wave Paintrequired
elevationThe Z-coordinate at Which to Place this Drawer16
childWidget Within the Draweroptional
semanticLabelThe Semantic Label to Announce Screen Transitions when the Drawer is Opened and ClosedMaterialLocalizations.drawerLabel

If you found this project helpful or you learned something from the source code and want to thank me:

  • Donate

Issues

If you encounter problems, open an issue. Pull request are also welcome.

Libraries

drawer_wave_clipper
wave_drawer
wave_path_painter