animated switcher children not clickable - flutter

user_12554015 0
Viewed 22

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,
                  );
                },
              ),
            ),
            // )
          ],
        ),
      ),
    );
  }
}
flutter-animation flutter-listview flutter-layout dart flutter
1 Answers

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