flutter_inner_drawer 0.5.4

  • Readme
  • Changelog
  • Example
  • Installing
  • 96

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.5.4"

Demo #

Simple usage #

import 'package:flutter_inner_drawer/inner_drawer.dart';
.
.
.
   
    @override
    Widget build(BuildContext context)
    {
        return InnerDrawer(
            key: _innerDrawerKey,
            onTapClose: true, // default false
            swipe: true, // default true            
            colorTransition: Color.red, // default Color.black54
            
            // DEPRECATED: use offset
            leftOffset: 0.6, // Will be removed in 0.6.0 version
            rightOffset: 0.6,// Will be removed in 0.6.0 version
            
            //When setting the vertical offset, be sure to use only top or bottom
            offset: IDOffset.only( top: 0.5 OR bottom: 0.5, right: 0.5, left: 0.5 ),
            
            // DEPRECATED:  use scale
            leftScale: 0.9,// Will be removed in 0.6.0 version
            rightScale: 0.9,// Will be removed in 0.6.0 version
            
            scale: IDOffset.horizontal( 0.8 ), // set the offset in both directions
            
            proportionalChildArea : true, // default true
            borderRadius: 50, // default 0
            leftAnimationType: InnerDrawerAnimation.static, // default static
            rightAnimationType: InnerDrawerAnimation.quadratic,
            backgroundColor: Colors.red, // default  Theme.of(context).backgroundColor
            
            //when a pointer that is in contact with the screen and moves to the right or left            
            onDragUpdate: (double val, InnerDrawerDirection direction) {
                // return values between 1 and 0
                print(val);
                // check if the swipe is to the right or to the left
                print(direction==InnerDrawerDirection.start);
            },
            
            innerDrawerCallback: (a) => print(a), // return  true (open) or false (close)
            leftChild: Container(), // required if rightChild is not set
            rightChild: Container(), // required if leftChild is not set
            
            //  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
                ),
            ), 
        )
    }
    
    //  Current State of InnerDrawerState
    final GlobalKey<InnerDrawerState> _innerDrawerKey = GlobalKey<InnerDrawerState>();    

    void _toggle()
    {
       _innerDrawerKey.currentState.toggle(
       // direction is optional 
       // if not set, the last direction will be used
       //InnerDrawerDirection.start OR InnerDrawerDirection.end                        
        direction: InnerDrawerDirection.end 
       );
    }
    
    

InnerDrawer Parameters #

PropNameDescriptiondefault value
scaffoldA Scaffold is generally used but you are free to use other widgetsrequired
leftChildInner Widgetrequired if rightChild is not set
rightChildInner Widgetrequired if leftChild is not set
leftOffset(deprecated)Offset drawer width0.4
rightOffset(deprecated)Offset drawer width0.4
leftScale(deprecated)Left scaffold scaling1
rightScale(deprecated)Right scaffold scaling1
offsetOffset InnerDrawer widthIDOffset.horizontal(0.4)
scaleScaffold scalingIDOffset.horizontal(1)
proportionalChildAreaIf true, dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen.true
borderRadiusFor scaffold border0
onTapCloseTap on the Scaffold closes itfalse
swipeactivate or deactivate the swipetrue
durationAnimation Controller durationDuration(milliseconds: 246)
tapScaffoldEnabledPossibility to tap the scaffold even when openfalse
boxShadowBoxShadow of scaffold opened[BoxShadow(color: Colors.black.withOpacity(0.5),blurRadius: 5)]
colorTransitionChange background color while swipingColors.black54
leftAnimationTypestatic / linear / quadraticstatic
rightAnimationTypestatic / linear / quadraticstatic
backgroundColorcolor of the main backgroundTheme.of(context).backgroundColor
innerDrawerCallbackOptional callback that is called when a InnerDrawer is opened or closed
onDragUpdateWhen a pointer that is in contact with the screen and moves to the right or left
_innerDrawerKey.currentState.openCurrent State of GlobalKey
_innerDrawerKey.currentState.closeCurrent State of GlobalKey
_innerDrawerKey.currentState.toggleCurrent State of GlobalKey

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.5.4] - 2019-12-07.

  • Update Readme.

[0.5.3] - 2019-12-07.

  • new Features and Documentation Updates
  • Added IDOffset class. An immutable set of offset in each of the four cardinal directions.
  • Added offset field. leftOffset and rightOffset Deprecated.
  • Added scale field. leftScale and rightScale Deprecated.
  • Added duration field. Duration of AnimationController.
  • Cleaning code.
  • Update Readme.

[0.5.2] - 2019-11-15.

  • General improvement of the code
  • Added backgroundColor field.
  • Fixed some problems related to swipe and scaleFactor.
  • Cleaning code.
  • Update Readme.

