SliverAppBar in Flutter

Kennst du diese Apps, wo die AppBar beim Herunterscrollen verschwindet? Das kannst du in Flutter auch machen. Das Widget hierfür heißt SliverAppBar und das schauen wir uns jetzt genauer an.

Wie verwendet man die SliverAppBar?

Die SliverAppBar kannst du ganz einfach in einem Scaffold einbauen, die als body eine CustomScrollView hat. Das sieht dann so aus:

class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(slivers: <Widget>[
      SliverAppBar(
        pinned: false,
        snap: true,
        floating: true,
        expandedHeight: 200.0,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('Das ist eine SliverAppBar'),
        ),
      ),
      SliverList(delegate: SliverChildListDelegate(widgetList))
    ]));
  }
}

In der SliverAppBar musst du die boolean pinned, snap und floating noch einstellen, damit das Ganze funktioniert. Wenn du willst, dass die AppBar dauerhaft zu sehen ist, setze pinned auf true. Möchtest du aber eine fancy AppBar, die automatisch beim Scrollen verschwindet, dann solltest du pinned auf false lassen und die anderen zwei auf true.

Wie sieht das Ganze jetzt aus?

Um das Ganze zu testen, habe ich noch eine SliverList hinzugefügt, die drei Container beinhaltet. Das sieht so aus:

Den gesamten Code findest du hier

import 'package:flutter/material.dart';
void main() {
  runApp(MyApp());
}
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.lime,
      ),
      home: HomePage(),
    );
  }
}
class HomePage extends StatelessWidget {
  HomePage({Key? key}) : super(key: key);
  final List<Widget> widgetList = [
    Container(
      height: 500,
      width: 200,
      color: Colors.red,
    ),
    Container(
      height: 500,
      width: 200,
      color: Colors.green,
    ),
    Container(
      height: 500,
      width: 200,
      color: Colors.yellow,
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(slivers: <Widget>[
      const SliverAppBar(
        pinned: false,
        snap: true,
        floating: true,
        expandedHeight: 200.0,
        flexibleSpace: FlexibleSpaceBar(
          title: Text('Das ist eine SliverAppBar'),
        ),
      ),
      SliverList(delegate: SliverChildListDelegate(widgetList))
    ]));
  }
}

Wer wissen möchte, wie man die Farbe über der SliverAppBar verändern kann, der wird hier fündig:

[Die Statusbar Farbe in Flutter ändern] (https://flutter.de/artikel/flutter-statusbar-farbe-%C3%A4ndern.html)