[PLAY STEEM x WebApp] 초기 네비게이션 - 동작 영상 첨부

PLAY STEEM 개발자 이타인클럽입니다.

첫화면 UI를 간단히 잡아봤고, 이어서 각 화면으로 네비게이션 하는 부분을 구현하고 있습니다.

구현 영상

첫화면에 메뉴를 원하는 대로 배치할 수 있게 하려고 합니다. 옵션을 클릭하면 화면 아래에서 창이 하나 올라오는데, GetX를 이용하여 쉽게 구현할 수 있습니다.

그런데, 아직 좀 버그가 있는 거 같네요. 옵션을 선택하면 체크 박스가 on/off 되어야 하는데, 실제 값은 변경되면서 ui만 업데이트가 안되는 문제가 있습니다.

화면에서 메뉴를 클릭하면 각 화면으로 이동하도록 했습니다. 이것도 GetX를 이용했는데, 매우 간편하게 네이게이션 할 수 있습니다!

페이지 라우트

각 화면으로 이동하기 위한 라우트를 구성합니다.

// app_pages.dart

abstract class Routes {
  static const HOME = '/';
  static const NAV = '/nav';
  static const FEED = '/feed';
  static const PROFILE = '/profile';
  static const LOGIN = '/login';
  static const SIGNUP = '/signup';
  static const NOTIFICATION = '/notification';
  static const MESSAGE = '/message';
  static const SETTING = '/setting';
  static const WALLET = '/wallet';
}

class AppPages {
  static const INITIAL = Routes.HOME;

  static final routes = [
    GetPage(
      name: Routes.HOME,
      page: () => HomeScreen(),
      children: [
        GetPage(
          name: Routes.NAV,
          page: () => NavScreen(),
        ),
      ],
    ),
    GetPage(
      name: Routes.FEED,
      page: () => FeedScreen(),
    ),
    GetPage(
      name: Routes.PROFILE,
      page: () => ProfileScreen(),
    ),
    GetPage(
      name: Routes.NOTIFICATION,
      page: () => NotificationScreen(),
    ),
    GetPage(
      name: Routes.MESSAGE,
      page: () => MessageScreen(),
    ),
    GetPage(
      name: Routes.WALLET,
      page: () => WalletScreen(),
    ),
    GetPage(
      name: Routes.SETTING,
      page: () => SettingScreen(),
    ),
    GetPage(
      name: Routes.LOGIN,
      page: () => LoginScreen(),
    ),
    GetPage(
      name: Routes.SIGNUP,
      page: () => SignupScreen(),
    ),
  ];
}

그리고 아무곳에서나 이동하고자 하는 라우트로 이동할 수가 있습니다!

import 'package:get/get.dart';
import 'package:avle/src/routes/app_pages.dart';

...

Get.toNamed(Routes.WALLET);

GetX 네이게이션 정말 편하네요.

다음에는 bottom navigation을 구현해 보려고 합니다.

많은 리스팀과 응원부탁드립니다.

Thank you for support

@steemcurator01
@steemcurator06

https://playsteem.app