FlexibleSpaceBar

main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter/services.dart';


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

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      debugShowCheckedModeBanner: false,
      home: ProfileScreen(),
    );
  }
}

class ProfileScreen extends StatelessWidget {
  const ProfileScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.transparent,
      extendBody: true,
      body: CustomScrollView(
        physics: const ClampingScrollPhysics(),
        slivers: [
          SliverPersistentHeader(
            delegate: ProfileAppBar(),
            pinned: true,
            floating: true,
          ),
          SliverFillRemaining(
            child: Container(color: Colors.black),
          ),
        ],
      ),
    );
  }
}

class ProfileAppBar extends SliverPersistentHeaderDelegate {

  static final appBarColorTween = ColorTween(
    begin: Colors.transparent,
    end: Colors.blue,
  );
  static final appbarIconColorTween = ColorTween(
    begin: Colors.blue,
    end: Colors.white,
  );

  @override
  Widget build(
    BuildContext context,
    double shrinkOffset,
    bool overlapsContent,
  ) {
    final relativeScroll = min(shrinkOffset, 300) / 300;
    return AppBar(
      automaticallyImplyLeading: false,
      backgroundColor: appBarColorTween.transform(relativeScroll),
      systemOverlayStyle:
          appBarColorTween.transform(relativeScroll) == Colors.transparent
              ? SystemUiOverlayStyle.dark
              : SystemUiOverlayStyle.light,
      flexibleSpace: FlexibleSpaceBar(),
    );
  }

  @override
  double get maxExtent => 380.0;

  @override
  double get minExtent =>
      AppBar().preferredSize.height;

  @override
  bool shouldRebuild(ProfileAppBar oldDelegate) {
    return true;
  }

  @override
  OverScrollHeaderStretchConfiguration get stretchConfiguration =>
      OverScrollHeaderStretchConfiguration(
        stretchTriggerOffset: maxExtent,
      );
}