flutter_inner_drawer 0.4.0

  • Readme
  • Changelog
  • Example
  • Installing
  • 95

flutter_inner_drawer #

pub package Awesome Flutter Donate

Inner Drawer is an easy way to create an internal side section (left/right) where you can insert a list menu or other.

Installing #

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

dependencies:
  flutter_inner_drawer: "^0.4.0"

Demo #

Simple usage #

import 'package:flutter_inner_drawer/inner_drawer.dart';
.
.
.

    final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();


    @override
    Widget build(BuildContext context)
    {
        return InnerDrawer(
            key: _innerDrawerKey,
            onTapClose: true, // default false
            swipe: true, // default true            
            colorTransition: Color.red, // default Color.black54
            innerDrawerCallback: (a) => print(a ),// return bool
            leftOffset: 0.6, // default 0.4
            rightOffset: 0.6, // default 0.4
            leftAnimationType: InnerDrawerAnimation.static, // default static
            rightAnimationType: InnerDrawerAnimation.quadratic, // default static
            // at least one child is required
            leftChild: Container(),
            rightChild: Container(),
            //  A Scaffold is generally used but you are free to use other widgets
            // Note: use "automaticallyImplyLeading: false" if you do not personalize "leading" of Bar
            scaffold: Scaffold(
                appBar: AppBar(
                    automaticallyImplyLeading: false
                ),
            ) 
            OR
            CupertinoPageScaffold(                
                navigationBar: CupertinoNavigationBar(
                    automaticallyImplyLeading: false
                ),
            ), 
        )
    }
    
    void _toggle()
    {
       _innerDrawerKey.currentState.toggle(
       // direction is optional 
       // if not set, the last direction will be used                             
        direction: InnerDrawerDirection.end 
       );
    }
    
    

All parameters #

  • leftChild - Inner Widget
  • rightChild - Inner Widget
  • scaffold - A Scaffold is generally used but you are free to use other widgets (required)
  • leftOffset - Offset drawer width (default 0.4)
  • rightOffset - Offset drawer width (default 0.4)
  • onTapClose - bool (default false)
  • swipe - bool (default true)
  • tapScaffoldEnabled - possibility to tap the scaffold even when open (default false)
  • boxShadow - BoxShadow of scaffold opened
  • colorTransition - default Colors.black54
  • leftAnimationType - static / linear / quadratic (default static)
  • rightAnimationType - static / linear / quadratic (default static)
  • innerDrawerCallback - Optional callback that is called when a InnerDrawer is opened or closed
  • innerDrawerKey.currentState.open - Open InnerDrawer
  • innerDrawerKey.currentState.close - Close InnerDrawer
  • innerDrawerKey.currentState.toggle - Open or Close InnerDrawer

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.4.0] - 2019-08-07.

  • new Features and Documentation Updates
  • Parameter position removed. Now it is possible to define leftChild and rightChild simultaneously.
  • Parameter offset replaced with leftOffset and rightOffset.
  • Parameter animationType replaced with leftAnimationType and rightAnimationType.
  • Possibility to tap the scaffold even when open with tapScaffoldEnabled.

[0.3.0] - 2019-07-07.

  • General improvement of the code.

[0.2.9] - 2019-06-20.

  • Updated dependencies.
  • Added toggle method.

[0.2.8] - 2019-06-14.

  • fix history.

[0.2.7] - 2019-06-14.

  • Cleaning code.
  • Update Readme.

[0.2.6] - 2019-05-13.

  • Fixed InnerDrawerCallback.

[0.2.5] - 2019-04-19.

  • General improvement of the code.

[0.2.4] - 2019-04-16.

  • Fix swipe precision.

[0.2.3] - 2019-04-06.

  • fix some problem.
  • General improvement of the code.

[0.2.2] - 2019-02-26.

  • fix some artifacts with linear animation.

[0.2.1] - 2019-02-25.

  • solved the problem of CupertinoThemeData that launched an assert.

