it-swarm.com.de

Wie kann ich eine benutzerdefinierte App-Leiste in Flatter-App erstellen?

So was

Mein Ansatz: ein Scaffold ohne AppBar und Body: Stack> [Bild, Listenansicht]

5
AjayKumar

Flutter wird mit einer Reihe sogenannter "Sliver" -Widgets geliefert, die verwendet werden können, um verschiedene Effekte basierend auf den Bildlaufaktionen des Benutzers zu erzielen. Standardmäßig ist es ziemlich einfach, einen ähnlichen Effekt zu erzielen wie in den Material Design-Richtlinien ¹, wobei der Titel am unteren Rand des Heldenbilds ziemlich groß beginnt und dann nach oben animiert wird, wenn der Benutzer auf der Seite nach unten scrollen soll.

Um diesen Effekt zu erzielen, können Sie eine CustomScrollView mit einer SliverAppBar am oberen Rand und einige andere Splitterkomponenten darunter wie diese verwenden:

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

¹ Blättern Sie in den Material Design Richtlinien zu "Flexibler Raum mit Bild"

9
sindrenm

Die Appbar verfügt über eine Überschrift, einen Titel, eine Aktion, einen flexiblen Bereich und einen unteren Bereich. Wenn Sie all dies verwenden, können Sie die Appbar durch Hinzufügen von Symbol, Bild, Überschrift und Titel gestalten. der untere Code demonstriert die Kostüm-Appbar mit Symbol, Überschrift, Titel und Bild. Bildbeschreibung hier eingeben

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