Recentemente enfrentei o seguinte problema: tenho um cartão dentro de uma ListView. Queria dar um tema ao cartão definindo a cor, Theme.of(context).colorScheme.surfaceContainer
mas o problema agora é que quando alterno o tema, a cor não é atualizada.
Criei um exemplo mínimo reproduzível deste problema aqui
import 'package:flutter/material.dart';
void main() {
runApp(const MainApp());
}
class MainApp extends StatefulWidget {
const MainApp({super.key});
@override
State<MainApp> createState() => _MainAppState();
}
class _MainAppState extends State<MainApp> {
ThemeMode _themeMode = ThemeMode.light;
@override
Widget build(BuildContext context) {
return MaterialApp(
debugShowCheckedModeBanner: false,
theme: ThemeData(),
darkTheme: ThemeData(brightness: Brightness.dark),
themeMode: _themeMode,
home: Scaffold(
body: Padding(
padding: const EdgeInsets.all(8.0),
child: Center(
child: Column(
spacing: 8,
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: () {
setState(() {
_themeMode = _themeMode == ThemeMode.light
? ThemeMode.dark
: ThemeMode.light;
});
},
child: Text("Change Theme")),
Expanded(child: MyList())
],
)),
),
),
);
}
}
class MyList extends StatelessWidget {
const MyList({super.key});
@override
Widget build(BuildContext context) {
return ListView.builder(
itemCount: 10,
itemBuilder: (context, index) {
return Card(
color: Theme.of(context).colorScheme.surfaceContainer,
child: ListTile(
title: Text('Item $index'),
),
);
});
}
}
Ao abrir o aplicativo, tudo parece como esperado:
Agora clico no botão "Alterar tema" e acontece isto:
Não tenho certeza se é algo que estou esquecendo ou um problema com a estrutura do Flutter (improvável).
Tentei remover o ListView
, e ter apenas um Card
dentro do widget resolve o problema, mas é claro que, para meu aplicativo real, preciso que os cartões estejam em um ListView
.
Observe também que, ao rolar, se o cartão sair da tela e depois for rolado de volta para a tela, ele buscará novamente a cor e será exibido corretamente.
Pensei em perguntar aqui antes de levantar um problema no repositório Flutter no GitHub.
Renomeie
context
o parâmetro dentro do ListView.builderitemBuilder
para evitar conflitos com o contexto do método de construção.