[0.2.0] - 2019-02-16.

  • 3 types of animation (static - linear - quadratic)
  • Improved documentation.

[0.1.5] - 2019-02-13.

  • Improved documentation.

[0.1.4] - 2019-02-13.

  • Improved documentation.

[0.1.3] - 2019-02-13.

  • fixed swipe.

[0.1.2] - 2019-02-13.

  • Added side trigger - Possibility to activate/deactivate the swipe.

[0.1.1] - 2019-02-12.

  • Improved documentation.

[0.1.0] - 2019-02-12.

  • Improved documentation - General improvement of the code.

[0.0.1] - 2019-02-12.

  • Created Inner Drawer.

example/README.md

Example Inner Drawer #

An example of how you could implement it.

Getting Started - Inner Drawer #

import 'package:example/env.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_inner_drawer/inner_drawer.dart';

import 'package:flutter_colorpicker/flutter_colorpicker.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Inner Drawer',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
      ),
      home: MyHomePage(title: 'Flutter Inner Drawer'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  final GlobalKey<InnerDrawerState> _innerDrawerKey =
      GlobalKey<InnerDrawerState>();

  GlobalKey _keyRed = GlobalKey();
  double _width = 10;

  bool _position = true;
  bool _onTapToClose = false;
  bool _swipe = true;
  bool _tapScaffold = true;
  InnerDrawerAnimation _animationType = InnerDrawerAnimation.static;
  double _offset = 0.4;

  @override
  void initState() {
    _getwidthContainer();
    super.initState();
  }

  Color pickerColor = Color(0xff443a49);
  Color currentColor = Colors.black54;
  ValueChanged<Color> onColorChanged;

  changeColor(Color color) {
    setState(() => pickerColor = color);
  }

  void _getwidthContainer() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      final keyContext = _keyRed.currentContext;
      if (keyContext != null) {
        final RenderBox box = keyContext.findRenderObject();
        final size = box.size;
        setState(() {
          _width = size.width;
        });
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return InnerDrawer(
      key: _innerDrawerKey,
      onTapClose: _onTapToClose,
      tapScaffoldEnabled: _tapScaffold,
      leftOffset: _offset,
      rightOffset: _offset,
      swipe: _swipe,
      colorTransition: currentColor,
      leftAnimationType: _animationType,
      rightAnimationType: InnerDrawerAnimation.quadratic,
      leftChild: Material(
          child: SafeArea(
              //top: false,
              child: Container(
        decoration: BoxDecoration(
          border: Border(
              left: BorderSide(width: 1, color: Colors.grey[200]),
              right: BorderSide(width: 1, color: Colors.grey[200])),
        ),
        child: Stack(
          key: _keyRed,
          children: <Widget>[
            ListView(
              children: <Widget>[
                Padding(
                    padding: EdgeInsets.only(top: 12, bottom: 4, left: 15),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: <Widget>[
                        Row(
                          children: <Widget>[
                            SizedBox(
                              width: 15,
                              height: 15,
                              child: CircleAvatar(
                                child: Icon(Icons.person,
                                    color: Colors.white, size: 12),
                                backgroundColor: Colors.grey,
                              ),
                            ),
                            Text(
                              "   Guest",
                              style: TextStyle(
                                  fontWeight: FontWeight.w600, height: 1.2),
                            ),
                          ],
                        ),
                        Padding(
                          padding: EdgeInsets.only(top: 2, right: 25),
                          child: GestureDetector(
                            child: Icon(
                              _position
                                  ? Icons.arrow_back
                                  : Icons.arrow_forward,
                              size: 18,
                            ),
                            onTap: () {
                              _innerDrawerKey.currentState.toggle();
                            },
                          ),
                        ),
                      ],
                    )),
                Divider(),
                ListTile(
                  title: Text("Statistics"),
                  leading: Icon(Icons.show_chart),
                ),
                ListTile(
                  title: Text("Activity"),
                  leading: Icon(Icons.access_time),
                ),
                ListTile(
                  title: Text("Nametag"),
                  leading: Icon(Icons.rounded_corner),
                ),
                ListTile(
                  title: Text("Favorite"),
                  leading: Icon(Icons.bookmark_border),
                ),
                ListTile(
                  title: Text("Close Friends"),
                  leading: Icon(Icons.list),
                ),
                ListTile(
                  title: Text("Suggested People"),
                  leading: Icon(Icons.person_add),
                ),
                ListTile(
                  title: Text("Open Facebook"),
                  leading: Icon(
                    Env.facebook_icon,
                    size: 18,
                  ),
                ),
              ],
            ),
            Positioned(
                bottom: 0,
                child: Container(
                  alignment: Alignment.bottomCenter,
                  padding: EdgeInsets.symmetric(vertical: 15, horizontal: 25),
                  width: _width,
                  decoration: BoxDecoration(
                      //color: Colors.grey,
                      border: Border(
                          top: BorderSide(
                    color: Colors.grey[200],
                  ))),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.start,
                    children: <Widget>[
                      Icon(
                        Icons.settings,
                        size: 18,
                      ),
                      Text(
                        "  Settings",
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),
                ))
          ],
        ),
      ))),
      rightChild: Material(
        child: Center(
          child: Container(
            child: Text("Right Child",style: TextStyle(fontSize: 18),),
          ),
        )
      ),
      scaffold: CupertinoPageScaffold(
          navigationBar: CupertinoNavigationBar(
            middle: Text(widget.title),
            automaticallyImplyLeading: false,
            backgroundColor: Colors.green[300],
          ),
          child: SafeArea(
              child: Material(
            child: Container(
              padding: EdgeInsets.symmetric(horizontal: 15),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.center,
                mainAxisAlignment: MainAxisAlignment.start,
                children: <Widget>[
                  Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  Text(
                    "Animation Type",
                    style: TextStyle(fontWeight: FontWeight.w500),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      GestureDetector(
                        child: Row(
                          children: <Widget>[
                            Text('Static'),
                            Checkbox(
                                activeColor: Colors.black,
                                value: _animationType ==
                                    InnerDrawerAnimation.static,
                                onChanged: (a) {
                                  setState(() {
                                    _animationType =
                                        InnerDrawerAnimation.static;
                                  });
                                }),
                          ],
                        ),
                        onTap: () {
                          setState(() {
                            _animationType = InnerDrawerAnimation.static;
                          });
                        },
                      ),
                      GestureDetector(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Checkbox(
                                activeColor: Colors.black,
                                value: _animationType ==
                                    InnerDrawerAnimation.linear,
                                onChanged: (a) {
                                  setState(() {
                                    _animationType =
                                        InnerDrawerAnimation.linear;
                                  });
                                }),
                            Text('Linear'),
                          ],
                        ),
                        onTap: () {
                          setState(() {
                            _animationType = InnerDrawerAnimation.linear;
                          });
                        },
                      ),
                      GestureDetector(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Checkbox(
                                activeColor: Colors.black,
                                value: _animationType ==
                                    InnerDrawerAnimation.quadratic,
                                onChanged: (a) {
                                  setState(() {
                                    _animationType =
                                        InnerDrawerAnimation.quadratic;
                                  });
                                }),
                            Text('Quadratic'),
                          ],
                        ),
                        onTap: () {
                          setState(() {
                            _animationType = InnerDrawerAnimation.quadratic;
                          });
                        },
                      ),
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      GestureDetector(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Checkbox(
                                activeColor: Colors.black,
                                value: _swipe,
                                onChanged: (a) {
                                  setState(() {
                                    _swipe = !_swipe;
                                  });
                                }),
                            Text('Swipe'),
                          ],
                        ),
                        onTap: () {
                          setState(() {
                            _swipe = !_swipe;
                          });
                        },
                      ),
                      GestureDetector(
                        child: Row(
                          mainAxisAlignment: MainAxisAlignment.center,
                          children: <Widget>[
                            Checkbox(
                                activeColor: Colors.black,
                                value: _tapScaffold,
                                onChanged: (a) {
                                  setState(() {
                                    _tapScaffold = !_tapScaffold;
                                  });
                                }),
                            Text('TapScaffoldEnabled'),
                          ],
                        ),
                        onTap: () {
                          setState(() {
                            _tapScaffold = !_tapScaffold;
                          });
                        },
                      ),
                    ],
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  GestureDetector(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      children: <Widget>[
                        Checkbox(
                            activeColor: Colors.black,
                            value: _onTapToClose,
                            onChanged: (a) {
                              setState(() {
                                _onTapToClose = !_onTapToClose;
                              });
                            }),
                        Text('OnTap To Close'),
                      ],
                    ),
                    onTap: () {
                      setState(() {
                        _onTapToClose = !_onTapToClose;
                      });
                    },
                  ),
                  Padding(
                    padding: EdgeInsets.all(10),
                  ),
                  Column(
                    children: <Widget>[
                      Text('Offset'),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: <Widget>[
                          SliderTheme(
                            data: Theme.of(context).sliderTheme.copyWith(
                                  valueIndicatorTextStyle: Theme.of(context)
                                      .accentTextTheme
                                      .body2
                                      .copyWith(color: Colors.white),
                                ),
                            child: Slider(
                              activeColor: Colors.black,
                              //inactiveColor: Colors.white,
                              value: _offset,
                              min: 0.0,
                              max: 1,
                              divisions: 5,
                              semanticFormatterCallback: (double value) =>
                                  value.round().toString(),
                              label: '$_offset',
                              onChanged: (a) {
                                setState(() {
                                  _offset = a;
                                });
                              },
                              onChangeEnd: (a) {
                                //_getwidthContainer();
                              },
                            ),
                          ),
                          Text(_offset.toString()),
                          //Text(_fontSize.toString()),
                        ],
                      ),
                    ],
                  ),
                  Padding(padding: EdgeInsets.all(10)),
                  FlatButton(
                    child: Text(
                      "Set Color Transition",
                      style: TextStyle(
                          color: currentColor, fontWeight: FontWeight.w500),
                    ),
                    onPressed: () {
                      showDialog(
                          context: context,
                          child: AlertDialog(
                            title: const Text('Pick a color!'),
                            content: SingleChildScrollView(
                              child: ColorPicker(
                                pickerColor: pickerColor,
                                onColorChanged: changeColor,
                                enableLabel: true,
                                pickerAreaHeightPercent: 0.8,
                              ),
                            ),
                            actions: <Widget>[
                              FlatButton(
                                child: Text('Set'),
                                onPressed: () {
                                  setState(() => currentColor = pickerColor);
                                  Navigator.of(context).pop();
                                },
                              ),
                            ],
                          ));
                    },
                  ),
                  Padding(padding: EdgeInsets.all(25)),
                  RaisedButton(
                    child: Text("open"),
                    onPressed: () {
                      // direction is optional
                      // if not set, the last direction will be used
                      _innerDrawerKey.currentState.toggle();
                    },
                  ),
                ],
              ),
            ),
          ))),
      innerDrawerCallback: (a) => print(a),
    );
  }
}

DEMO #

Demo 1

Other #

This project is a starting point for a Flutter application.

A few resources to get you started if this is your first Flutter project:

For help getting started with Flutter, view our online documentation, which offers tutorials, samples, guidance on mobile development, and a full API reference.

Use this package as a library

1. Depend on it

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


dependencies:
  flutter_inner_drawer: ^0.4.0

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:flutter_inner_drawer/inner_drawer.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
89
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
95
Learn more about scoring.

We analyzed this package on Oct 11, 2019, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.5.1
  • pana: 0.12.21
  • Flutter: 1.9.1+hotfix.4

Platforms

Detected platforms: Flutter

References Flutter, and has no conflicting libraries.

Health suggestions

Format lib/inner_drawer.dart.

Run flutter format to format lib/inner_drawer.dart.

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.0.0 <3.0.0
flutter 0.0.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.7
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test