Search code examples
flutterdartnavigationhookflutter-hooks

my flutter screen keeps going back to my previous screen on hot reload


I have a welcome page where i can click a button and go to my login screen and i use Get.toNamed to navigate my screens

//Click button on welcome.dart
InkWell(
  onTap: () => goto("login"),
  child: ....,
)

//goto function for navigating
goto(String path, {dynamic args}) {
  Get.toNamed('/$path', arguments: args);
}

My GetPages

const welcome = '/welcome';
const login = '/login';

List<GetPage<dynamic>> getPages = [
  pages(welcome, const Welcome()),
  pages(login, const Login()),
];

GetPage pages(String route, dynamic screen,
    {dynamic args, bool dialog = false, bool opaque = false}) {
  return GetPage(
      name: route,
      page: () => screen,
      transition: Transition.leftToRightWithFade,
      fullscreenDialog: dialog,
      opaque: opaque);
}

Now in my login page am using flutter_hooks instead of statelesswidget

class Login extends HookWidget {
  const Login({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    final emailController = useTextEditingController();
    final passwordController = useTextEditingController();

    return SafeArea(
      child: Scaffold(
          body: ListView(
        padding: const EdgeInsets.all(15),
        children: [
          const SizedBox(height: 50),
          const CustomText(
            "Welcome Back",
            size: 30,
            font: "FlexR",
          ),
          const SizedBox(height: 20),
          InputField(
            controller: emailController,
            label: "Email Address",
            suffixIcon: IconlyLight.message,
          ),

          //...,

main.dart

void main() {
  runApp(const MyApp());
}

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

  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  List<ThemeData> themes = [
    ThemeManager.lightTheme,
    ThemeManager.lightBlueTheme,
    ThemeManager.lightPurpleTheme,
    ThemeManager.lightGreenTheme,
    ThemeManager.lightOrangeTheme,
    ThemeManager.lightYellowTheme,
    ThemeManager.darkTheme,
    ThemeManager.darkBlueTheme,
    ThemeManager.darkPurpleTheme,
    ThemeManager.darkGreenTheme,
    ThemeManager.darkOrangeTheme,
    ThemeManager.darkYellowTheme,
  ];

  @override
  void initState() {
    init();
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
        debugShowCheckedModeBanner: false,
        title: 'Flutter',
        theme: themes[0],
        initialRoute: "/",
        unknownRoute: GetPage(name: "/404", page: () => Container()),
        getPages: getPages,
        home: const Welcome());
  }
}

My welcome page is a stateless widget since am not using any hooks in it, but now whenever I click on go to login page and I made a change and decide to hot reload it to see the changes, it immediately takes me back to my welcome page and I don't know what's causing this since everything is correct or am I missing something. Please how can I fix this issue and also if you any more code or explanation, let me know.


Solution

  • Okay i found out what was wrong with it Instead of using

    InkWell(
      onTap: () => goto("login"), //from here
      child: ....,
    )
    
    //goto function for navigating
    goto(String path, {dynamic args}) {
      Get.toNamed('/$path', arguments: args); //from here
    }
    

    I used it like the normal way, which is

    InkWell(
      onTap: () => goto("/login"), //change here
      child: ....,
    )
    
    //goto function for navigating
    goto(String path, {dynamic args}) {
      Get.toNamed(path, arguments: args); //change here
    }
    

    I still don't know what's the difference between them, but yeah that's it