Flutter - Gradient Not Fully Covering Image in SliverAppBar

27 Views Asked by At

Hello Flutter community,

I am encountering a visual issue with a SliverAppBar in my Flutter application. I've implemented a SliverAppBar which contains a background image and a gradient overlay. The intent is for the gradient to cover the entire image, creating a smooth transition effect. However, I am noticing a thin, unsightly line at the bottom of the image where the gradient does not seem to fully cover.

Here's the relevant part of my code:

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

  @override
  Widget build(BuildContext context) {
    AppDataController appDataController = Get.find<AppDataController>();
    return SliverAppBar(
      pinned: false,
      snap: false,
      floating: false,
      expandedHeight: MediaQuery.of(context).size.height * 0.25,
      flexibleSpace: FlexibleSpaceBar(
        title: Text(appDataController.theatre.name),
        centerTitle: true,
        background: SizedBox(
          height: MediaQuery.of(context).size.height * 0.25,
          child: Stack(
            fit: StackFit.expand,
            children: <Widget>[
              Container(
                decoration: BoxDecoration(
                  image: DecorationImage(
                    image: CachedNetworkImageProvider(
                      appDataController.theatre.image,
                    ),
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              DecoratedBox(
                decoration: BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.bottomCenter,
                    end: Alignment.center,
                    colors: [
                      Colors.black.withOpacity(1),
                      Colors.transparent,
                    ],
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Problem with gradient

The issue seems to be with the gradient not extending fully to the bottom of the image. There's a very slight line at the end of the photo that is not covered by the gradient. This is visually unappealing and I'm looking to eliminate this discrepancy.

I've tried adjusting the gradient stops and alignments but haven't had any success in resolving the issue. I'm wondering if there's a particular detail I'm missing or if there's a known workaround for this kind of problem.

Any suggestions or insights would be greatly appreciated. Thank you in advance for your help!

0

There are 0 best solutions below