main.dart

import 'package:flutter/material.dart';

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

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AppBar Example',
      home: Scaffold(
        backgroundColor: Colors.orange,
        
        // CurvedAppBar
        appBar: PreferredSize(
          preferredSize: Size.fromHeight(kToolbarHeight + 40),
          child: Column(
            children: [
              ColoredBox(
                color: const Color(0xFF733C90),
                child: AppBar(
                  title: Text("Example", style: TextStyle(color: Colors.white)),
                  backgroundColor: Colors.transparent,
                ),
              ),
              Image.asset("assets/app-bar-bottom.png"),
            ],
          ),
        ),
        
        body: SingleChildScrollView(
          clipBehavior: Clip.none,
          child: Column(
            spacing: 8,
            children: [
              Placeholder(),
              Placeholder(),
              Placeholder(),
              Placeholder(),
              Placeholder(),
            ],
          ),
        ),
      ),
    );
  }
}

asset:

https://github.com/user-attachments/assets/bbe048fc-9276-4d6d-a80a-1fc26cc28163 app-bar-bottom.png

example:

Simulator.Screen.Recording.-.iPhone.16.Pro.-.2025-04-24.at.08.32.21.mp4