【Flutter】AppBarの非表示(削除)【日本語】

FlutterのAppBarを非表示(削除)する方法です。

実際には透過させてるだけですが。

他のプログラミングに関する記事はこちら

スポンサーリンク

AppBarを非表示(削除)する

まずはじめに、AppBarとは以下の赤枠の部分のことです。

 

AppBar自体はよく使うショートカット(戻るボタン等)を置いておくための便利なものなのですが、アプリによっては消したい場合があります。

消す場合には、以下のような記述をします。

import 'package:flutter/material.dart';
 
void main() => runApp(MyApp());
 
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Hello World',
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white.withOpacity(0.0),
          elevation: 0.0,
        ),
        // extendBodyBehindAppBar: true,
        body: Text(
          'Hello World'
          ),
      ),
    );
  }
}

 

大事なのは12~13行目の以下記述です。

backgroundColor: Colors.white.withOpacity(0.0),
elevation: 0.0,

 

12行目の記述で、背景色を透過しています。

ただそれだけだと影(デフォルトで4.0が設定されている)が残ってしまうので、13行目の記述で影を0.0にして影無しにしています。

結果が以下の通りです。無事に消えました。

 

ちなみに、実際にはAppBarを完全に透明にしているだけですので、アプリの開始位置(Hello Worldの文字)が少し下から開始されています。

それを詰めるには、15行目にコメントアウトで記述している通り、「extendBodyBehindAppBar」を「true」に設定してあげればよいです(デフォルトでfalseが設定されている)

※見にくいですが、Hello Worldが画面上部に詰めて表示されています

 

「extendBodyBehindAppBar」を「true」にしなくてもAppBar自体を削除する(11~14行目の記述を削除する)でも同じような感じになりますが、AppBarを削除している人が少ないのでAppBarは何かしら残しておいた方がいい理由があるのかもしれません。

とりあえず、AppBarが不要であれば透過させて影を消し、更に上詰めにしたければ「extendBodyBehindAppBar」を「true」に設定すればいいと思います。

他のプログラミングに関する記事

プログラミングまとめ

プログラミングに関する記事です。 言語とかツールごとにまとめています。 スポンサーリンク [adcode] Flutter ・簡単導入~サンプルアプリのデバック起動まで ・文字の表示(重ねて[…]

IMG

スポンサーリンク