코린 V 1.8

요약

업비트, 빗썸, 코인원, 바이낸스의 실시간 시세와 프리미엄 가격 비교를 제공합니다.
TradinvView API를 사용하여 차트 서비스를 제공합니다.
더 많은 뉴스와 호재 일정을 제공합니다.
반응형을 완성하였습니다.

실시간 시세

업비트, 빗썸, 코인원, 바이낸스의 실시간 시세를 확인할 수 있습니다.
암호화폐 최다 거래소인 바이낸스와 가격을 비교한 프리미엄 시세 서비스를 제공합니다.

Getx를 사용한 API 반복 호출

Future<void> loopFetchOtherCoinData() async {
    _updateIsFetchingOtherCoinData(true);
    print("CoinListController loopFetchOtherCoinData: is loop");
    if (selectedPlatform.toUpperCase() != "BINANCE") {
      await _fetchCoinData(selectedPlatform.toUpperCase());
      _updateCoinList(selectedPlatform);
      _updateUpdatedTime(DateTime.now());
      _updateTargetList();
      sort();
    }
    await Future.delayed(const Duration(seconds: 3));
    if (isPaused == false) {
      await loopFetchOtherCoinData();
    }
    _updateIsFetchingOtherCoinData(false);
  }

@override
  void onPaused() {
    _updateIsPaused(true);
    print("onPaused");
  }

실시간 시세를 초 단위로 받아와야해서 Onit에 API 반복 호출하는 무한루프 코드를 삽입하였습니다. 3초단위로 무한루프가 돌고, 앱 밖으로 나가거나 다른 페이지로 이동할 시에 isPaused 플래그를 사용하여 루프를 멈추게 설계 하였습니다.

Coin 모델 파싱

class Coin {
  final String platform;
  final String base;
  final String target;
  final String? koreanName;
  final String? englishName;
  final double tradePrice;
  final double changePrice;
  final double changeRate;
  final double volume;
  final double? premiumPrice;
  final double? premiumRate;

  Coin({
    required this.platform,
    required this.base,
    required this.target,
    required this.koreanName,
    required this.englishName,
    required this.tradePrice,
    required this.changePrice,
    required this.changeRate,
    required this.volume,
    required this.premiumPrice,
    required this.premiumRate,
  });
}

업비트, 코인원, 빗썸, 바이낸스 각 API 에서 받아오는 데이터의 형태가 모두 달라서 하나의 코인 모델로 파싱해주는 작업을 해야했습니다.

디테일 페이지 고도화

TradingView API를 사용하여 차트를 제공하였습니다.
뉴스를 통일화 시켰습니다.

webview_flutter을 사용한 웹 뷰

WebView(
	initialUrl: '',
    javascriptMode: JavascriptMode.unrestricted,
	zoomEnabled: false,
	onWebViewCreated: (WebViewController webViewController) {
		_con = webViewController;
        _loadHTML();
	},
	onProgress: (int progress) {
		print("WebView is loading (progress : $progress%)");
	},
	navigationDelegate: (NavigationRequest request) {
		if (request.url.startsWith('https://www.youtube.com/')) {
			print('blocking navigation}');
			return NavigationDecision.prevent;
		}
		print('allowing navigation to');
		return NavigationDecision.navigate;
	},
	onPageStarted: (String url) {
		print('Page started loading');
	},
	onPageFinished: (String url) {
		print('Page finished loading');
	},
)

_loadHTML() async {
    _con.loadUrl(await _detailController.fetchTradingViewUri() ?? "");
  }

_loadHTML에서는 HTML String을 가지고 웹뷰를 띄울때 사용하게 되는데, TradingView API는 Flutter를 위한 라이브러리를 제공하지 않기 때문에 임베드 코드로 웹뷰를 직접 띄우는 수 밖에 없었습니다.

webview 상하 스크롤 방어

GestureDetector(
	onVerticalDragUpdate: (updateDetails) {},
	child: SizedBox(
	width: double.infinity,
	height: CustomScreenSizes.tradigViewHeight.h,
		child: WebView(),   
	),
),

웹뷰를 단순히 띄우게 되면 정말 웹뷰를 띄우는 거여서 컴포넌트 느낌이 들지 않았습니다. 그래서 상하 스크롤을 방어하여, 고정값으로 들어가는 느낌을 구현하고자 하였고, 웹뷰를 SizedBox로 감싸고 그것을 GestureDetector로 감싼후 세로 스크롤 업데이트 콜백 함수를 오버라이딩하여 아무런 호출값을 넣지 않게되면, 상하 스크롤을 방어하게 됩니다.

반응형

모든 페이지를 반응형으로 바꾸었지만, 캘린더 페이지의 반응형이 복잡했습니다.

flutter_screenutil를 사용한 반응형 구현

final double _itemHeaderHeight = CustomScreenSizes.itemHeaderHeight.h;
final double _itemHeight = CustomScreenSizes.itemHeight.h;
final double _itemVerticalSpace = CustomScreenSizes.itemVertical.h;
final double _itemHorizontalSpace = CustomScreenSizes.itemHorizontal.w;
final double _itemImageHorizontalSpace = CustomScreenSizes.itemHorizontal.w / 2.0;

ScreenUtilInit(
      designSize: Size(360, 780),
      builder: () => MaterialApp(
        debugShowCheckedModeBanner: false,
        home: MainPage(),
      ),
    );

메인 함수를 ScreenUtilInit으로 감싸주고 시작해야 합니다. 타겟 해상도를 설정하는데 아이폰 12 기준으로 맞추었습니다. 메인 페이지의 하위 페이지들에서는 모두 ScreenUtil을 사용할 수 있습니다. 사용법은 .w .h .sp를 뒤에 붙이면 끝입니다.

+앱스토어 리젝 사유

아주 친절하게도 아이패드에서 사용할 시에 오류가 발생했고, 그 사실을 몰랐습니다.