ヘッダーを見えなくしたいが影が表示されているため、影を無くしたい

Question

はじめまして。

AppBarで影を無くす設定をしているにも関わらず、影が表示されているため
この影を無くしたいです。
AppBarでは、"elevation: 0.0"を設定しています。

ちなみに、bodyを以下に差し替えると影は見えなくなります。

body: Text(
        'Hello World'
    ),

この画面は、URLをPOST送信した際のレスポンス結果を表示する画面のコードです。
どうぞよろしくお願いいたします。

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_gowjp/dataClass.dart';
import 'package:webview_flutter/webview_flutter.dart';

import 'dart:io';
import 'package:http/http.dart' as http;
import 'dart:convert';
import 'package:fluttertoast/fluttertoast.dart';

class ResponseView extends StatelessWidget {

  // POST送信する画像のパス or 送信する電話番号
  String _mPostImagePath = "";
  // POST送信でアクセスするURL
  String _mAccessUrl     = "";
  // POST送信で送信するbody
  Map<String, dynamic> _mBody = null;
  // POST送信で送信するheaders
  Map<String, dynamic> _headers = null;
  // 画面名
  String _mDispName = "";

  WebViewController _mWebViewController = null; // WebVewコントローラー
  final int _STATUS_CODE_OK = 200;
  final int _STATUS_CODE_REDIRECT = 302;

  // メディアスキャン用定義値
  static const String METHOD_CHANNEL_NAME = "com.gow.jp.flutter_gowjp/mediaScanner";
  static const MethodChannel _mMethodChannel = const MethodChannel(METHOD_CHANNEL_NAME);

  ResponseView(String imagePath, String dName) {
    _mPostImagePath = imagePath;
    // 画面名からURLを選択する
    _mAccessUrl     = _selectUrl(dName);
    // 画面名から送信するbodyを選択する
    _mBody          = _selectBody(dName);
    // 画面名から送信するheadersを選択する
    _headers        = _selectHeaders(dName);
    // 画面名の保存
    _mDispName      = dName;
  }

  // 画面名からURLを選択する
  String _selectUrl(String dName) {
    switch(dName) {
      case 'phoneNumber':
      case 'cameraPicture':
      case 'photoPicture':
      case 'qrPicture':
        // 画像名からアクセスパスを取得する
        String accessUrl = dataClass().accessUrl[dName];
        return accessUrl;
      default:
        break;
    }
  }

  // 画面名から送信するbodyを選択する
  Map<String, dynamic> _selectBody(String dName) {
    Map<String, dynamic> map = new Map<String, dynamic>();

    switch(dName) {
      case 'phoneNumber':
        String bodyKey = dataClass().bodyKey[dName];
        map[bodyKey] = _mPostImagePath;
        return map;
      case 'cameraPicture':
      case 'photoPicture':
      case 'qrPicture':
        final bytes = File(_mPostImagePath).readAsBytesSync();
        String img64 = base64Encode(bytes);
        String bodyKey = dataClass().bodyKey[dName];
        map[bodyKey] = img64;
        return map;
      default:
        break;
    }
  }

  // 画面名から送信するheadersを選択する
  Map<String, dynamic> _selectHeaders(String dName) {

    switch(dName) {
      case 'phoneNumber':
      case 'cameraPicture':
      case 'photoPicture':
      case 'qrPicture':
        return dataClass().headers;
      default:
        break;
    }
  }

  Future<String> _showBodyArea() async {
    if (_mDispName == 'cameraPicture') {
      // android(Native)へメディアスキャンリクエスト
      _requestMediaScanNative();
    }

    // POST送信用メソッド
    Future<String> result = _postRequest();
    return result;
  }

  // android(Native)へメディアスキャンリクエスト
  Future<void> _requestMediaScanNative() async {
    final String result = await _mMethodChannel.invokeMethod('mediaScanner', _mPostImagePath);
    Fluttertoast.showToast(msg: result);
  }

  // POST送信用メソッド
  Future<String> _postRequest() async {
    final http.Response response = await http.post(
      _mAccessUrl,
      headers: _headers,
      body   : _mBody
    );

    int statusCode = response.statusCode;

    try {
      if (statusCode == _STATUS_CODE_OK ||
          statusCode == _STATUS_CODE_REDIRECT) { // 302(=リダイレクト)の場合
        debugPrint('========================= ${response.body}');
        // レスポンス値を返却する
        return response.body;
      } else {
        throw Exception('Failed to load post. Response status code = ' + statusCode.toString());
      }
    } catch (error) {
      return Future.error(error);
    }

  }

  void loadUrl(String responseBody) async {
    // <WebViewControllerのloadUrlメソッドにローカルファイルのURI情報を渡す>
    // WebViewControllerはWebViewウィジェットに情報を与えることができます。
    // <Uri.dataFromStringについて>
    // パラメータで指定されたエンコーディングまたは文字セット（指定されていないか認識されない場合はデフォルトでUS-ASCII）
    // を使用してコンテンツをバイトに変換し、結果のデータURIにバイトをエンコードします。
    _mWebViewController.loadUrl( Uri.dataFromString(
        responseBody,
        mimeType: 'text/html',
        encoding: Encoding.getByName('utf-8')
    ).toString());
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          backgroundColor: Colors.white.withOpacity(0.0), // ヘッダーの背景色を透過にする
          elevation: 0.0, // ヘッダーの影を無くす(default: 4.0)
        ),
        body: FutureBuilder (
            future: _showBodyArea(),
            builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
              switch(snapshot.connectionState) {
                case ConnectionState.none:
                // 通信中
                case ConnectionState.waiting:
                case ConnectionState.active:
                  return Center(
                    child: CircularProgressIndicator(),
                  );
//                  break;
                // 通信が完了
                case ConnectionState.done:
                  return WebView(
                    javascriptMode: JavascriptMode.unrestricted,
                    // WebViewの生成時
                    onWebViewCreated: (WebViewController webViewController) async {
                      _mWebViewController = webViewController; // 生成されたWebViewController情報を取得する
                      await loadUrl(snapshot.data.toString()); // HTMLファイルのURL（ローカルファイルの情報）をControllerに追加する処理
                    },
                  );
//                  break;
              }
            }
            ),
      ),
    );
  }

}

Answer 1

ヘッダーは作成しないようにして、
SafeAreaにてアプリのメイン部分のコンテンツWidgetを包んであげることで
android osで出しているヘッダーに重ならない様な、コンテンツ表示を実現できました。

Answer 2

AppBarを消したいだけなのであれば、そもそも設置しなければ良いと思うのですが、それではだめでしょうか？

Comments

[rick]

ご回答ありがとうございます。

設置をしない場合、アプリのメイン表示部分(上記カード内ではbody部分です)が、android osで出しているヘッダー(時計やバッテリー残量を表示する部分)に重なって表示されます。

android osのヘッダーに重ならない様な、アプリのメイン部分の表示方法があれば良いのですが。

android osのヘッダー分の隙間を固定値でアプリのメイン部分で空ければ良いのですが、デバイス毎にヘッダーの高さは違うかもしれないので出来ればやりたくありません。

---
(追記)
上記現象を見るにbodyに設定するものによって、ヘッダーに折角設定した影無し設定が反映されない事がある様に私は考えています。

上記bodyに設定したものの何が悪さをして、ヘッダーの影無し設定を無視しているのか知りたく思っています。

[tepci]

SafeAreaというウィジェットを使うといいです。
自動的に重ならないように表示してくれます。

[rick]

↑SafeArea最高です！
外側から包んであげたら、表示したいコンテンツのWidgetが
OSで出しているヘッダーに重ならない配置で表示されました。