flutter appbar (sliver)

main.dart

// Copyright 2019 the Dart project authors. All rights reserved.
// Use of this source code is governed by a BSD-style license
// that can be found in the LICENSE file.

import 'package:flutter/cupertino.dart' as cp;
import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  final String title;

  const MyHomePage({
    super.key,
    required this.title,
  });

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

class _MyHomePageState extends State<MyHomePage> {

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: CustomScrollView(slivers: [
      HeaderSliverAppBar(),
      SliverList(
          delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('$index')))),
    ]));
  }
}

/// {@template header_sliver_appbar}
/// Home header for [SliverAppBar] with custom animation
/// {@endtemplate}
class HeaderSliverAppBar extends StatelessWidget {
  /// {@macro header_sliver_appbar}
  HeaderSliverAppBar({
    super.key,
  });
  final TextEditingController _searchFieldController = TextEditingController();

  @override
  Widget build(BuildContext context) => SliverAppBar.medium(
        backgroundColor: Theme.of(context).scaffoldBackgroundColor,
        title: HeaderSearchView(searchFieldController: _searchFieldController),
        centerTitle: true,
        actions: [
          IconButton(
            onPressed: () => {},
            icon: const Icon(Icons.abc),
          ),
        ],
        leading: IconButton(
          icon: const Icon(
            Icons.notifications_active_rounded,
            color: Colors.red,
          ),
          onPressed: () => {},
        ),
        flexibleSpace: FlexibleSpaceBar(
          background: Padding(
            padding: const EdgeInsets.only(
              top: 2,
              bottom: 8,
              left: 18,
              right: 18,
            ),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.end,
              children: [
                HeaderSearchView(
                  searchFieldController: _searchFieldController,
                ),
              ],
            ),
          ),
        ),
      );
}

/// {@template HeaderSearchView}
/// Custom search text field
/// {@endtemplate}
class HeaderSearchView extends cp.StatelessWidget {
  /// {@macro HeaderSearchView}
  const HeaderSearchView({
    required cp.TextEditingController searchFieldController,
    super.key,
  }) : _searchFieldController = searchFieldController;

  final cp.TextEditingController _searchFieldController;

  @override
  cp.Widget build(cp.BuildContext context) => cp.CupertinoSearchTextField(
        controller: _searchFieldController,
        decoration: cp.BoxDecoration(
          color: Colors.white,
          borderRadius: const BorderRadius.all(
            Radius.circular(8),
          ),
          boxShadow: <BoxShadow>[
            BoxShadow(
              offset: const Offset(0, -2),
              blurRadius: 6,
              spreadRadius: 4,
              color: Colors.black.withOpacity(0.05),
            ),
            BoxShadow(
              offset: const Offset(0, 4),
              blurRadius: 8,
              spreadRadius: 4,
              color: Colors.black.withOpacity(0.05),
            ),
          ],
        ),
        prefixInsets: const EdgeInsets.only(
          left: 8,
        ),
        style: Theme.of(context).textTheme.titleLarge,
        placeholder: 'Search',
      );
}