ReorderableListView not updating after using Get.changeThemeMode in Flutter

29 Views Asked by At

I am currently developing an app in Flutter and I stumbled upon a bug. I have a ReorderableListView that works just fine with one exception, that being when I use the button that I created for changing the theme that is located on the same tab. If I try to delete/add/reorder an item from the list after I change the theme, it doesn't update.

The list delete/reorder/add functions work just fine when I don't change the theme prior to using these functions.

This is the code for the button that changes themes:

class ProfileAppBar extends StatelessWidget implements PreferredSizeWidget{
  const ProfileAppBar({
    super.key,
  });

  @override
  Widget build(BuildContext context) {
    return AppBar(
      leading: IconButton(
        onPressed: () => Get.back(),
        icon: const Icon(LineAwesomeIcons.angle_left),
      ),
      title: Text(
        gProfile,
        style: Theme.of(context).textTheme.titleLarge,
      ),
      actions: [
        IconButton(
            onPressed: () {
              Get.changeThemeMode(
                  Get.isDarkMode ? ThemeMode.light : ThemeMode.dark);
            },
            icon:
            Icon(Get.isDarkMode ? LineAwesomeIcons.sun : LineAwesomeIcons.moon)),
      ],
    );
  }

  @override
  // TODO: implement preferredSize
  Size get preferredSize => const Size.fromHeight(55);
}

This is the code for the reorderable list:

class InterestsListWidget extends StatefulWidget {
  const InterestsListWidget({
    super.key,
  });

  @override
  State<StatefulWidget> createState() => _InterestsListWidgetState();
}

class _InterestsListWidgetState extends State<InterestsListWidget> {
  final userRepo = Get.put(UserRepository());
  final controller = Get.put(ProfileController());
  List<String>? userInterestsList = [];

  @override
  Widget build(BuildContext context) {
    userInterestsList = userRepo.mostRecentUserData.userInterestList;

    return Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        SizedBox(
          height: 80 * userInterestsList!.length.toDouble(),
          child: ReorderableListView.builder(
              physics: const NeverScrollableScrollPhysics(),
              itemCount: userInterestsList!.length,
              onReorder: (oldIndex, newIndex) => setState(() {
                    final index = newIndex > oldIndex ? newIndex - 1 : newIndex;

                    controller.removeAllFromRecord(userInterestsList!);

                    final userInterest = userInterestsList?.removeAt(oldIndex);
                    userInterestsList?.insert(index, userInterest!);

                    controller.addMultipleToRecord(userInterestsList!);
                  }),
              itemBuilder: (context, index) {
                final userInterest = userInterestsList?[index];
                return buildUser(index, userInterest!);
              }),
        ),
        if (userInterestsList!.length < gMaxNoInterest)
          Container(
            padding: const EdgeInsets.all(16.0),
            child: DottedBorder(
              color: Colors.grey,
              borderType: BorderType.RRect,
              radius: const Radius.circular(20),
              dashPattern: const [6],
              child: SizedBox(
                width: double.infinity,
                child: ElevatedButton(
                  onPressed: () => createEnvironmentToAdd(this),
                  style: ElevatedButton.styleFrom(
                    backgroundColor: Colors.transparent,
                    elevation: 0,
                    foregroundColor: Colors.grey,
                    side: const BorderSide(
                      style: BorderStyle.none,
                    ),
                  ),
                  child: const Text(gAddPreference),
                ),
              ),
            ),
          ),
      ],
    );
  }

  Widget buildUser(int index, String userInterest) {
    return ListTile(
      key: ValueKey(index),
      contentPadding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
      leading: CircleAvatar(
        radius: 30.0 - (index * 2),
        backgroundColor: gPrimaryColor.withOpacity(0.8),
        child: Text(
          (index + 1).toString(), // Replace with your number
          style: TextStyle(
            color: index < 3
                ? interestRanking[index]
                : gDarkColor.withOpacity(0.7),
            fontWeight: FontWeight.bold,
            fontSize: 21.0,
          ),
        ),
      ),
      title: Text(
        userInterest,
        style: Theme.of(context).textTheme.bodyMedium,
      ),
      trailing: IconButton(
        icon: const Icon(Icons.delete_sweep, color: gRedColor),
        onPressed: () {
          controller.removeFromRecord(userInterestsList![index]);
          removeInterest(index);
        },
      ),
    );
  }

  void removeInterest(int index) =>
      setState(() => userInterestsList?.removeAt(index));

  void addInterest(String userInterestToBeAdded) =>
      setState(() => userInterestsList?.insert(
          userInterestsList!.length, userInterestToBeAdded));

  void createEnvironmentToAdd(_InterestsListWidgetState parent) {
    showModalBottomSheet(
      context: context,
      builder: (BuildContext context) {
        return ChoicesBottomSheetWidget(parent: parent);
      },
    );
  }
}

Please Help!

I was expecting the list to update visually, from what I could gather it updates the list variable but not the visual representation.

0

There are 0 best solutions below