22.1 C
New York
Friday, August 19, 2022

Flutter: Hide the AppBar in landscape mode

- Advertisement -

Sometimes, you may want to hide the AppBar of your Flutter app when the device orientation is landscape (but still show the AppBar in portrait mode) in order to have more free space. To archive so, you can do like this:

Scaffold(
        appBar: MediaQuery.of(context).orientation == Orientation.landscape
            ? null // show nothing in lanscape mode
            : AppBar(
                title: const Text('Kindacode.com'),
              ),
        body: Container()
);

Screenshot:

Full code in main.dart:

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

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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      // Remove the debug banner
      debugShowCheckedModeBanner: false,
      title: "Kindacode.com",
      home: HomePage(),
    );
  }
}

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: MediaQuery.of(context).orientation == Orientation.landscape
            ? null // show nothing in lanscape mode
            : AppBar(
                title: const Text('Kindacode.com'),
              ),
        body: Container());
  }
}

ThatÂ’s it. Further reading:

You can also take a tour around our Flutter topic page and Dart topic page to see the latest tutorials and examples.

Advertisements
- Advertisement -

Related Articles

LEAVE A REPLY

Please enter your comment!
Please enter your name here

Latest Articles