[0.5.1] - 2019-11-09.

  • General improvement of the code
  • Added proportionalChildArea. if == true dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen.
  • Possibility to set boxShadow also for linear animation.
  • When borderSide > 0, boxShadow did not work, fixed.
  • Cleaning code.
  • Update Readme.

[0.5.0] - 2019-10-16.

  • new Features and Documentation Updates
  • Added borderRadius field for scaffold border - (double value).
  • Added leftScale and RightScale fields for scaffold scaling - (double value).
  • Added onDragUpdate(double value, InnerDraweDirection direction) callback function.

[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.

  • fixed 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.

  • Fixed swipe precision.

[0.2.3] - 2019-04-06.

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

[0.2.2] - 2019-02-26.

  • fixed 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:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

import 'example_1.dart';
import 'example_2.dart';

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

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

enum Example {
  one,
  two,
}

class MainApp extends StatefulWidget {
  MainApp({Key key}) : super(key: key);

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

class _MainAppState extends State<MainApp> with SingleTickerProviderStateMixin {
  bool isOpened = false;
  AnimationController _animationController;
  Animation<Color> _buttonColor;
  Animation<double> _animateIcon;
  Animation<double> _translateButton;
  Curve _curve = Curves.easeOut;
  double _fabHeight = 56.0;

  Example _currentExample = Example.one;

  @override
  initState() {
    super.initState();

    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      //systemNavigationBarColor: Colors.blue,
      statusBarColor: Colors.transparent,
      //statusBarBrightness: Brightness.dark,
    ));

    _animationController =
        AnimationController(vsync: this, duration: Duration(milliseconds: 500))
          ..addListener(() {
            setState(() {});
          });
    _animateIcon =
        Tween<double>(begin: 0.0, end: 1.0).animate(_animationController);
    _buttonColor = ColorTween(
      begin: Colors.black45,
      end: Colors.red,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.00,
        1.00,
        curve: Curves.linear,
      ),
    ));
    _translateButton = Tween<double>(
      begin: _fabHeight,
      end: -14.0,
    ).animate(CurvedAnimation(
      parent: _animationController,
      curve: Interval(
        0.0,
        0.75,
        curve: _curve,
      ),
    ));
  }

  @override
  void dispose() {
    _animationController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        _switchWidget(_currentExample),
        Container(
          padding: EdgeInsets.all(20),
          alignment: Alignment.bottomRight,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.end,
            children: <Widget>[
              Transform(
                transform: Matrix4.translationValues(
                  0.0,
                  _translateButton.value * 2,
                  0.0,
                ),
                child: _item(title: "One", example: Example.one),
              ),
              Transform(
                transform: Matrix4.translationValues(
                  0.0,
                  _translateButton.value * 1,
                  0.0,
                ),
                child: _item(title: "Two", example: Example.two),
              ),
              _toggle(),
            ],
          ),
        )
      ],
    );
  }

  Widget _switchWidget(Example example) {
    switch (example) {
      case Example.one:
        return ExampleOne();
        break;
      case Example.two:
        return ExampleTwo();
        break;
    }
  }

  Widget _item({String title, Example example}) {
    //print(((_translateButton.value-66)/60).abs());
    double val = ((_translateButton.value - 56) / 60).abs();
    return Opacity(
      opacity: val > 0 ? 1 : 0,
      child: FloatingActionButton(
        backgroundColor: Colors.white,
        elevation: val,
        onPressed: () {
          setState(() => _currentExample = example);
          _animate();
        },
        tooltip: 'Apri',
        child: Text(
          title,
          style: TextStyle(
              fontSize: 11,
              color: example == Example.one
                  ? Colors.green[300]
                  : Colors.orange[300]),
        ),
      ),
    );
  }

  Widget _toggle() {
    return new Container(
      child: FloatingActionButton(
        elevation: 1.5,
        backgroundColor: Colors.white,
        onPressed: _animate,
        tooltip: 'Toggle',
        child: AnimatedIcon(
          icon: AnimatedIcons.menu_close,
          color: _buttonColor.value,
          progress: _animateIcon,
        ),
      ),
    );
  }

  void _animate() {
    if (Navigator.of(context).canPop()) Navigator.of(context).pop();
    if (!isOpened)
      _animationController.forward();
    else
      _animationController.reverse();
    isOpened = !isOpened;
  }
}

DEMO #

Demo 1 Demo 2

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.5.4

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]
92
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]
96
Learn more about scoring.

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

  • Dart: 2.7.0
  • pana: 0.13.1+4
  • Flutter: 1.12.13+hotfix.4

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.8
sky_engine 0.0.99
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
flutter_test