Bollie
Bollie

Reputation: 517

Flutter - Edge of screen drag goes back a page unintentionally

I have been using material through flutter to design my app. Accidentally, I swiped on the edge of my screen and it went back a page to a route it was not supposed to. This is consistent throughout the app and the Cupertino package is not used anywhere.

The app starts up with a custom splash screen before deciding to goto the login view (if logged out) or the home page (logged in)

If logged in, swiping back always returns to the splash screen as it was the previous route, and the app crashes.

Page 1

  @override
  Widget build(BuildContext context) {
    return _loading == false
        ? Scaffold(
            backgroundColor: Colors.white,
            appBar: _buildBar(context),
            body: Column(
                        crossAxisAlignment: CrossAxisAlignment.start,
                        mainAxisSize: MainAxisSize.min,
                        children: <Widget>[
                          Text(
                            'test',
                            style: TextStyle(
                                fontWeight: FontWeight.bold, fontSize: 18),
                          ),
                          SizedBox(height: 10),
                          ButtonTheme(
                              minWidth: MediaQuery.of(context).size.width / 2,
                              height: 40,
                              child: RaisedButton(
                                textColor: Colors.white,
                                color: prefix0.backgroundColor,
                                child: Text("View"),
                                onPressed: () => Navigator.push(
                                    context,
                                    MaterialPageRoute(
                                        builder: (context) => PDFView(
                                              document: link,
                                            ))),
                                shape: new RoundedRectangleBorder(
                                  borderRadius: new BorderRadius.circular(15.0),
                                ),
                              )),
                        ],
                      ),  
            resizeToAvoidBottomPadding: false,
          )
        : Center(child: CircularProgressIndicator());
  }
}

Page 2


class PDFView extends StatefulWidget {
  final String document;
  final File file;

  PDFView({this.document, this.file});
  @override
  _PDFViewState createState() => _PDFViewState();
}

class _PDFViewState extends State<PDFView> {
  bool _isLoading = true;

  Widget _buildBar(BuildContext context) {
    return new AppBar(
      backgroundColor: prefix0.backgroundColor,
      centerTitle: true,
      title: Text('PDF View'),
      actions: <Widget>[
        FlatButton(
          child: Icon(
            Icons.share,
            color: Colors.white,
          ),
          onPressed: () {
            // Share.share('${widget.document}');
          },
        ),
      ],
    );
  }

  PDFDocument doc;

  @override
  void initState() {
    super.initState();
    _getData();
  }

  _getData() async {
    if (widget.document != null) {
      doc = await PDFDocument.fromURL(widget.document);
      setState(() {
        _isLoading = false;
      });
    } else if (widget.file != null) {
      doc = await PDFDocument.fromFile(widget.file);
      setState(() {
        _isLoading = false;
      });
    } else {

      doc = await PDFDocument.fromURL(
          'https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf');
      setState(() {
        _isLoading = false;
      });
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _buildBar(context),
      body: Center(
          child: _isLoading
              ? Center(child: CircularProgressIndicator())
              : PDFViewer(
                  document: doc,
                  showPicker: false,
                )),
    );
  }
}

Sample Drag

Apologies for black mess, my poor attempt at redacting a document.

How can I prevent these swipe backs?

Possible development in finding a solution:

adding WillPopScope( onWillPop: () { return Future.value(false); }, above the scaffold prevents the swipe. However it also disables the back button. Therefore, the swipe action is only available if the view is "popable" ```

Upvotes: 1

Views: 1691

Answers (1)

Kushagra Saxena
Kushagra Saxena

Reputation: 669

This is the default behaviour of Material package on iOS and the iPhone users expect this behaviour everywhere in the app however if you do not want to enable the users to go back to some specific screen like the login screen just after the login in that case you should use pushReplacement instead of just push but if you want to do this in every case please have a look here

Upvotes: 2

Related Questions