If you use brightness dependent color inside the AnimatedContainer(for example Theme.of(context).colorScheme.onBackground, which is white for dark theme and black for light theme) and change app brightness then AnimatedContainer additionally animates it's color with provided Duration along with Theme switch animation. How to disable this additional animation from AnimatedContainer?
Left image is an AnimatedContainer, right one is a default container
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
ValueNotifier<ThemeData> _theme = ValueNotifier(
ThemeData(brightness: Brightness.dark, backgroundColor: Colors.white),
);
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return ValueListenableBuilder<ThemeData>(
valueListenable: _theme,
builder: (_, theme, __) => MaterialApp(
theme: theme,
title: 'Material App',
home: _Scaffold(),
),
);
}
}
class _Scaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Material App Bar'),
backgroundColor: Theme.of(context).backgroundColor,
),
backgroundColor: Colors.red,
body: Center(
child: Column(
children: <Widget>[
Row(
children: <Widget>[
AnimatedContainer(
curve: Curves.easeInOutCubic,
duration: const Duration(milliseconds: 175),
color: Theme.of(context).backgroundColor,
width: 50.0,
height: 50.0,
margin: const EdgeInsets.all(10.0),
),
Container(
color: Theme.of(context).backgroundColor,
width: 50.0,
height: 50.0,
),
],
),
ElevatedButton(
onPressed: () {
final Brightness newBrightness =
_theme.value.brightness == Brightness.dark
? Brightness.light
: Brightness.dark;
_theme.value = _theme.value.copyWith(
brightness: newBrightness,
backgroundColor: newBrightness == Brightness.dark
? Colors.white
: Colors.black,
);
},
child: const Text('switch brightness'),
),
],
),
),
);
}
}