No modal animation on iOS 14

[Urkman]

I don't get the iOS 13 modal animation on my iOS 14 Simulation. Using this code: showCupertinoModalBottomSheet( context: context, builder: (context) => LoginPage(), );

I'm also using the Flutter Platform Widgets. Could this be the problem?

[Urkman]

Still not getting it to work.. Here is a simple example. Where is my Problem :(

import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.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: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
        decoration: BoxDecoration(
          color: Colors.white,
        ),
        child: TextButton(
          child: Text("Press"),
          onPressed: () {
            showCupertinoModalBottomSheet(
              context: context,
              expand: true,
              builder: (context) => SecondPage(),
            );
          },
        ));
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Text("Hello"),
    );
  }
}

[haashem]

You have to use MaterialWithModalsPageRoute to see the cupertino modal animation.

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) => MaterialWithModalsPageRoute(
          builder: (context) => MyHomePage()),
    );
  }
}

@jamesblasco Please add this note in ReadMe. and can you explain why we should use MaterialWithModalsPageRoute ?

[Urkman]

@haashem And how can I call the route? When I call inside my example : Navigator.pushNamed(context, '/settings'); It is not working...

And will it still work in CupertinoApp?

[haashem]

@Urkman In fact I don't know, it seems it's complicated than it should be. waiting for answer from @jamesblasco

[bierbaumtim]

Please read the instructions in the readme. It contains detailed information what you need to do, to work with named routes.

[Urkman]

@bierbaumtim thank for your suggestion... But I don't "want" to use named routes. I just want to get my above example running in the simplest way...

[Urkman]

@jamesblasco Any suggestions on this? How can I get this simple example to work?

[TJMusiitwa]

I too would like to add my voice along with yours @Urkman . The modal animation on my app that is running on an iPhone sim on iOS14 doesn't give me a similar experience to what the photo example shows. This example code below is the only place that i call and use the package oh and the foundation of the app is using CupertinoApp and not MaterialApp.

CupertinoButton.filled(
                            onPressed: () {
                              showCupertinoModalBottomSheet(
                                context: context,
                                expand: true,
                                backgroundColor: CupertinoColors.black,
                                builder: (_) {
                                  return PurchaseScreen(
                                      smoothieDetails: smoothieDetails);
                                },
                              );
                            },
                            child: Text('Buy with Apple Pay'),
                          )

Probably @jamesblasco can point out what if anything that I am doing wrong

[bierbaumtim]

@Urkman I used your code and the suggestion from @haashem and tested it and it works as expected. I added a Scaffold in both pages, because without them it looks at bit weird :)

import 'package:flutter/material.dart';
import 'package:modal_bottom_sheet/modal_bottom_sheet.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) => MaterialWithModalsPageRoute(
        builder: (context) => HomePage(),
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          decoration: BoxDecoration(
            color: Colors.white,
          ),
          child: TextButton(
            child: Text("Press"),
            onPressed: () {
              showCupertinoModalBottomSheet(
                context: context,
                expand: true,
                builder: (context) => SecondPage(),
              );
            },
          ),
        ),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Text("Hello"),
      ),
    );
  }
}

It will also qork with a CupertinoApp. It is a bit confusing that MaterialWithModalsPageRoute contains a relation to the material library, but in this case it is only the naming.

[bierbaumtim]

You have to use MaterialWithModalsPageRoute to see the cupertino modal animation.

class MyApp extends StatelessWidget {
  
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) => MaterialWithModalsPageRoute(
          builder: (context) => MyHomePage()),
    );
  }
}

@jamesblasco Please add this note in ReadMe. and can you explain why we should use MaterialWithModalsPageRoute ?

@TJMusiitwa This should help and please read the documentation, which contains detailed steps how to configure your app to work with this package.

[jamesblasco]

The reason why a MaterialWithModalsPageRoute is required because it is not possible to override the MaterialPageRoute transition animations. There is a PR https://github.com/flutter/flutter/pull/69669 pending that would definitely make this easier

[Urkman]

@bierbaumtim Thanks for this, this works for me... As soon as I add a CupertinoTabScaffold... Then it again stops working :(

[Urkman]

This is working for me:

        showCupertinoModalBottomSheet(
          context: context,
          builder: (context) => Detail(clip),
          useRootNavigator: true,
        );

I needed to add the useRootNavigator: true,...

[TJMusiitwa]

This is working for me:

        showCupertinoModalBottomSheet(
          context: context,
          builder: (context) => Detail(clip),
          useRootNavigator: true,
        );

I needed to add the useRootNavigator: true,...

I can also confirm that this works for my scenario. Thanks @Urkman I hope @jamesblasco can include this in the documentation

[jamesblasco]

Hey! Sorry for not replying in this thread.

The only requirement for the animation is that the previous route needs to be of type MaterialWithModalsPageRoute.

If you have nested navigators you might with context use one that does not use MaterialWithModalsPageRoute.

If you as followed :

 MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) => MaterialWithModalsPageRoute(
        builder: (context) => HomePage(),
      ),
    );

You can be sure that when using useRootNavigator: true, the modal animation will work as expected. But you can make it work with other navigators that you have inside your app