Question 79778 in Flutter Question posted in
The official Flutter documentation can be found here.

TapGestureRecognizer not working in flutter

i’m trying to add navigation between auth pages in flutter using TapGestureRecognizer on a TextSpan. Everything is set up but still the clicked text does not navigate to the preferred page.

part of the login ui where i’m using TapGestureRecognizer:

RichText(
                      text: TextSpan(
                          text: 'No account',
                          style: TextStyle(color: Colors.black),
                          children: [
                        TextSpan(
                            recognizer: TapGestureRecognizer()
                              ..onTap = () => widget.onClickedSignUp,
                            text: 'Click Here',
                            style: TextStyle(
                                decoration: TextDecoration.underline,
                                color: Colors.black))
                      ]))

first part of the login.dart:

class LoginScreen extends StatefulWidget {
  final VoidCallback onClickedSignUp;

  const LoginScreen({Key? key, required this.onClickedSignUp})
      : super(key: key);

  @override
  State<LoginScreen> createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  TextEditingController emailController = TextEditingController();
  TextEditingController passwordController = TextEditingController();
  final navigatorKey = GlobalKey<NavigatorState>();
  final formKey = GlobalKey<FormState>();

  @override
  void dispose() {
    emailController.dispose();
    passwordController.dispose();
    super.dispose();
  }

auth.dart:

class _AuthPageState extends State<AuthPage> {
  bool isLogin = true;
  @override
  Widget build(BuildContext context) => isLogin
      ? LoginScreen(onClickedSignUp: toggle)
      : SignUpScreen(onClickedSignIn: toggle);
  void toggle() {
    setState(() {
      isLogin != isLogin;
    });
  }
}

main.dart:

class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        body: StreamBuilder<User?>(
      stream: FirebaseAuth.instance.authStateChanges(),
      builder: (context, snapshot) {
        if (snapshot.connectionState == ConnectionState.waiting) {
          return Center(child: CircularProgressIndicator());
        } else if (snapshot.hasError) {
          return Center(child: Text('Something went wrong'));
        } else if (snapshot.hasData) {
          return HomeScreen();
        } else {
          return AuthPage();
        }
      },
    ));
  }
}

I’d be grateful if anyone can help me!

Tags:

2

Answers


  1. 0

    try this

    ..onTap = () => widget.onClickedSignUp.call(),

    or this

    ..onTap = widget.onClickedSignUp,
    Login or Signup to reply.
  2. 0

    to call the method use () inside a function,

    TextSpan(
   recognizer: TapGestureRecognizer()
     ..onTap = () => widget.onClickedSignUp(),

    And change to logic to isLogin = !isLogin;

    Tested snippet

    
class MainPage extends StatelessWidget {
  const MainPage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(body: AuthPage());
  }
}

class AuthPage extends StatefulWidget {
  const AuthPage({super.key});

  @override
  State<AuthPage> createState() => _AuthPageState();
}

class _AuthPageState extends State<AuthPage> {
  bool isLogin = true;
  void toggle() {
    debugPrint("yay");
    setState(() {
      isLogin = !isLogin;
    });
  }

  @override
  Widget build(BuildContext context) => Column(
        children: [
          Text("$isLogin"),
          SizedBox(
            height: 400,
            width: 400,
            child: isLogin ? LoginScreen(onClickedSignUp: toggle) : Text("F"),
          )
        ],
      );
}

class LoginScreen extends StatefulWidget {
  const LoginScreen({Key? key, required this.onClickedSignUp})
      : super(key: key);

  final VoidCallback onClickedSignUp;

  @override
  State<LoginScreen> createState() => _LogInScreenState();
}

class _LogInScreenState extends State<LoginScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: RichText(
          text: TextSpan(
              text: 'No account',
              style: TextStyle(color: Colors.black),
              children: [
            TextSpan(
                recognizer: TapGestureRecognizer()
                  ..onTap = () => widget.onClickedSignUp(),
                text: 'Click Here',
                style: TextStyle(
                    decoration: TextDecoration.underline, color: Colors.black))
          ])),
    );
  }
}
```
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search