[Flutter] GetX (Simple route)

이번 카테고리는 GetX 의 기본 라우팅에 대해서 알아보겠습니다.

개발환경 : 윈도우11, 안드로이드 스튜디오, flutter 3.0.1

소스코드 위치 - Release 04_simple_route2 · mike-bskim/getx_test · GitHub

Release 04_simple_route2 · mike-bskim/getx_test

 

프로젝트 구조

main.dart

/src/home.dart

/src/pages/normal/first.dart, second.dart, third.dart

 

 

main.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'src/home.dart';

void main() => runApp(const MyApp());

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: const Home(),
    );
  }
}

 

home.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'pages/normal/first.dart';

class Home extends StatelessWidget {
  const Home({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text("라우트 관리 홈"),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              child: const Text("단순 페이지 라우팅"),
              onPressed: () {
              // 어떤 경우가 간단한지 명확히 알수 있다
                // Navigator.of(context).push(MaterialPageRoute(
                //   builder: (BuildContext context) => const FirstPage(),
                // ));
                Get.to(() => const FirstPage());
              },
            ),
          ],
        ),
      ),
    );
  }
}

 

first.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';

import '../../home.dart';
import 'second.dart';

class FirstPage extends StatelessWidget {
  const FirstPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("첫번째 페이지"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: const Text("다음 페이지 이동"),
                onPressed: () {
                  // Navigator.of(context).push(MaterialPageRoute(
                  //   builder: (BuildContext context) => SecondPage(),
                  // ));
                  Get.to(
                    () => const SecondPage(),
                    transition: Transition.topLevel,
                  );
                },
              ),
              ElevatedButton(
                child: const Text("이전페이지로 이동"),
                onPressed: () {
                  // Navigator.of(context).pop();
                  Get.back();
                },
              ),
              ElevatedButton(
                child: const Text("홈으로 이동"),
                onPressed: () {
                  // 이전 스택을 모두 비우고 Home 으로 이동
                  // Navigator.of(context).pushAndRemoveUntil(
                  //     MaterialPageRoute(
                  //         builder: (BuildContext context) => const Home()),
                  //     (route) => false);
                  Get.offAll(() => const Home());
                },
              )
            ],
          ),
        ));
  }
}

 

second.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../src/home.dart';
import 'third.dart';

class SecondPage extends StatelessWidget {
  const SecondPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: const Text("두번째 페이지"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: const Text("다음 페이지 이동"),
                onPressed: () {
                  Get.to(() => const ThirdPage());
                },
              ),
              ElevatedButton(
                child: const Text("이전페이지로 이동"),
                onPressed: () {
                  // Navigator.of(context).pop();
                  Get.back();
                },
              ),
              ElevatedButton(
                child: const Text("홈으로 이동"),
                onPressed: () {
                  // 이전 스택을 모두 비우고 Home 으로 이동
                  // Navigator.of(context).pushAndRemoveUntil(
                  //     MaterialPageRoute(
                  //         builder: (BuildContext context) => const Home()),
                  //         (route) => false);
                  Get.offAll(() => const Home());
                },
              )
            ],
          ),
        ));
  }
}

 

third.dart

 

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import '../../../src/home.dart';

class ThirdPage extends StatelessWidget {
  const ThirdPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    debugPrint(Get.previousRoute.toString());
    return Scaffold(
        appBar: AppBar(
          title: const Text("세번째 페이지"),
        ),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              ElevatedButton(
                child: const Text("홈으로 이동"),
                onPressed: () {
                  // 이전 스택을 유지한체로 Home 으로 이동, "라우트 관리 홈" 의 appBar 에서 돌아가기 버튼이 보이는걸 알수 있다
                  Get.to(const Home());
                },
              ),
              ElevatedButton(
                child: const Text("이전페이지로 이동"),
                onPressed: () {
                  Get.back();
                },
              ),
              ElevatedButton(
                child: const Text("홈으로 돌아가기"),
                onPressed: () {
                  // 이전 스택을 모두 비우고 Home 으로 이동
                  // Navigator.of(context).pushAndRemoveUntil(
                  //     MaterialPageRoute(
                  //         builder: (BuildContext context) => const Home()),
                  //     (route) => false);
                  Get.offAll(const Home());
                },
              ),
            ],
          ),
        ));
  }
}

 

 

 

 

[참고자료] 유투브 - 개발하는 남자.