animated switcher children not clickable - flutter - flutter

Question

i have a clickable content in my switcher pages. the buttons doesnt work.
i have three questions:
1- is this the right way to use animated switcher with list view builder to make it switched with fade animation?
2- how to make the content of animated switcher clickable
3- there is another way to use fade transition with list view builder ?
any suggestions will be helpful.
thanks for your help
the code below:
import 'package:flutter/material.dart';
class MicroExam extends StatefulWidget {
const MicroExam({Key? key}) : super(key: key);
#override
_MicroExamState createState() => _MicroExamState();
}
List<Widget> _pages = [
Center(
child: GestureDetector(
onTap: () {
print('red');
},
child: Container(
color: Colors.red,
width: 237.34,
height: 44.74,
)),
),
Center(
child: GestureDetector(
onTap: () {
print('blue');
},
child: Container(
color: Colors.blue,
width: 237.34,
height: 44.74,
)),
)
];
int selectedPage = 0;
class _MicroExamState extends State<MicroExam> with TickerProviderStateMixin {
PageController _controller = PageController();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
children: [
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: Container(
key: ValueKey(_pages[selectedPage]),
child: _pages[selectedPage],
),
),
Center(
child: PageView.builder(
onPageChanged: (value) {
setState(() {
selectedPage = value;
});
},
controller: _controller,
physics: const BouncingScrollPhysics(),
itemCount: _pages.length,
itemBuilder: (context, index) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
);
},
),
),
// )
],
),
),
);
}
}

Answer 1

You can get tap event using onTapDown with
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTapDown: (_) {
print("on tapDown");
},
And place the AnimatedSwitcher on bottom on Stack children.
class MicroExam extends StatefulWidget {
const MicroExam({Key? key}) : super(key: key);
#override
_MicroExamState createState() => _MicroExamState();
}
List<Widget> _pages = [
Center(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTap: () {
print('red');
},
onTapDown: (_) {
print("on tapDown");
},
child: Container(
color: Colors.red,
width: 237.34,
height: 44.74,
)),
),
Center(
child: GestureDetector(
behavior: HitTestBehavior.translucent,
onTapDown: (_) {
print("on tapDown");
},
onTap: () {
print('blue');
},
child: Container(
color: Colors.blue,
width: 237.34,
height: 44.74,
)),
)
];
int selectedPage = 0;
class _MicroExamState extends State<MicroExam> with TickerProviderStateMixin {
PageController _controller = PageController();
#override
Widget build(BuildContext context) {
return SafeArea(
child: Scaffold(
body: Stack(
children: [
Center(
child: PageView.builder(
onPageChanged: (value) {
print("tapped");
setState(() {
selectedPage = value;
});
},
controller: _controller,
physics: const BouncingScrollPhysics(),
itemCount: _pages.length,
itemBuilder: (context, index) {
return Container(
width: MediaQuery.of(context).size.width,
height: MediaQuery.of(context).size.height,
);
},
),
),
AnimatedSwitcher(
duration: const Duration(milliseconds: 300),
child: Container(
key: ValueKey(_pages[selectedPage]),
child: _pages[selectedPage],
),
),
],
),
),
);
}
}