...

/

Add a Widget on Larger Screens

Add a Widget on Larger Screens

Add a widget on the screen depending on data from the MediaQuery widget.

We'll cover the following...

We managed to hide the “Menu” button when the screen width was large enough. However, on larger screens, we have no way to show the menu anymore. In this lesson, we’ll add a menu that’s always visible when the menu button isn’t.

import 'package:flutter/material.dart';

import 'profile_view.dart';
import 'settings_view.dart';

class AppMenu extends StatelessWidget {
  const AppMenu({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: SafeArea(
        right: false,
        child: Column(
          children: <Widget>[
            IconButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const ProfileView()),
                );
              },
              icon: const Icon(Icons.account_circle),
            ),
            IconButton(
              onPressed: () {
                Navigator.push(
                  context,
                  MaterialPageRoute(builder: (context) => const SettingsView()),
                );
              },
              icon: const Icon(Icons.settings),
            ),
          ],
        ),
      ),
    );
  }
}
Use MediaQuery to show a persistent application menu if the screen is wide enough

We define a new ...