Unable to navigate from GetX Dialog to another screen

Question

I have follow dialog box. When I click 'Next' I want it to navigate to GamePage() screen. But unfortunately it doesn't work.

Following is the GamePage Widget

class GamePage extends StatelessWidget {
  final homeCtrl = Get.find<HomeController>();
  GamePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: const Color(0xFF8fb1ca),
      body: SafeArea(
        child: ListView(
          children: [
            Padding(
              padding: EdgeInsets.all(3.0.wp),
              child: Row(
                children: [
                  IconButton(
                    onPressed: () {
                      Get.back();
                    },
                    icon: const Icon(Icons.arrow_back),
                  ),
                ],
              ),
            ),
            Padding(
              padding: EdgeInsets.symmetric(vertical: 4.0.wp),
              child: Column(
                children: [
                  SizedBox(
                    height: 2.0.wp,
                  ),
                  Center(
                    child: Text(
                      'What ${homeCtrl.currentWord.first.wordtype} is this?',
                      style: TextStyle(
                        fontSize: 18.0.sp,
                        color: Colors.grey[800],
                      ),
                    ),
                  ),
                  SizedBox(height: 10.0.wp),
                  WordsWidget(currentWord: homeCtrl.currentWord.first),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Following is the Word Widget being called from GamePage Widget

class WordsWidget extends StatelessWidget {
  final currentWord;
  WordsWidget({Key? key, this.currentWord}) : super(key: key);
  final homeCtrl = Get.find<HomeController>();

@override
  Widget build(BuildContext context) {
    // var currentWord = homeCtrl.nextWord();
    var shuffleword = [].obs;
    shuffleword.addAll(homeCtrl.shuffleWord(currentWord.word));
    TextToSpeech tts = TextToSpeech();
    String language = 'en-US';
    tts.setLanguage(language);

return Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    ElevatedButton(
        onPressed: () {
          print('pressed here');
          Get.defaultDialog(
              title: 'Go to next page',
              content: Container(
                child: Column(
                  children: [
                    Text('You are about to move to another screen'),
                    ElevatedButton.icon(
                        onPressed: () {
                          Get.to(() => GamePage());
                        },
                        icon: Icon(
                          Icons.arrow_right,
                        ),
                        label: Text('Go'))
                  ],
                ),
              ));
        },
        child: Text('Open Dialog')),
  ],
);
}
}

Get.back() is working but not Get.to

Answer 1

Try

ElevatedButton(
  onPressed: () {
  Navigator.push(
      context,
      MaterialPageRoute(
        builder: (BuildContext context) {
          return const GamePage();
        },
      ),
    );
  },
  child: Text("Next Word"),
)

Answer 2

Try this code -

import 'dart:typed_data';

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:image_memory/next_page.dart';
import 'package:image_picker/image_picker.dart';

void main() {
  //check getMaterialApp is used
  runApp(const GetMaterialApp(
    title: 'Temp',
    home: const MyApp(),
  ));
}

class MyApp extends StatefulWidget {
  const MyApp({Key? key}) : super(key: key);

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

class _MyAppState extends State<MyApp> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Picker'),
      ),
      body: Center(
        child: ElevatedButton(
            onPressed: () {
              print('pressed here');
              Get.defaultDialog(
                  title: 'Go to next page',
                  content: Container(
                    child: Column(
                      children: [
                        Text('You are about to move to another screen'),
                        ElevatedButton.icon(
                            onPressed: () {
                              Get.to(() => NextPage());
                            },
                            icon: Icon(
                              Icons.arrow_right,
                            ),
                            label: Text('Go'))
                      ],
                    ),
                  ));
            },
            child: Text('Open Dialog')),
      ),
    );
  }
}

and next page is -

import 'package:flutter/material.dart';

class NextPage extends StatefulWidget {
  const NextPage({ Key? key }) : super(key: key);

  @override
  State<NextPage> createState() => _NextPageState();
}

class _NextPageState extends State<NextPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Next Page'),
      ),
      body: Container(
        child: Center(
          child: Text("this is next page"),
        ),
      ),
    );
  }
}

And yes, you need to insure that you are using 'GetMaterialApp'.

Answer 3

If you want to use GetX navigation system, you should wrap your application in a GetMaterialApp instead of MaterialApp.

So in your main use this:

class GetxApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      home: HomePage(),
    );
  }
}

Instead of this:

class NormalApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}