web-dev-qa-db-ja.com

AppBarを透明にし、画面全体に設定されている背景画像を表示する

FlutterアプリケーションにAppBarを追加しました。画面に既に背景画像があり、appBarの色を設定したり、appBarに個別の背景画像を設定したりしません。

AppBarにも同じ画面の背景画像を表示したいのですが。

AppBarの色を透明に設定してみましたが、灰色のように見えます。

コード例：

appBar: new AppBar(
        centerTitle: true,
//        backgroundColor: Color(0xFF0077ED),
        elevation: 0.0,
        title: new Text(
            "DASHBOARD",
            style: const TextStyle(
                color:  const Color(0xffffffff),
                fontWeight: FontWeight.w500,
                fontFamily: "Roboto",
                fontStyle:  FontStyle.normal,
                fontSize: 19.0
            )),
      )

enter image description here

dartflutterflutter-appbar
17
Rahul Mahadik

それは私がやったことであり、それは機能しています

これは現在Scaffoldでサポートされています（安定版-v1.12.13 + hotfix.5）。

Scaffold extendBodyBehindAppBarをtrueに設定し、AppBarの仰角を0に設定して影を取り除き、必要に応じてAppBar backgroundColorの透明度を設定します。

宜しくお願いします

0
CMP Engineers

私の場合、私はそれを次のように行いました：

さらに、カスタムの戻るボタンを使用してアプリバーを作成します（この場合はFloatingActionButtonを使用）。 Stack内にウィジェットを追加できます。

class Home extends StatefulWidget {
  @override
  _EditProfilePageState createState() => _EditProfilePageState();
}

class _HomeState extends State< Home > {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          this._backgroundImage(), // --> Background Image
          Positioned( // --> App Bar
            child: AppBar(
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              leading: Padding( // --> Custom Back Button
                padding: const EdgeInsets.all(8.0),
                child: FloatingActionButton(
                  backgroundColor: Colors.white,
                  mini: true,
                  onPressed: this._onBackPressed,
                  child: Icon(Icons.arrow_back, color: Colors.black),
                ),
              ),
            ),
          ),
          // ------ Other Widgets ------
        ],
      ),
    );
  }

  Widget _backgroundImage() {
    return Container(
      height: 272.0,
      width: MediaQuery.of(context).size.width,
      child: FadeInImage(
        fit: BoxFit.cover,
        image: NetworkImage(
            'https://images.unsplash.com/photo-1527555197883-98e27ca0c1ea?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&w=1000&q=80'),
        placeholder: AssetImage('assetName'),
      ),
    );
  }

  void _onBackPressed() {
    Navigator.of(context).pop();
  }
}

次のリンクで詳細情報を確認できます Link

0
Juanes30

あなたはこれを試すことができますこのコードは私のために働きます

@override
  Widget build(BuildContext context) {
    _buildContext = context;
    sw = MediaQuery.of(context).size.width;
    sh = MediaQuery.of(context).size.height;

    return new Container(
      child: new Stack(
        children: <Widget>[
          new Container(
            child: Stack(
              children: <Widget>[
                Container(
                  padding: EdgeInsets.all(20.0),
                  decoration: BoxDecoration(image: backgroundImage),
                ),
              ],
            ),
          ),
          new Scaffold(
            backgroundColor: Colors.transparent,
            appBar: new AppBar(
              title: new Text(Strings.page_register),
              backgroundColor: Colors.transparent,
              elevation: 0.0,
              centerTitle: true,
            ),
            body: SingleChildScrollView(
              padding: EdgeInsets.all(20.0),
              physics: BouncingScrollPhysics(),
              scrollDirection: Axis.vertical,
              child: new Form(
                key: _formKey,
                autovalidate: _autoValidate,
                child: FormUI(),
              ),
            ),
          )
        ],
      ),
    );
  }

backgroundImage

DecorationImage backgroundImage = new DecorationImage(
  image: new ExactAssetImage('assets/images/welcome_background.png'),
  fit: BoxFit.cover,
);
0
Jaspalsinh Gohil