flutter / flutter/flutter

Incorrect color context

Open
#170,571 3 comments 0 reactions 0 assignees View on GitHub
f: scrolling found in release: 3.32 found in release: 3.33 has reproducible steps p: material_ui P2 package team-design triaged-design
Dominant language
Dart
Stars
179k
Forks
31.1k
PR merge metrics
PR metrics pending

Description

### Steps to reproduce

Hello!

1) run example
2) press the 'switch' button (I've attached a video)
3) look at the tabs
4) change
'class CustomScrollBehavior extends ScrollBehavior {'
to
'class CustomScrollBehavior extends MaterialScrollBehavior {'
fixed
5) I can't tell exactly what causes the problem, sometimes everything is fine, but most often the problem is present

### Expected results

correct theme change

### Actual results

incorrect theme change

### Code sample

Code sample

```dart
import 'dart:ui';
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

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

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

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

class _MyAppState extends State {
bool isDark = false;

void switchBrightness() {
setState(() {
isDark = !isDark;
});
}

@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Bug',
scrollBehavior: CustomScrollBehavior(),
theme: ThemeData(
colorScheme: ColorScheme.fromSeed(
seedColor: Color(0xff6750a4),
brightness: !isDark ? Brightness.light : Brightness.dark,
dynamicSchemeVariant: DynamicSchemeVariant.tonalSpot,
),
useMaterial3: true,
),
debugShowCheckedModeBanner: false,
home: PageNavigator(onBrightnessChange: switchBrightness),
// home: MainScreen(onBrightnessChange: switchBrightness),
);
}
}

class PageNavigator extends StatefulWidget {
const PageNavigator({super.key, required this.onBrightnessChange});

final VoidCallback onBrightnessChange;

@override
State createState() => _PageNavigatorState();
}

class _PageNavigatorState extends State {
late int currentPageIndex = 0;

@override
Widget build(BuildContext context) {
return Scaffold(
bottomNavigationBar: NavigationBar(
onDestinationSelected: (int index) {
if (currentPageIndex != index) {
setState(() {
currentPageIndex = index;
});
}
},
selectedIndex: currentPageIndex,
destinations: [
NavigationDestination(
icon: Icon(Icons.home),
label: 'Main',
tooltip: '',
),
NavigationDestination(
icon: Icon(Icons.date_range_rounded),
label: 'Daily',
tooltip: '',
),
],
),
body: [
MainScreen(onBrightnessChange: widget.onBrightnessChange), // main
Container(), // daily
][currentPageIndex],
);
}
}

class MainScreen extends StatefulWidget {
const MainScreen({super.key, required this.onBrightnessChange});

final VoidCallback onBrightnessChange;

@override
State createState() => _MainScreenState();
}

class _MainScreenState extends State {
final List tabs = [
'All',
'New',
"Books",
"Anime",
"Sport",
"Movies",
"Flowers",
"Games",
];

@override
Widget build(BuildContext context) {
// var colorScheme = Theme.of(context).colorScheme;
return DefaultTabController(
length: tabs.length,
child: Scaffold(
body: NestedScrollView(
floatHeaderSlivers: true,
headerSliverBuilder: (BuildContext context, bool innerBoxIsScrolled) {
return [
SliverOverlapAbsorber(
handle: NestedScrollView.sliverOverlapAbsorberHandleFor(
context,
),
sliver: SliverAppBar(
title: Text(
'Main',
style: TextStyle(fontWeight: FontWeight.bold),
),
centerTitle: false,
pinned: true,
forceElevated: innerBoxIsScrolled,
),
),
SliverPersistentHeader(
pinned: true,
delegate: _SliverTabBarDelegate(
TabBar(
onTap: (_) {},
tabs: tabs.map((String name) => Tab(text: name)).toList(),
isScrollable: true,
tabAlignment: TabAlignment.start,
labelStyle: Theme.of(context).textTheme.titleMedium
?.copyWith(
color: Theme.of(context).colorScheme.primary,
fontWeight: FontWeight.bold,
),
dividerHeight: 0,
),
),
),
];
},
body: TabBarView(
children: [
for (int i = 0; i < tabs.length; ++i)
Center(
child: FilledButton(
onPressed: () {
widget.onBrightnessChange.call();
},
child: Text('Switch'),
),
),
],
),
),
),
);
}
}

// class CustomScrollBehavior extends MaterialScrollBehavior {
// class CustomScrollBehavior extends CupertinoScrollBehavior {
class CustomScrollBehavior extends ScrollBehavior {
@override
Set get dragDevices => const {...PointerDeviceKind.values};
}

class _SliverTabBarDelegate extends SliverPersistentHeaderDelegate {
_SliverTabBarDelegate(this.tabBar);
final TabBar tabBar;

@override
Widget build(
BuildContext context,
double shrinkOffset,
bool overlapsContent,
) {
print('rebuild');
return Container(
color: Theme.of(context).colorScheme.surface,
padding: EdgeInsets.symmetric(horizontal: 8),
child: Stack(
children: [
Row(
children: [
Expanded(child: tabBar),
SizedBox(width: 4),
IconButton(icon: Icon(Icons.menu), onPressed: () {}),
],
),
Align(
alignment: Alignment.bottomCenter,
child: Divider(height: 1, thickness: 1),
),
],
),
);
}

@override
double get maxExtent => tabBar.preferredSize.height;

@override
double get minExtent => tabBar.preferredSize.height;

@override
bool shouldRebuild(SliverPersistentHeaderDelegate oldDelegate) {
return false;
}
}

```

### Screenshots or Video

Screenshots / Video demonstration

google drive
https://drive.google.com/file/d/1EdH8ejB2f-Jvyt31pSSaa3x-QEkKOw1e/view?usp=share_link

![Image](https://github.com/user-attachments/assets/e184b440-036f-40e1-81c4-bb3c7ce48d61)

### Logs

Logs

```console
[Paste your logs here]
```

### Flutter Doctor output

Doctor output

```console
[✓] Flutter (Channel stable, 3.32.3, on macOS 15.5 24F74 darwin-arm64, locale ru-RU) [673ms]
• Flutter version 3.32.3 on channel stable at /Users/denis/Development/flutter
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 5c1433509f (34 hours ago), 2025-06-11 13:12:24 -0700
• Engine revision 31c4875c7a
• Dart version 3.8.1
• DevTools version 2.45.1

[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0) [4,8s]
• Android SDK at /Users/denis/Library/Android/sdk
• Platform android-35, build-tools 35.0.0
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
This is the JDK bundled with the latest Android Studio installation on this machine.
To manually set the JDK path, use: `flutter config --jdk-dir="path/to/jdk"`.
• Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 16.3) [2,9s]
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 16E140
• CocoaPods version 1.16.2

[✓] Chrome - develop for the web [14ms]
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.2) [14ms]
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• Java version OpenJDK Runtime Environment (build 21.0.3+-79915917-b509.11)

[✓] VS Code (version 1.101.0) [11ms]
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.112.0
```

Contributor guide

Open the contributing guide

Research direction

Start by reproducing the supplied Dart sample with CustomScrollBehavior extending ScrollBehavior, then compare it with MaterialScrollBehavior while switching the app brightness. Inspect the NestedScrollView, SliverPersistentHeader, TabBar, and theme changes shown in the sample; done means the tabs and surrounding UI consistently update to the correct theme without requiring the workaround.

Written by the indexing model from the issue text.

Assessment

Tech stack
dart, flutter
Domain
frontend, mobile-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
32/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.