Content disappeared before app-bar curve started in flutter

Question

This is the first screen I designed, curved appbar using clip-path, whine I scroll my content disappeared before curve started, 2n screen showing

in 2n screen when I scroll it app content disappeared before the curve started, I want to achieve disappeared app content where the clip-path curve started

-------------------------------------------------

flutter info:

Flutter (Channel stable, 2.10.4, on Microsoft Windows [Version 10.0.19044.1586], locale en-US) • Flutter version 2.10.4 at C:\Flutter Dev\flutter • Upstream repository https://github.com/flutter/flutter.git • Framework revision c860cba910 (2 weeks ago), 2022-03-25 00:23:12 -0500 • Engine revision 57d3bac3dd • Dart version 2.16.2 • DevTools version 2.9.2

Answer 1

Since you didn't provide your code I can't point out what the problem is. I write this demo for your question, using Stack and CustomPaint to create curve above your body. Hope it help.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  static const String _title = 'Flutter Code Sample';

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: _title,
      home: Scaffold(
        appBar: AppBar(title: const Text(_title), elevation: 0),
        body: Stack(children: [
          ListView(
            children: List.generate(
              100,
              (i) {
                return ListTile(
                  title: Text(
                    'item $i',
                    textAlign: TextAlign.center,
                  ),
                );
              },
            ),
          ),
          Positioned(
            top: 0,
            left: 0,
            right: 0,
            height: 100,
            child: CustomPaint(
              painter: ShapePainter(),
              child: Container(),
            ),
          ),
        ]),
      ),
    );
  }
}

class ShapePainter extends CustomPainter {
  @override
  void paint(Canvas canvas, Size size) {
    var path = Path();
    path.moveTo(0, 0);
    path.lineTo(size.width, 0);
    path.lineTo(size.width, size.height);
    path.arcToPoint(
      Offset(0, size.height),
      radius: Radius.circular(size.width * 0.7),
      clockwise: false,
    );
    path.close();

    var paint = Paint();
    paint.color = Colors.blue;
    paint.style = PaintingStyle.fill;

    canvas.drawPath(path, paint);
  }

  @override
  bool shouldRepaint(CustomPainter oldDelegate) => true;
}

And this is result

Answer 2

appBar: PreferredSize( preferredSize:const Size.fromHeight(220), child: ClipPath( clipper: CustomAppBarClipper(), child: Container( color: LightColor.appBackground, height: 220, padding: const EdgeInsets.only(top: 60,left: 20,right: 20), child: AppBar( iconTheme:const IconThemeData( color: LightColor.baseColor, //change your color here ), leading: (ModalRoute.of(context)?.canPop ?? false) ? const BackButton() : null, excludeHeaderSemantics: true, title:const Text( 'Honey Badger', style: TextStyle( color: Colors.redAccent, fontSize: 24, fontWeight: FontWeight.bold), ), backgroundColor: Colors.transparent, elevation: 0.0,

        ),
      ),
    ),
  ),