Tuesday, January 16, 2024
HomeiOS Developmentandroid - Why ColorScheme from ThemeData would not work in ListView.builder/separated (Flutter)?

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


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?



Supply hyperlink

RELATED ARTICLES

LEAVE A REPLY

Please enter your comment!
Please enter your name here

- Advertisment -
Google search engine

Most Popular

Recent Comments