Skip to content

Instantly share code, notes, and snippets.

@ykmnkmi
Created Oct 1, 2020
Embed
What would you like to do?
Flutter simple drawer
import 'dart:ui' as ui show window;
import 'package:flutter/material.dart' show Colors;
import 'package:flutter/widgets.dart';
void main() {
runApp(App());
}
class App extends StatelessWidget {
const App({Key key}) : super(key: key);
@override
Widget build(BuildContext context) {
return MediaQuery(
child: DecoratedBox(
child: Directionality(
child: DefaultTextStyle(
child: HomePage(),
style: TextStyle(
color: Colors.black,
fontFamily: 'monospace',
fontSize: 16.0,
),
),
textDirection: TextDirection.ltr,
),
decoration: BoxDecoration(
color: Colors.white,
),
),
data: MediaQueryData.fromWindow(ui.window),
);
}
}
class HomePage extends StatefulWidget {
const HomePage({Key key, this.title}) : super(key: key);
final String title;
@override
HomePageState createState() {
return HomePageState();
}
}
class HomePageState extends State<HomePage> with SingleTickerProviderStateMixin {
bool showUserDrawer;
AnimationController userDrawerController;
Animation<double> userDrawerAnimation;
void _update() {
setState(() {});
}
void _hide(AnimationStatus status) {
if (status == AnimationStatus.dismissed) {
setState(() {
showUserDrawer = false;
});
userDrawerController.removeStatusListener(_hide);
}
}
@override
void initState() {
super.initState();
showUserDrawer = false;
userDrawerController = AnimationController(duration: Duration(milliseconds: 250), vsync: this);
userDrawerAnimation = CurvedAnimation(curve: Curves.easeInOut, parent: userDrawerController);
userDrawerAnimation = Tween<double>(begin: 0.0, end: 1.0).animate(userDrawerAnimation);
userDrawerController.addListener(_update);
}
@override
void dispose() {
super.dispose();
userDrawerController.removeListener(_update);
userDrawerController.dispose();
}
@override
Widget build(BuildContext context) {
return Stack(
children: <Widget>[
GestureDetector(
behavior: HitTestBehavior.opaque,
child: Align(
child: Text(widget.title ?? 'Hello World!'),
),
onTap: () {
setState(() {
showUserDrawer = true;
});
userDrawerController.forward();
},
),
if (showUserDrawer)
Row(
children: <Widget>[
Expanded(
child: GestureDetector(
child: DecoratedBox(
decoration: BoxDecoration(
color: Colors.black.withOpacity(0.12 * userDrawerAnimation.value),
),
),
onTap: () {
if (showUserDrawer) {
userDrawerController.addStatusListener(_hide);
userDrawerController.reverse();
}
},
),
),
SizedBox(
child: UnconstrainedBox(
alignment: Alignment.centerLeft,
child: SizedBox(
child: DecoratedBox(
child: Align(
child: Text('hey ' * 5),
),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: <BoxShadow>[
BoxShadow(
blurRadius: 16.0 * 0.3,
color: Colors.black12,
),
],
),
),
width: 16.0 * 20.0,
),
clipBehavior: Clip.antiAlias,
constrainedAxis: Axis.vertical,
),
width: 16.0 * 20.0 * userDrawerAnimation.value,
),
],
crossAxisAlignment: CrossAxisAlignment.stretch,
),
],
);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment