flutter_inner_drawer 0.5.4
flutter_inner_drawer #
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 #
PropName | Description | default value |
---|---|---|
scaffold | A Scaffold is generally used but you are free to use other widgets | required |
leftChild | Inner Widget | required if rightChild is not set |
rightChild | Inner Widget | required if leftChild is not set |
leftOffset(deprecated) | Offset drawer width | 0.4 |
rightOffset(deprecated) | Offset drawer width | 0.4 |
leftScale(deprecated) | Left scaffold scaling | 1 |
rightScale(deprecated) | Right scaffold scaling | 1 |
offset | Offset InnerDrawer width | IDOffset.horizontal(0.4) |
scale | Scaffold scaling | IDOffset.horizontal(1) |
proportionalChildArea | If true, dynamically sets the width based on the selected offset, otherwise it leaves the width at 100% of the screen. | true |
borderRadius | For scaffold border | 0 |
onTapClose | Tap on the Scaffold closes it | false |
swipe | activate or deactivate the swipe | true |
duration | Animation Controller duration | Duration(milliseconds: 246) |
tapScaffoldEnabled | Possibility to tap the scaffold even when open | false |
boxShadow | BoxShadow of scaffold opened | [BoxShadow(color: Colors.black.withOpacity(0.5),blurRadius: 5)] |
colorTransition | Change background color while swiping | Colors.black54 |
leftAnimationType | static / linear / quadratic | static |
rightAnimationType | static / linear / quadratic | static |
backgroundColor | color of the main background | Theme.of(context).backgroundColor |
innerDrawerCallback | Optional callback that is called when a InnerDrawer is opened or closed | |
onDragUpdate | When a pointer that is in contact with the screen and moves to the right or left | |
_innerDrawerKey.currentState.open | Current State of GlobalKey | |
_innerDrawerKey.currentState.close | Current State of GlobalKey | |
_innerDrawerKey.currentState.toggle | Current State of GlobalKey |
Donate #
If you found this project helpful or you learned something from the source code and want to thank me:
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
andrightOffset
Deprecated. - Added
scale
field.leftScale
andrightScale
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
andRightScale
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 defineleftChild
andrightChild
simultaneously. - Parameter
offset
replaced withleftOffset
andrightOffset
. - Parameter
animationType
replaced withleftAnimationType
andrightAnimationType
. - 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 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 #
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
|
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 |