[flutter] Get.toNamed(), Routing, controller, binding, MVC, 디자인 패턴

flutter에도 endpoint로 라우팅하는 방법이 있다.

1. path 정의

class MainPage extends StatelessWidget {
  const MainPage({super.key});
  static const String route = '/main'; //path 정의

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            const Text('Hola'),
            TextButton(
              child: const Text('login'),
              onPressed: () {
              },
            ),
          ],
        ),
      ),
    );
  }
}

2. App에 path를 등록하고 페이지를 연결한다.

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

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp([
      GetPage(name: LoginPage.route, page: () => const LoginPage()),
      GetPage(name: MainPage.route, page: () => const MainPage()),
      ],
      home: const MainPage(),
    );
  }
}

여기서 AppPage를 따로 관리하고, route 또한 따로 분리해 고도화할 수도 있다.

util/pages.dart

class AppPages {
  static final pages = [
    GetPage(name: AppRoutes.login, page: () => const LoginPage()),
    GetPage(name: AppRoutes.main, page: () => const MainPage()),
  ];
}

uril/routes/dart

class AppRoutes {
  static const login = LoginPage.route;
  static const main = MainPage.route;
}

main.dart

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

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      getPages: AppPages.pages,
      home: const MainPage(),
    );
  }
}

Controller

Model(class), View, Controller를 분리시킨다.

예시: 로그인

예시: post

controller/login_controller.dart

import 'package:get/get.dart';

class LoginController extends GetxController {
  var idController = TextEditingController();
  var pwController = TextEditingController();

  login() {
    print('로그인 시도');
  }
}

login_page.dart

class LoginPage extends StatelessWidget {
  const LoginPage({super.key});
  static const String route = '/login'; //path 정의

  @override
  Widget build(BuildContext context) {
    var controller = Get.put(LoginController());
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(16),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              TextField(
                controller: controller.idController, //컨트롤러 연결
                decoration: const InputDecoration(
                  hintText: 'ID',
                ),
              ),
              TextField(
                controller: controller.pwController,
                decoration: const InputDecoration(
                  hintText: 'PW',
                ),
              ),
              ElevatedButton(
                onPressed: controller.login, //로그인 함수 실행
                child: const Text('로그인하기'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

binding

앱이 시작할때, 페이지가 만들어질때 Get.put을 하는 방법.

1. GetMaterialApp의 initialBinding

initialBinding: BindingBuilder(() {
  Get.put(LoginController());
  .. 컨트롤러 나열
})

2. GetPage에 정의할때 같이 binding 걸어놓기

GetPage(
  name: LoginPage.route,
  page: () => const LoginPage(),
  binding: BindingsBuilder(() {
    Get.put(LoginController());
  }),
)

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

  @override
  Widget build(BuildContext context) {
    return GetMaterialApp(
      initialBinding: BindingsBuilder(() {
        //controller 나열
        Get.put(LoginController());
      }),
      getPages: AppPages.pages,
      // home: const LoginPage(),
      initialRoute: LoginPage.route, 
      // binding을 AppPages에서 했을때, put된 후에 페이지가 실행될 수 있도록 한다. home 대신 씀.
    );
  }
}

3. GetView<제네릭>

class LoginPage extends GetView<LoginController> {
  //GetView<제네릭>을 extends한다. 컨트롤러를 이미 갖고있음.
  const LoginPage({super.key});
  static const String route = '/login'; //path 정의

  @override
  Widget build(BuildContext context) {
    // var controller = Get.find<LoginController>();
    return Scaffold(

4. 만약 initialBinding에 모든 컨트롤러를 걸어놓으면 과부하가 올 수 있다.

대기상태에 두었다 사용될 때만 사용할 수 있다.

Get.lazyPut(() => controller());

initialBinding: BindingBuilder(() {
  Get.lazyPut(LoginController());
})

MVC

리팩토링 구루

디자인 패턴들에 대한 설명
https://refactoring.guru/ko/design-patterns