TapGestureRecognizer not working in flutter-CodePudding

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!

CodePudding user response：

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

CodePudding user response：

try this

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

or this

..onTap = widget.onClickedSignUp,