iOS Development

android – Why ColorScheme from ThemeData does not work in ListView.builder/separated (Flutter)?

Spread the love


I am utilizing themes with gentle and darkish shade schemas in Flutter cellular app. It really works effective 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, hear: false)
                              .play(index: index);
                        },
                        little one: SizedBox(
                          peak: 48,
                          little one: Card(
                            shade: index.isEven
                                ? Theme.of(context).colorScheme.surfaceVariant
                                : null,
                            little one: 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),
                                        fashion: Theme.of(context)
                                            .textTheme
                                            .displaySmall!
                                            .copyWith(
                                                shade: Theme.of(context)
                                                    .colorScheme
                                                    .onSurfaceVariant),
                                      ),
                                      const SizedBox(
                                        width: 16,
                                      ),
                                      SizedBox(
                                        width: 282,
                                        little one: Textual content(itemsList[index].title,
                                            overflow: TextOverflow.ellipsis,
                                            maxLines: 1,
                                            fashion: Theme.of(context)
                                                .textTheme
                                                .displaySmall!
                                                .copyWith(
                                                    shade: 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),
                                        little one: MyAnimatedIcon(
                                          icon: Icons.play_circle,
                                          shade: 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),
                                        little one: Icon(
                                          Icons.play_arrow,
                                          measurement: 24,
                                          shade: 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

The truth is, I wanted one thing that returned the identical shade scheme no matter whether or not darkish mod was enabled, however each variants did not work.
Curiously, the above code labored after 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 very best 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 little thing works as anticipated. I can use ColorScheme, e.g.:

shade: Theme.of(context).colorScheme.onSurfaceVariant),

and a shade adjustments after I change the theme from darkish to gentle. However why does it work this fashion? Why does not ColorScheme work straight in ListView?

Leave a Reply

Your email address will not be published. Required fields are marked *