inherited_theme_demo.dart

import 'package:flutter_web/material.dart';

// Full screen box that's filled with the theme's primary color.
// Contains an icon and 'Hello World' text.
class PrimaryBox extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      color: Theme.of(context).primaryColor,
      child: Row(
        mainAxisSize: MainAxisSize.min,
        children: <Widget>[
          Icon(Icons.add),
          SizedBox(width: 24.0),
          Text('Hello World'),
        ],
      ),
    );
  }
}

class Demo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // The context that the route's child is displayed in only includes the
    // inherited themes defined by WidgetsApp and MaterialApp. Themes
    // defined "lower" in the tree aren't included.
    void _pushRoute(Widget child) {
      Navigator.of(context).push<void>(MaterialPageRoute(builder: (BuildContext context) => child));
    }
    return Scaffold(
      backgroundColor: Theme.of(context).primaryColor,
      body: Center(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            RaisedButton(
              child: const Text('Push PrimaryBox'),
              onPressed: () {
                // This route's PrimaryBox will display blue (the default primaryColor),
                // instead of green because the "shadow" Theme created in DemoHome
                // is not an ancestor of the route's context. Similarly its text
                // and icon will be configured with the "fallback" themes.
                _pushRoute(PrimaryBox());
              },
            ),
            SizedBox(height: 32),
            RaisedButton(
              child: const Text('Push captureAll() PrimaryBox'),
              onPressed: () {
                // This route's PrimaryBox will display green because captureAll()
                // wraps a copy of the this context's Theme around the
                // primaryBox.
                _pushRoute(InheritedTheme.captureAll(context, PrimaryBox()));
              },
            ),
            SizedBox(height: 32),
            PopupMenuButton<int>(
              child: const Text('Show a PopupMenu'),
              onSelected: (int result) {
                print('selected $result');
              },
              // The appearance of the menu items' text is defined by the
              // PopupMenuTheme defined in DemoHome. Popup menus use
              // InheritedTheme.captureAll() by default.
              itemBuilder: (BuildContext context) {
                return <PopupMenuEntry<int>>[
                  PopupMenuItem<int>(value: 1, child: Text('One')),
                  PopupMenuItem<int>(value: 2, child: Text('Two')),
                  PopupMenuItem<int>(value: 3, child: Text('Free')),
                  PopupMenuItem<int>(value: 4, child: Text('Four')),
                ];
              },
            ),
          ],
        ),
      ),
    );
  }
}

class DemoHome extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // This theme is expected to affect both the Demo's Scaffold background
      // (and it does) as well as the PrimaryBox widgets displayed by the
      // routes pushed by pressing the buttons.
      body: Theme(
        data: Theme.of(context).copyWith(primaryColor: Colors.green[300]),
        child: DefaultTextStyle(
          style: TextStyle(fontSize: 48, color: Colors.white),
          child: IconTheme(
            data: IconThemeData(size: 48, color: Colors.white),
            child: PopupMenuTheme(
              data: PopupMenuThemeData(
                color: Colors.green,
                textStyle: TextStyle(fontSize: 24, color: Colors.white),
              ),
              child: Center(child: Demo()),
            ),
          ),
        ),
      ),
    );
  }
}

void main() {
  await ui.webOnlyInitializePlatform();
  runApp(MaterialApp(home: DemoHome()));
}