wave_drawer 0.1.1

  • Readme
  • Changelog
  • Example
  • Installing
  • 74

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.

[0.1.1] - 2020-04-12. #

  • Formated Files.

[0.1.0] - 2020-04-12. #

  • Created Wave Drawer.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:wave_drawer/wave_drawer.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Wave Drawer Demo',
      debugShowCheckedModeBanner:  false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: WaveDrawerExample(),
    );
  }
}

class WaveDrawerExample extends StatefulWidget {
  @override
  _WaveDrawerExampleState createState() => _WaveDrawerExampleState();
}

class _WaveDrawerExampleState extends State<WaveDrawerExample> {
  int _count = 0;

  void _incrementCount() {
    setState(() {
      _count++;
    });
  }

  @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'))),
    );
  }
}

Use this package as a library

1. Depend on it

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


dependencies:
  wave_drawer: ^0.1.1

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:wave_drawer/wave_drawer.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
57
Health:
Code health derived from static analysis. [more]
86
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
74
Learn more about scoring.

We analyzed this package on Jul 9, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.8.4
  • pana: 0.13.14
  • Flutter: 1.17.5

Analysis suggestions

Package not compatible with SDK dart

Because:

  • wave_drawer that is a package requiring null.

Health issues and suggestions

Fix lib/wave_drawer.dart. (-14.26 points)

Analysis of lib/wave_drawer.dart reported 3 warnings:

line 75 col 5: Missing case clause for 'linux'.

line 75 col 5: Missing case clause for 'macOS'.

line 75 col 5: Missing case clause for 'windows'.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.1.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.12 1.14.13
meta 1.1.8 1.2.1
sky_engine 0.0.99
typed_data 1.1.6 1.2.0
vector_math 2.0.8 2.1.0-nullsafety
Dev dependencies
flutter_test