How to use pushNamed with Dismissible Widget and see background transparent first page

Question

I want to use pushNamed from page 1 to page 2 and use Dismissible Widget to close page 2.

when pull down I got a black screen when close it.

I want to see page 1 when I pull down close page 2

I use this example

class FirstScreen extends StatelessWidget {
  const FirstScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('First Screen'),
      ),
      body: Center(
        child: ElevatedButton(
          // Within the `FirstScreen` widget
          onPressed: () {
            // Navigate to the second screen using a named route.
            Navigator.pushNamed(context, '/second');
          },
          child: const Text('Launch screen'),
        ),
      ),
    );
  }
}

class SecondScreen extends StatelessWidget {
  const SecondScreen({super.key});

  @override
  Widget build(BuildContext context) {
    return Dismissible(
      key: UniqueKey(),
      movementDuration: const Duration(milliseconds: 0),
      resizeDuration: const Duration(milliseconds: 1),
      onDismissed: (d) => Navigator.of(context).pop(),
      direction: DismissDirection.down,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Second Screen'),
        ),
        body: Center(
        child: ElevatedButton(
          // Within the SecondScreen widget
          onPressed: () {
            // Navigate back to the first screen by popping the current route
            // off the stack.
            Navigator.pop(context);
          },
          child: const Text('Go back!'),
        ),
        ),
        
      ),
    );
  }
}

if I use this one it works!! but I don't want use it

Navigator.of(context).push(
              PageRouteBuilder(
              opaque: false,
              pageBuilder: (context, animation, secondaryAnimation) => const SecondScreen(),
            ));

void main() {
   runApp(
       MaterialApp( 
         title: 'Named Routes Demo',
         initialRoute: '/',
         routes: {
             '/': (context) => const FirstScreen(),
             '/second': (context) => const SecondScreen(), }, ), 
       );
 }

Answer 1

Use MaterialApp.onGenerateRoute instead of MaterialApp.routes and use the PageRouteBuilder that works already.

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Named Routes Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      onGenerateRoute: (settings) {
        switch (settings.name) {
          case '/':
            return MaterialPageRoute(builder: (context) => const FirstScreen());
          case '/second':
            return PageRouteBuilder(
              opaque: false,
              pageBuilder: (context, animation, secondaryAnimation) =>
                  const SecondScreen(),
            );
        }
      },
    );
  }
}