Usare le SliverAppBar in Flutter

In Flutter le SliverAppBar sono delle app bar potenziate, con delle impostazioni in più per quanto riguarda il layout e lo stile.

In sostanza abbiamo la possibilità di controllarne il comportamento quando facciamo lo scroll, come avviene in molti menu dei siti web.

In questo articolo vediamo un paio di esempi.

Cominciamo da questo:

import 'package:flutter/material.dart';
import 'package:intl_phone_field/intl_phone_field.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 150.0,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text('App Bar'),
            ),
            pinned: true,
            snap: false,
            floating: false,
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (_, int index) {
                return ListTile(
                  leading: Container(
                    padding: const EdgeInsets.all(8),
                    width: 100,
                    child: const Placeholder(),
                  ),
                  title: Text('Place ${index + 1}'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

Per le impostazioni durante lo scroll dovete sperimentare con:

• pinned
• snap
• floating

Inoltre potete anche impostare una immagine come background in maniera molto easy.

Infine doevete notare che stiamo usando anche una SliverList, in quanto non possiamo usare gli oggetti "classici" che siamo abituati ad usare.

Ovviamente possiamo anche usare la classica AppBar dentro alla SliverAppBar, ad esempio per metterci una casella di testo:

import 'package:flutter/material.dart';
import 'package:intl_phone_field/intl_phone_field.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Test',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(
          seedColor: Colors.deepPurple,
        ),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // appBar: AppBar(
      //   backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      //   title: const Text('Flutter Test'),
      // ),
      body: CustomScrollView(
        slivers: [
          SliverAppBar(
            expandedHeight: 150.0,
            flexibleSpace: const FlexibleSpaceBar(
              title: Text('App Bar'),
            ),
            pinned: true,
            snap: false,
            floating: false,
            backgroundColor: Theme.of(context).colorScheme.inversePrimary,
            bottom: AppBar(
              title: const SizedBox(
                height: 45,
                child: TextField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    hintText: 'Cerca...',
                  ),
                ),
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (_, int index) {
                return ListTile(
                  leading: Container(
                    padding: const EdgeInsets.all(8),
                    width: 100,
                    child: const Placeholder(),
                  ),
                  title: Text('Place ${index + 1}'),
                );
              },
              childCount: 20,
            ),
          ),
        ],
      ),
    );
  }
}

In classico stile Flutter possiamo combinare i vari widget; vi basta solo sperimentare!

Enjoy!