I am utilizing themes with mild and darkish colour schemas in Flutter cellular app. It really works wonderful in all Widgets besides a ListWiev.separated. My code:
ListView.separated(
itemCount: itemsList.size,
separatorBuilder: (BuildContext context, int index) =>
const SizedBox(
peak: 4.0,
),
itemBuilder: (BuildContext context, int index) {
return InkWell(
onTap: () {
Supplier.of<PlayerManager>(context, pay attention: false)
.play(index: index);
},
youngster: SizedBox(
peak: 48,
youngster: Card(
colour: index.isEven
? Theme.of(context).colorScheme.surfaceVariant
: null,
youngster: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
youngsters: [
Padding(
padding: const EdgeInsets.only(left: 6.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.start,
children: [
Text(
itemsList[index]
.quantity
.toString()
.padLeft(3),
model: Theme.of(context)
.textTheme
.displaySmall!
.copyWith(
colour: Theme.of(context)
.colorScheme
.onSurfaceVariant),
),
const SizedBox(
width: 16,
),
SizedBox(
width: 282,
youngster: Textual content(itemsList[index].title,
overflow: TextOverflow.ellipsis,
maxLines: 1,
model: Theme.of(context)
.textTheme
.displaySmall!
.copyWith(
colour: Theme.of(context)
.colorScheme
.onSurfaceVariant)),
),
const SizedBox(
width: 8,
),
],
),
),
Supplier.of<PlayerManager>(context)
.buttonState ==
ButtonState.taking part in &&
Supplier.of<PlayerManager>(context)
.currentItemIndex ==
index
? Padding(
padding:
const EdgeInsets.solely(proper: 2.0),
youngster: MyAnimatedIcon(
icon: Icons.play_circle,
colour: Theme.of(context)
.colorScheme
.main,
backgroundColor: Theme.of(context)
.colorScheme
.main
.withOpacity(0.7),
iconSize: 28,
animationMagnifier: 1.14,
),
)
: Padding(
padding:
const EdgeInsets.solely(proper: 8.0),
youngster: Icon(
Icons.play_arrow,
measurement: 24,
colour: Theme.of(context)
.colorScheme
.onSurfaceVariant,
),
),
],
),
),
),
);
}),
So, I attempted with Supplier:
Supplier.of<ProfileManager>(context).darkMode ? Theme.of(context).colorScheme.main : Theme.of(context).colorScheme.secondary
In actual fact, I wanted one thing that returned the identical colour scheme no matter whether or not darkish mod was enabled, however each variants did not work.
Apparently, the above code labored once I deserted the colour scheme and used particular colours e.g.:
Supplier.of<ProfileManager>(context).darkMode ? Colours.yellow : Colours.blue
However this implies giving up all the benefits of Shade Scheme. I lastly discovered the most effective answer: extract all of the code from ItemBuilder right into a separate widget:
ListView.separated(
itemCount: itemsList.size,
separatorBuilder: (BuildContext context, int index) =>
const SizedBox(
peak: 4.0,
),
itemBuilder: (BuildContext context, int index) {
return ListItem(
merchandise: itemsList[index],
index: index,
);
}),
And now, in my widget ItemsList, every thing works as anticipated. I can use ColorScheme, e.g.:
colour: Theme.of(context).colorScheme.onSurfaceVariant),
and a colour adjustments once I change the theme from darkish to mild. However why does it work this manner? Why would not ColorScheme work immediately in ListView?
