How to offset a scaffold widget in Flutter?
Let me know if I'm wrong about this, but it sounds like you want the navigation drawer to open when the user clicks the menu button. Thankfully, flutter already handles this!
You can simply use the Scaffold's drawer
property. You pass it a drawer (or possibly another widget) to show, and it will automatically handle making it available for swiping in from the left.
If you also want to open it on a button press you can use Scaffold.of(context).openDrawer();
from your button. Note that to get the context that includes the scaffold, you'll have to use a Builder or make your appbar a new widget.
You can achieve it by using this: flutter_inner_drawer
Add this to your package's pubspec.yaml file:
dependencies:
flutter_inner_drawer: "^0.5.7+2"
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
colorTransitionChild: Color.red, // default Color.black54
colorTransitionScaffold: Color.black54, // default Color.black54
//When setting the vertical offset, be sure to use only top or bottom
offset: IDOffset.only(bottom: 0.05, right: 0.0, left: 0.0),
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,
backgroundDecoration: BoxDecoration(color: 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
);
}