How to switch between widgets using forward and back buttons in Flutter? - flutter

Question

Need help with code. I have containers (buttons) with date numbers and days of the week (this is MyDayPicker) and at the top of the button in the form of arrow icons. I need to be able to switch back and forth among the containers with dates (MyDayPicker) with the help of the arrow buttons. I think that this can be done using AnimatedSwitcher, but maybe I'm wrong. What is the solution to this problem, I will be grateful if you help me?
body
Row(
children: [
GestureDetector(
onTap: () {},
child: SvgPicture.asset(
constants.Assets.arrowLeftSmall,
width: 8.5,
),
),
const SizedBox(width: 25),
const Text(
'1 May - 2022',
style: constants.Styles.smallerHeavyTextStyleWhite,
),
const SizedBox(width: 25),
GestureDetector(
onTap: () {},
child: SvgPicture.asset(
constants.Assets.arrowRight,
),
),
],
),
MyDayPicker(
onChanged: (val) {
if (val == -1) {
setState(() {
_isDaySchedule = false;
_dayNum = 0;
});
return;
}
setState(() {
_isDaySchedule = true;
_dayNum = val;
});
},
size: size,
),
MyDayPicker
class MyDayPicker extends StatefulWidget {
final Color activeColor;
final Size size;
final Function(int) onChanged;
const MyDayPicker({
Key? key,
required this.size,
required this.onChanged,
this.activeColor = constants.Colors.purpleMain,
}) : super(key: key);
#override
State<MyDayPicker> createState() => _MyDayPicker();
}
class _MyDayPicker extends State<MyDayPicker> {
int selectedDay = -1;
void selectDay(int dayPos) {
setState(() {
if (dayPos == selectedDay) {
selectedDay = -1;
widget.onChanged(selectedDay);
return;
}
selectedDay = dayPos;
widget.onChanged(selectedDay);
});
}
#override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Padding(
padding: const EdgeInsets.only(right: 10),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
for (int i = 0; i < 7; i++)
Padding(
padding: EdgeInsets.only(
left: UiSize.getWidth(15, widget.size),
),
child: GestureDetector(
onTap: () => selectDay(i),
child: _dayPicker(i + 1, _days[i]),
),
),
],
),
),
],
);
}
Widget _dayPicker(int day, String dayName) {
return Container(
alignment: Alignment.topCenter,
width: UiSize.getWidth(30, widget.size),
height: UiSize.getHeight(50, widget.size),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.5),
color: constants.Colors.purpleXDark.withOpacity(0.6),
),
child: Column(
children: [
Container(
height: UiSize.getHeight(32, widget.size),
width: UiSize.getWidth(30, widget.size),
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(7.5),
color: day - 1 == selectedDay
? widget.activeColor
: constants.Colors.white.withOpacity(0.15),
),
child: Text(
'$day',
style: const TextStyle(
fontSize: TextSize.textSmall,
fontFamily: FontFamily.AvenirHeavy,
color: constants.Colors.white,
decoration: TextDecoration.none,
),
),
),
Text(
dayName,
style: TextStyle(
fontSize: TextSize.textXxxTiny,
fontFamily: FontFamily.AvenirMedium,
color: constants.Colors.white.withOpacity(0.5),
),
),
],
),
);
}
final List<String> _days = const [
'SUN',
'MON',
'TUE',
'WED',
'THU',
'FRI',
'SAT',
];
}