web-dev-qa-db-fra.com

Comment ajouter un dégradé de couleur dans AppBar en mode flutter

Je veux ajouter une couleur de dégradé dans AppBar si oui, comment puis-je le faire sinon, dois-je créer un conteneur et créer une colonne dans la colonne pour créer une boîte et une couleur de dégradé?.

flutter
13
MietieMn

Je ne crois pas que vous puissiez transmettre un dégradé à une barre d’application car il attend une couleur plutôt qu’un dégradé.

Toutefois, vous pouvez créer votre propre widget imitant une barre d’application, sauf en utilisant un dégradé. Jetez un oeil à cet exemple que j'ai reconstitué à partir du tutoriel Planets-Flutter avec le code situé en dessous.

enter image description here

import "package:flutter/material.Dart";

class Page extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Column(children : <Widget>[new GradientAppBar("Custom Gradient App Bar"), new Container()],);
  }
}


class GradientAppBar extends StatelessWidget {

  final String title;
  final double barHeight = 50.0;

  GradientAppBar(this.title);

  @override
  Widget build(BuildContext context) {
    final double statusbarHeight = MediaQuery
        .of(context)
        .padding
        .top;

    return new Container(
      padding: new EdgeInsets.only(top: statusbarHeight),
      height: statusbarHeight + barHeight,
      child: new Center(
        child: new Text(
          title,
          style: new TextStyle(fontSize: 20.0, color: Colors.white, fontWeight: FontWeight.bold),
        ),
      ),
      decoration: new BoxDecoration(
        gradient: new LinearGradient(
            colors: [Colors.red, Colors.blue],
            begin: const FractionalOffset(0.0, 0.0),
            end: const FractionalOffset(0.5, 0.0),
            stops: [0.0, 1.0],
            tileMode: TileMode.clamp
        ),
      ),
    );
  }
}

J'espère que cela t'aides. Faites moi savoir si vous avez des questions.

19
Mans

AppBar n'a pas cette fonctionnalité par défaut. Mais vous pouvez créer un widget de type AppBar qui aura un arrière-plan dégradé comme suit:

  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new PreferredSize(
        child: new Container(
          padding: new EdgeInsets.only(
            top: MediaQuery.of(context).padding.top
          ),
          child: new Padding(
            padding: const EdgeInsets.only(
              left: 30.0,
              top: 20.0,
              bottom: 20.0
            ),
            child: new Text(
              'Arnold Parge',
              style: new TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w500,
                color: Colors.white
              ),
            ),
          ),
          decoration: new BoxDecoration(
            gradient: new LinearGradient(
              colors: [
                Colors.red,
                Colors.yellow
              ]
            ),
            boxShadow: [
              new BoxShadow(
                color: Colors.grey[500],
                blurRadius: 20.0,
                spreadRadius: 1.0,
              )
            ]
          ),
        ),
        preferredSize: new Size(
          MediaQuery.of(context).size.width,
          150.0
        ),
      ),
      body: new Center(
        child: new Text('Hello'),
      ),
    );
  }

Ici, boxShadow donnera une sensation élevée.

8
Arnold Parge