How to Slideup View In Flutter ?

· 3 min read
How to Slideup View In Flutter
How to Slideup View In Flutter

Draggable Widget allows a widget to be dragged, a DragTarget provides a destination for the draggable. A widget that can be dragged from to a DragTarget Widget. So in this article, we will go through How to Slideup View In Flutter ??

Draggable is to transfer data using Drag&Drop.

How to Slide up View In Flutter?

First, make sure you have somewhere above in your tree a Scaffold Widget As it’s what will position everything together.

For this, you’ll just have to call Navigator.pop(context). But both modal and non-modal bottom sheet can be closed out of the box using common gestures. Such as the back button, navbar back, of click outside.

Consider a code snippet like the below:

class MyExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new Scaffold(
        appBar: new AppBar(title: new Text('Example')),
        body: new Center(
          child: new Builder(builder: (context) {
            return new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new RaisedButton(
                  onPressed: () => modal(context),
                  child: new Text("modal"),
                ),
                new RaisedButton(
                  onPressed: () => showSlideupView(context),
                  child: new Text("non modal"),
                ),
              ],
            );
          }),
        ),
      ),
    );
  }

  void showSlideupView(BuildContext context) {
    showBottomSheet(
        context: context,
        builder: (context) {
          return new Container(
            child: new GestureDetector(
              onTap: () => Navigator.pop(context),
              child: new Text("Click me to close this non-modal bottom sheet"),
            ),
          );
        });
  }

  modal(BuildContext context) {
    showModalBottomSheet(
        context: context,
        builder: (context) {
          return new Container(
            child: new Text("This is a modal bottom sheet !"),
          );
        });
  }
}

The above code will give us output like the below:

BottomSheet In Flutter
BottomSheet In Flutter

Conclusion:

Hope you guys are enjoying our articles based on Flutter.

Drop us your valuable feedback/suggestions to serve you much better.

In this article, we have been through How to Slide up View In Flutter?

Keep Learning !!! Keep Fluttering !!!

FlutterAgency.com is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget GuideFlutter ProjectsCode libs and etc.

FlutterAgency.com is one of the most popular online portal dedicated to Flutter Technology and daily thousands of unique visitors come to this portal to enhance their knowledge on Flutter.

Leave a Reply