web-dev-qa-db-fra.com

Comment créer une AppBar personnalisée dans Flutter, comme dans une appli Flutter de Hamilton?

Comme ça

Mon approche: un échafaudage sans AppBar et le corps: Stack> [image, listview]

flutter
5
AjayKumar

Flutter est fourni avec un ensemble de widgets appelés «rubans» qui peuvent être utilisés pour obtenir différents effets en fonction des actions de défilement de l'utilisateur. Par défaut, il est assez facile d'obtenir un effet similaire à partir des instructions relatives à la conception des matériaux ¹, où le titre commence assez gros au bas de l'image du héros, puis s'anime jusqu'au sommet lorsque l'utilisateur fait défiler la page.

Pour obtenir cet effet, vous pouvez utiliser un CustomScrollView avec un SliverAppBar en haut et quelques autres composants sliver en dessous, comme ceci:

new CustomScrollView(
  slivers: <Widget>[
    new SliverAppBar(
      pinned: true,
      expandedHeight: 250.0,
      flexibleSpace: new FlexibleSpaceBar(
        title: new Text(_shortTitle),
        background: new Image.network(_imageUrl),
      ),
    ),
    new SliverPadding(
      padding: new EdgeInsets.all(16.0),
      sliver: new SliverList(
        delegate: new SliverChildListDelegate([
          new Text(_longTitle),
          new Text(_body),
          new Text(_author),
          new Text(_body),
        ]),
      ),
    ),
  ],
);

¹ Faites défiler jusqu'à «Espace flexible avec image» dans les directives Conception matérielle .

9
sindrenm

La barre d’application a des titres, titre, action, espace flexible et bas. En utilisant tous ces éléments, nous pouvons concevoir la barre d’application en y ajoutant une icône, une image, un titre et un titre. le code du bas montre la barre de costume avec l'icône, l'en-tête, le titre et l'image. entrez la description de l'image ici

AppBar(
          elevation: 0.0,
          actions: <Widget>[
            Container(
                padding: EdgeInsets.only(right: 5.0),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: <Widget>[
                    Text(
                      'JIMMY FELLON',
                      style: TextStyle(
                        fontSize: 16.0,
                        fontWeight: FontWeight.w600,
                        color: Colors.black87,
                      ),
                    ),
                    Text(
                      'PROJECT OWNER',
                      style: TextStyle(
                        fontSize: 12.0,
                        color: Colors.black54,
                      ),
                    )
                  ],
                )),
            Container(
              child: Column(mainAxisAlignment: MainAxisAlignment.center, children: [
                CircleAvatar(
                  backgroundImage: new NetworkImage(
                      'https://images.pexels.com/photos/736716/pexels-photo-736716.jpeg?auto=compress&cs=tinysrgb&h=350'),
                  radius: 24.0,
                ),
              ]),
            ),
            IconButton(
              icon: new Icon(Icons.more_vert),
              onPressed: () {},
            ),
          ],
        );
0
Tahseen Quraishi