Skip to content

Instantly share code, notes, and snippets.

@graphicbeacon
Last active Mar 22, 2020
Embed
What would you like to do?
Flutter slideout container with handle
import 'package:flutter/material.dart';
void main() => runApp(
MaterialApp(
debugShowCheckedModeBanner: false,
home: Scaffold(
body: Page(),
),
),
);
class Page extends StatefulWidget {
@override
PageState createState() => PageState();
}
class PageState extends State<Page> {
double left = 0;
double leftStart;
static final imgUrl = 'https://picsum.photos/id/10';
static final double startW = 30;
double initW = startW;
double containerWidth = startW;
@override
Widget build(BuildContext context) {
double screenW = MediaQuery.of(context).size.width;
double screenH = MediaQuery.of(context).size.height;
var networkImageUrl = '$imgUrl/${screenW.toInt()}/${screenH.toInt()}';
print(screenW);
print(screenH);
return Stack(children: <Widget>[
Image.network(
networkImageUrl,
width: screenW,
height: screenH,
),
Positioned(
left: left,
child: Container(
width: containerWidth,
height: MediaQuery.of(context).size.height,
color: Colors.purple,
child: Stack(
children: <Widget>[
Positioned(
left: 0,
child: Image.network(
networkImageUrl,
width: screenW,
height: screenH,
fit: BoxFit.none,
)),
Align(
alignment: Alignment.centerRight,
child: GestureDetector(
onHorizontalDragStart: (details) {
setState(() {
leftStart = details.globalPosition.dx;
});
},
onHorizontalDragUpdate: (details) {
var offsetWidth = details.globalPosition.dx - leftStart;
var updatedWidth = (offsetWidth + initW).roundToDouble();
var screenWidth = MediaQuery.of(context).size.width;
setState(() {
if (updatedWidth < startW) {
containerWidth = startW;
return;
}
if (updatedWidth > screenWidth) {
containerWidth = screenWidth;
return;
}
containerWidth = updatedWidth;
});
},
onHorizontalDragEnd: (details) {
setState(() {
initW = containerWidth;
});
},
child: Container(
width: 30,
height: MediaQuery.of(context).size.height,
color: Colors.grey,
child: Center(
child: Icon(Icons.drag_handle),
),
),
),
)
],
),
),
)
]);
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment