How to have custom color and border if selected - flutter

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,
});
}