main.dart

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData(
        useMaterial3: true,
        scaffoldBackgroundColor: Colors.blue,
        appBarTheme: AppBarTheme(
          surfaceTintColor: Colors.black,
        ),
      ),
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: ProgressHeader(title: "title"),
      body: ListView.builder(
        padding: EdgeInsets.all(20),
        itemCount: 1000,
        itemBuilder: (cx, i) => Text(i.toString()),
      ),
    );
  }
}

class ProgressHeader extends StatelessWidget implements PreferredSizeWidget {
  ProgressHeader({
    super.key,
    required this.title,
  })  : preferredSize = const Size.fromHeight(64),
        rowSizeKey = GlobalKey();

  final String title;
  final GlobalKey rowSizeKey;

  @override
  final Size preferredSize;

  @override
  Widget build(BuildContext context) {
    return Container(
      clipBehavior: Clip.hardEdge,
      decoration: BoxDecoration(
        borderRadius: BorderRadius.vertical(
          bottom: Radius.circular(26),
        ),
        boxShadow: [
          BoxShadow(
            color: Colors.black.withOpacity(.16),
            blurRadius: 4,
            offset: const Offset(0, 3),
          ),
          BoxShadow(
            color: Colors.black.withOpacity(.16),
            blurRadius: 6,
            offset: const Offset(0, 6),
          )
        ],
      ),
      child: Stack(
        children: [
          LinearProgressIndicator(
            backgroundColor: const Color.fromRGBO(170, 217, 149, 1),
            color: Color.fromRGBO(127, 181, 103, 1),
            minHeight: preferredSize.height,
          ),
          Positioned.fill(
            bottom: 6,
            child: AppBar(
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.vertical(
                  bottom: Radius.circular(30),
                ),
              ),
              backgroundColor: Colors.black,
              foregroundColor: Colors.white,
              title: Text(title),
            ),
          )
        ],
      ),
    );
  }
}