[Flutter] Route Management of GetX Tutorial

🧐Reenta.Kim.Dev·2022년 3월 24일
0

GetX Tutorial

목록 보기
1/1
post-thumbnail
post-custom-banner

provider, bloc, getx 상태 관리 라이브러리 중 나는 getx를 선택 했으며 머릿속에 잘 들어가지 않아서 계속적인 테스트를 진행하고 있다.
이 글은 내가 getx를 익숙해지기 위해서 정리를 위한 글이다.

Routing

Normal Routing

페이지 이동

Navigator.push(context, MaterialPageRoute(builder:(context) => SecondPage());

페이지 뒤로 이동

Navigator.pop(context);

GetX Routing

페이지 이동

Get.to(SecondPage());
Get.toNamed('/second');

페이지 뒤로 이동

Get.back();

GetX 페이지 기본 이동

🙀 main.dart

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

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

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

  @override
  Widget build(BuildContext context) {
    return const GetMaterialApp(
      debugShowCheckedModeBanner: false,
      home: HomePage(),
    );
  }
}

🙀 home_page.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                // Get.to(const SecondPage()); //페이지 이동(back 가능)
                Get.off(const SecondPage()); //나를 지우고 페이지 이동(back 불가능)
              },
              child: const Text('Route to Second Page'),
            )
          ],
        ),
      ),
    );
  }
}

🙀 second_page.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Second Page'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                Get.back();
              },
              child: const Text('Get Back to First Page'),
            )
          ],
        ),
      ),
    );
  }
}

GetX 페이지 이름 이동

😺 main.dart

import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_tutorial/home_page.dart';
import 'package:getx_tutorial/second_page.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      debugShowCheckedModeBanner: false,
      // home: const HomePage(),
      getPages: [
        GetPage(name: '/', page: () => const HomePage()),
        GetPage(name: '/second', page: () => const SecondPage()),
      ],
      initialRoute: '/',
    );
  }
}

😺 home_page.dart

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

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Page'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(20.0),
        child: Column(
          children: [
            ElevatedButton(
              onPressed: () {
                // Get.to(const SecondPage());
                // Get.off(const SecondPage());
                Get.toNamed('/second');
                // Get.offNamed('/second');
              },
              child: const Text('Route to Second Page'),
            )
          ],
        ),
      ),
    );
  }
}

페이지 이동 만큼은 정말 간단하게 가능해졌다.

profile
코드가 내 마음을 읽어서 자동으로 작성되는 그날이 하루 빨리 오길..🧑🏻‍💻
post-custom-banner

0개의 댓글