Flutter in Native Android App, back pressed not working

Question

I read a lot of topics about that but nothing works and was really same context that mine.

I'm trying to add flutter views inside native Android project, I've got a native Activity which launch a flutter fragment. This flutter fragment contains 2 views (firstScreen and secondScreen). FirstScreen redirect to SecondScreen on button pressed and secondScreen pop back to first screen on button pressed. Until now everything is ok.

But when I'm on second screen I'd like to go back on firstScreen on device back button pressed but instead flutter Fragment is closed and I'm back on native Activity.

The back process looks good as it works when I run flutter module alone.

Here are some screenshots:

And here are some code:

In native MainActivity

override fun startFlutterModule() {
    val newFlutterFragment: FlutterFragment = FlutterFragment.createDefault()
    supportFragmentManager.beginTransaction()
        .replace(
            fragmentContainerId,
            newFlutterFragment,
            TAG_FLUTTER_FRAGMENT
        )
        .addToBackStack(TAG_FLUTTER_FRAGMENT)
        .commit()
}

Base Flutter App

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      routes: {
        '/first': (context) => FirstScreen(),
        '/second': (context) => SecondScreen(),
      },
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: FirstScreen(),
    );
  }
}

First Flutter Screen

class FirstScreen extends StatefulWidget {
  @override
  _FirstScreenState createState() => _FirstScreenState();
}

class _FirstScreenState extends State<FirstScreen> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Text(
              "First Screen",
              style: TextStyle(
                fontSize: 30.0,
                fontWeight: FontWeight.w600,
              ),
            ),
            Padding(
              padding: EdgeInsets.all(10.0),
              child: RaisedButton(
                padding: EdgeInsets.symmetric(
                  horizontal: 20.0,
                  vertical: 10.0,
                ),
                onPressed: (){
                  Navigator.pushNamed(context, '/second');
                },
                child: Text(
                  "Screen 2",
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 20.0,
                  ),
                ),
              ),
            )
          ],
        ),
      ),
    );
  }
}

Second Flutter Screen

class SecondScreen extends StatefulWidget {
  @override
  _SecondScreenState createState() => _SecondScreenState();
}

class _SecondScreenState extends State<SecondScreen> {
  @override
  Widget build(BuildContext context) {
    return new WillPopScope(
        onWillPop: () async {
          Navigator.pop(context);
          return Future.value(false);
        },
        child: Scaffold(
          backgroundColor: Colors.white,
          body: Center(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text(
                  "Second Screen",
                  style: TextStyle(
                    fontSize: 30.0,
                    fontWeight: FontWeight.w600,
                  ),
                ),
                Padding(
                  padding: EdgeInsets.all(10.0),
                  child: RaisedButton(
                    padding: EdgeInsets.symmetric(
                      horizontal: 20.0,
                      vertical: 10.0,
                    ),
                    onPressed: () {
                      Navigator.pop(context);
                    },
                    child: Text(
                      "Screen 1",
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 20.0,
                      ),
                    ),
                  ),
                )
              ],
            ),
          ),
        )
    );
  }
}

Answer 1

From your native activity invoke the onBackPressed() method of the FlutterFragment.

 override fun onBackPressed() {

    _flutterFragment.onBackPressed()
 }

Answer 2

Set true for this attribute when using FlutterFragment, if not, the default hardware back press (or WillPopScope) on dart code will not work.