web-dev-qa-db-fra.com

Rendre AppBar transparent et afficher l'image d'arrière-plan définie sur tout l'écran

J'ai ajouté AppBar dans mon application Flutter. Mon écran a déjà une image d'arrière-plan, où je ne veux pas définir la couleur appBar ou ne veux pas définir d'image d'arrière-plan distincte pour appBar.

Je veux aussi montrer la même image de fond d'écran à appBar.

J'ai déjà essayé en définissant la couleur appBar comme transparente, mais elle affiche une couleur comme le gris.

Exemple de code: 

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

c'est ce que j'ai fait et ça marche

Ceci est pris en charge par Scaffold maintenant (dans stable - v1.12.13 + hotfix.5).

Définissez Scaffold extendBodyBehindAppBar sur true, Définissez l'élévation AppBar sur 0 pour vous débarrasser de l'ombre, Définissez la transparence backgroundColor de l'AppBar selon vos besoins.

Meilleures salutations

0
CMP Engineers

Dans mon cas, je l'ai fait comme suit:

Créez une barre d'application supplémentaire avec un bouton de retour personnalisé (dans ce cas avec un FloatingActionButton). Vous pouvez toujours ajouter des widgets dans le 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();
  }
}

Dans le lien suivant, vous pouvez trouver plus d'informations Lien

0
Juanes30

Vous pouvez essayer ce code fonctionne pour moi

@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(),
              ),
            ),
          )
        ],
      ),
    );
  }

image de fond

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