How to have custom color and border if selected

Question

I wanted to implement a theme picker in my app so I made a dialog and got the title of the theme and the index with which it's going to be chosen class... now I want the dialog to show a border around the selected theme and show the background color of each theme

this is the code I use for the class:

class MultiThemeModel {
  int index;
  String themeName;

  MultiThemeModel({required this.index, required this.themeName});
}

titlesForThemeModel(int index) {
  switch (index) {
    case 0:
      return 'Luxury Purple';
    case 1:
      return 'Red Wine';
  }
  return 'No theme for index';
}

List<MultiThemeModel> get themes => List<MultiThemeModel>.generate(
    2,
    (index) =>
        MultiThemeModel(index: index, themeName: titlesForThemeModel(index)));

List<Widget> get widgets => themes
    .map((themeData) => MultipleThemeViewerWidget(themeData: themeData))
    .toList();

what do I need to do to implement the features described above? I thought about maybe having a boolean and a color property in the class but I don't know how to map it and get it into the list... would be great to get some advice

thanks for the help in advance:)

---

Edit:

this is the Container for the colors:

class MultipleThemeViewerWidget extends StatelessWidget {
  MultipleThemeViewerWidget({Key? key, required this.themeData})
      : super(key: key);
  final MultiThemeModel themeData;
  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () {
        getThemeManager(context).selectThemeAtIndex(themeData.index);
      },
      child: Container(
        height: 60,
        width: 105,
        decoration: BoxDecoration(
            borderRadius: BorderRadius.circular(10),
            color: Theme.of(context).scaffoldBackgroundColor.withOpacity(.3),
            border: Border.all(
                color: Theme.of(context).scaffoldBackgroundColor, width: 3)),
        child: Center(
          child: Text(
            themeData.themeName,
            style: GoogleFonts.poppins(
              textStyle: TextStyle(
                fontSize: 12,
                fontWeight: FontWeight.bold,
                color: Theme.of(context).scaffoldBackgroundColor,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

this is the dialog I have for the implementation:

return Dialog(
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.circular(25),
                          ),
                          elevation: 1,
                          backgroundColor: Theme.of(context).indicatorColor,
                          insetAnimationCurve: Curves.decelerate,
                          child: SizedBox(
                            height: 170,
                            width: 320,
                            child: Stack(
                              children: [
                                Padding(
                                  padding: const EdgeInsets.only(
                                    top: 25,
                                    left: 35,
                                    right: 35,
                                  ),
                                  child: Stack(
                                    children: [
                                      Container(
                                        width: 250,
                                        height: 30,
                                        decoration: BoxDecoration(
                                          borderRadius:
                                              BorderRadius.circular(90),
                                          color: Colors.black,
                                        ),
                                      ),
                                      GestureDetector(
                                        onTap: () {
                                          selected = false;
                                          print(selected);
                                        },
                                        child: AnimatedContainer(
                                          duration: const Duration(
                                            milliseconds: 200,
                                          ),
                                          width: 138,
                                          height: 30,
                                          decoration: BoxDecoration(
                                            color: Theme.of(context)
                                                .indicatorColor,
                                            borderRadius:
                                                BorderRadius.circular(90),
                                            border: Border.all(
                                              color: Colors.black,
                                              width: 1,
                                            ),
                                          ),
                                          child: Center(
                                            child: Text(
                                              'Light Mode',
                                              style: GoogleFonts.poppins(
                                                textStyle: const TextStyle(
                                                  fontSize: 12,
                                                  fontWeight: FontWeight.w600,
                                                  color: Colors.black,
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                      Padding(
                                        padding: const EdgeInsets.only(
                                          left: 112,
                                        ),
                                        child: GestureDetector(
                                          onTap: () {
                                            setState(() {
                                              selected = true;
                                              print(selected);
                                            });
                                          },
                                          child: AnimatedContainer(
                                            duration: const Duration(
                                              milliseconds: 200,
                                            ),
                                            width: 138,
                                            height: 30,
                                            decoration: BoxDecoration(
                                              color: selected
                                                  ? Colors.black
                                                  : Colors.transparent,
                                              borderRadius:
                                                  BorderRadius.circular(90),
                                            ),
                                            child: Center(
                                              child: Text(
                                                'Dark Mode',
                                                style: GoogleFonts.poppins(
                                                  textStyle: const TextStyle(
                                                    fontSize: 12,
                                                    fontWeight: FontWeight.w600,
                                                    color: Colors.white,
                                                  ),
                                                ),
                                              ),
                                            ),
                                          ),
                                        ),
                                      ),
                                    ],
                                  ),
                                ),
                                Padding(
                                  padding: const EdgeInsets.only(
                                    top: 85,
                                    left: 35,
                                    right: 35,
                                  ),
                                  child: SizedBox(
                                    height: 60,
                                    width: 250,
                                    child: Row(
                                        mainAxisAlignment:
                                            MainAxisAlignment.spaceBetween,
                                        children: widgets),
                                  ),
                                ),
                              ],
                            ),
                          ),
                        );

getThemeManager:

/// Returns the [ThemeManger] that
ThemeManager getThemeManager(BuildContext context) =>
    Provider.of<ThemeManager>(context, listen: false);

class ThemeModel {
  final ThemeData? selectedTheme;
  final ThemeData? darkTheme;
  final ThemeMode? themeMode;

  ThemeModel({
    required this.selectedTheme,
    required this.darkTheme,
    required this.themeMode,
  });
}