I have the two following pieces of code, and the content of body when scrolled clip in a bad way to the AppBar, I aim to have the edge as the edges of the image and not as a rectangle.

Scaffold(
        backgroundColor: kColorBg,
        extendBody: true,
        extendBodyBehindAppBar: true,
        appBar: kAppBar("Pagamenti"),
        body: const SafeArea(child: Body()),
        // floatingActionButton: FloatingActionButton(onPressed: _onPressed, backgroundColor: kColorLogo, child: const Icon(Icons.add, size: kRadiusPicture,)),
      ),

AppBar kAppBar(String title) {
double fontSize = 26.0;
double x = 160.0;
double y = 35.0;
  return AppBar(
    centerTitle: true,
    toolbarHeight: 100,
    flexibleSpace: ClipRRect(
      clipBehavior: Clip.antiAlias,
      borderRadius: BorderRadius.only(bottomLeft: Radius.elliptical(x, y), bottomRight: Radius.elliptical(x, y)),
      child: Container(
        height: 200,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.only(bottomLeft: Radius.elliptical(x, y), bottomRight: Radius.elliptical(x, y)),
          image: DecorationImage(
            image: AssetImage(R.pngImages.illustrazione_interna),
            fit: BoxFit.fill,
            colorFilter: const ColorFilter.mode(kColorPrimary, BlendMode.dstATop)
          ),
        ),
      ),
    ),
    elevation: 0,
    title: Text(title, style: TextStyle(fontSize: fontSize, color: kColorWhite, fontFamily: 'Roboto', fontWeight: FontWeight.w700)),
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.only(bottomLeft: Radius.elliptical(x, y), bottomRight: Radius.elliptical(x, y))
    ),
    shadowColor: Colors.red,
    foregroundColor: Colors.white,
    backgroundColor: Colors.red,
  );
}

Sorry for the bad english, and thank you for your time.

EDIT: If I set to Colors.transparent both scaffold and the appbar a have this.

CodePudding user response：

Do you try to set background transparent yet?

UPDATE: Accepted in comment below

Scaffod(
  ...
  backgroundColor: Colors.transparent,
  appbar: AppBar(
    ...
    backgroundColor: Colors.transparent,
    elevation: 0.0,
    ...
  ),
  body: Container(
    color: Colors.red, // <your body color>,
    ...
  ),
  ...
)

CodePudding user response：

To resolve the issue try to remove Appbar and use another widget of your choice using Column, which might help you to create the Customised Appbar

CodePudding user response：

The problem is the usage of SafeArea, if you remove it from before the body it will work.