Flutter for web routing with multiple material apps

Solution with ModalRoute Class

You can solve it this way, by using the ModalRoute Class and passing the current route name defined in its settings as parameter to the Child:

ChildApp(ModalRoute.of(context).settings.name)

class ChildApp extends StatefulWidget {
  final String route;

  const ChildApp(this.route);
  @override
  _ChildAppState createState() => _ChildAppState();
}

class _ChildAppState extends State<ChildApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Child',
      initialRoute: widget.route,
      routes: {
        widget.route: (context) => Container(
          color: Colors.brown,
        ),
      },
    );
  }
}

name → String? The name of the route (e.g., "/settings"). [...]

Full example below:

import 'package:flutter/material.dart';

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

class ParentApp extends StatefulWidget {
  @override
  _ParentAppState createState() => _ParentAppState();
}

class _ParentAppState extends State<ParentApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Parent',
      initialRoute: '/parent-home',
      routes: {
        '/parent-home': (context) => ParentHome(),
        '/parent-second': (context) => ParentSecondRoute(),
      },
    );
  }
}

class ParentHome extends StatefulWidget {
  @override
  _ParentHomeState createState() => _ParentHomeState();
}

class _ParentHomeState extends State<ParentHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.grey,
      body: Container(
        child: Center(
          child: RaisedButton(
            child: Text('Go to second route'),
            onPressed: () => Navigator.pushNamed(
              context,
              '/parent-second',
            ),
          ),
        ),
      ),
    );
  }
}

class ParentSecondRoute extends StatefulWidget {
  @override
  _ParentSecondRouteState createState() => _ParentSecondRouteState();
}

class _ParentSecondRouteState extends State<ParentSecondRoute> {
  bool isChildRendered;

  @override
  void initState() {
    isChildRendered = false;
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Flexible(
            child: isChildRendered
                ? ChildApp(ModalRoute.of(context).settings.name) // this line
                : Container(
              color: Colors.green,
              child: Center(
                child: RaisedButton(
                  child: Text('Go to home'),
                  onPressed: () => Navigator.of(context).pop(),
                ),
              ),
            ),
          ),
          Flexible(
            child: Center(
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Checkbox(
                    value: isChildRendered,
                    onChanged: (value) => setState(() {
                      isChildRendered = value;
                    }),
                  ),
                  SizedBox(width: 5),
                  Text('Is child rendered?'),
                ],
              ),
            ),
          )
        ],
      ),
    );
  }
}

class ChildApp extends StatefulWidget {
  final String route;

  const ChildApp(this.route); // and this one
  @override
  _ChildAppState createState() => _ChildAppState();
}

class _ChildAppState extends State<ChildApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Child',
      initialRoute: widget.route,
      routes: {
        widget.route: (context) => Container(
          color: Colors.brown,
        ),
      },
    );
  }
}

Home

Second Route