패스트캠퍼스 환급챌린지 20일차 미션(2월 20일): 15개 프로젝트로 실무까지 끝내는 Dart & Flutter 앱 개발 강의 후기

오늘은 하단 네비게이션 바의 모습을 수정하고, 더미데이터를 만들어보는 실습을 진행했다.

 

원래 Fast App Base의 하단 네비게이션 탭 아이템은 홈과 즐겨찾기 두 개였는데, 토스 앱의 경우 5개이니, 이를 늘려주는 작업을 해야한다.

// ...
enum TabItem {
  home(Icons.home, '홈', HomeFragment()),
  benefit(Icons.star, '혜택', BenefitFragment()),
  tosspay(Icons.payment, '토스페이', TossPayFragment()),
  stock(Icons.candlestick_chart, '주식', StockFragment()),
  all(Icons.menu, '전체', AllFragment());
// ...

그리고 각 화면(Fragment)을 보여주는 역할을 담당하는 Fragment 위젯을 Stateful 위젯으로 4개 더 추가해주었다.

여기서 Fragment란, Activity나 같은 Fragment 내부에 정의되는 독립적인 View를 말한다.

아래 all, benefit, home, stock, tosspay에 해당하는 Fragment는 파일 네임 컨벤션에 따라 'f_'라는 접두사를 포함시켜주었다.

그러면 이제 아래와 같이 토스 앱의 하단과 비슷한 네비게이션 바가 완성된다.

아이콘의 경우 실제 토스 앱과 동일한 아이콘을 찾기 힘들어서, 그냥 기본적으로 지원하는 아이콘들 중 의미가 통하는 아이콘을 대신 넣어주었다.

꽤나 그럴듯해보인다. 다음은 홈 화면에 사용될 더미 데이터를 만들어보자.

 

토스의 홈 화면은 최상단 광고 섹션을 시작으로 토스뱅크, 자산, 투자, 소비 영역과 몇몇 메뉴가 수평으로 나열된 기타 영역으로 구성되어있다. 그리고 자산 영역을 이루는 개별 '계좌'를 이루는 UI도 하나의 위젯으로 생각하면, 계좌 아이콘, 이름, 잔액, 송금 버튼으로 이루어져있다.

 

이렇게 위젯 관점에서 분석한 것을 토대로 은행과 은행 계좌에 대한 클래스를 작성하면 아래와 같을 것이다.

class Bank {
  final String name;
  final String logoImagePath;

  Bank(this.name, this.logoImagePath);
}

 

import 'package:fast_app_base/screen/main/tab/home/vo/vo_bank.dart';

class BankAccount {
  final Bank bank;
  final String accountNumber;
  final String accountHolderName;
  int balance;
  final String? accountTypeName;

  BankAccount(
      this.bank, this.accountNumber, this.accountHolderName, this.balance,
      {this.accountTypeName} // Optional
      );
}

 

 

그리고 더미데이터를 이렇게 만들어주면 된다.

먼저 은행이다.

import 'package:fast_app_base/common/common.dart';
import 'vo/vo_bank.dart';

final bankShinhan = Bank('신한은행', '$basePath/bank/bank_shinhan.png');
final bankKakao = Bank('카카오뱅크', '$basePath/bank/bank_kakao.png');
final bankToss = Bank('토스뱅크', '$basePath/bank/bank_toss.png');

 

그리고 계좌는 이런 방식이다.

import 'package:fast_app_base/screen/main/tab/home/banks_dummy.dart';
import 'package:fast_app_base/screen/main/tab/home/vo/vo_bank_account.dart';

final bankAccountShinhan1 = BankAccount(bankShinhan, 3000000, accountTypeName: "신한 주거래 통장");
final bankAccountShinhan2 = BankAccount(bankShinhan, 43210000, accountTypeName: "신한 적금 통장");
final bankAccountKakao = BankAccount(bankKakao, 45202035, accountTypeName: "카뱅 예금 통장");
final bankAccountToss = BankAccount(bankToss, 543252345, accountTypeName: "토뱅 예금 통장");

final bankAccounts = [
  bankAccountShinhan1, bankAccountShinhan2, bankAccountKakao, bankToss
];

 

간단하게 실행 테스트할 때 로딩이 오래 걸리면서 실행이 안 되는 문제가 있었는데, basePath 상수를 불러올 때 해당 상수를 관리하는 파일이 또 여러 파일을 참조하고 있어서 결국 메모리를 과다하게 쓰다가 앱의 충돌을 야기한 것이 원인이라고 생각했다.

basePath 상수를 관리하는 파일 내부의 import 문을 다른 파일로 분리해서 해결할 수 있었다.

 

 

본 포스팅은 패스트캠퍼스 환급 챌린지 참여를 위해 작성하였습니다.

https://bit.ly/48sS29N