CODEWITHSUNDEEP
javascriptflutterdartnavigation
kboskin
kboskin

Reputation: 420

Flutter navigate keeping previous screen visible at the bottom

I am currently working on a project where the navigation is organized in a next way. When the user navigates from one screen to another, the previous screen remains at the bottom (screenshot below)

Generally, the effect I am trying to achieve is similar to native Android's fragmentManager.add functionality, when the Fragment1 overlaps Fragment2, but unfortunately, using the Flutter wasn't able to achieve the same

For navigation, I am using the regular flutter navigator

Would appreciate it if someone can help me with this

Navigation image

Upvotes: 2

Views: 1226

Answers (1)

Gaspard Merten
Gaspard Merten

Reputation: 1233

You have two options, but either way, it has to do with the Route object.

The first one is to push a DialogRoute instead of a MaterialPageRoute. This way, you directly get a transparent route that will allow the content below the route to be displayed.

The second one which needs you to do a bit more work is to extend the ModalRoute object to create your own Route class (you will need to create your animation etc...). So this way is clearly more robust, but if you are new to Flutter, I would recommend that you pick the first one :D.

I hope that helps!

Here is an example of the first option:

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: GestureDetector(
          child: Text('TAP ME'),
          onTap: () {
            Navigator.of(context).push(
              DialogRoute(
                  builder: (_) => Material(
                    color: Colors.black45,
                    child: Center(
                      child: GestureDetector(
                        onTap: () => Navigator.pop(context),
                        child: Text('BACK'),
                      ),
                    ),
                  ),
                  context: context),
            );
          },
        ),
      ),
    );
  }
}

Upvotes: 3

Related Questions