flutterdartsliverappbar

SliverAppbar has a bluish tint

I have used a SliverAppBar in a widget for which the code is as follows;

import 'package:flutter/material.dart';

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: CustomScrollView(
        physics: const BouncingScrollPhysics(),
        slivers: [
          SliverAppBar(
            pinned: true,
            floating: false,
            snap: false,
            backgroundColor: Theme.of(context).appBarTheme.backgroundColor,
            elevation: 1,
            expandedHeight: 100.0,
            flexibleSpace: FlexibleSpaceBar(
              background: Image.asset(
                'assets/images/content/Update.png',
                fit: BoxFit.cover,
              ),
            ),
          ),
          SliverList(
            delegate: SliverChildBuilderDelegate(
              (context, index) => ListTile(title: Text('Item #$index')),
              childCount: 1000,
            ),
          )
        ],
      ),
    );
  }
}

My themedata has been configured to look like this;

final theme = ThemeData(
  useMaterial3: true,
  colorScheme: ColorScheme.fromSeed(
    seedColor: const Color.fromARGB(255, 41, 41, 41),
    primary: const Color.fromARGB(255, 41, 41, 41),
    primaryContainer: const Color.fromARGB(20, 41, 41, 41),
    secondary: const Color.fromARGB(255, 80, 80, 80),
    background: const Color.fromARGB(255, 255, 255, 255),
  ),
  textTheme: GoogleFonts.poppinsTextTheme(),
  appBarTheme: const AppBarTheme(
    backgroundColor: Color.fromARGB(255, 255, 255, 255),
  ),
  splashFactory: NoSplash.splashFactory,
);

When I scroll, the SliverAppBar has this strange bluish tint to it which I cannot understand why or how is coming. I want the appbar to have the color of the background or just be "transparent" so that it looks like part of the entire page as a single unit. Currently it looks like a different thing compared to the entire page.

enter image description here enter image description here

The other workaround would be to create a custom appbar which would be "fixed" to the top when scrolling is detected but I want to go with the appbar approach.

Solution

  • This is happening because Material transparency which you are specifying is in itself set to false by default in all AppBars and Sliver AppBars while they are being scrolled.

    To remove them, set

    forceMaterialTransparency: true

    It will definetly work. Let me know if it doesn't :) And please mark the answer if it helped you.