월요일 죽이고싶다..

굿모닝 월요일이다.. 오늘도 퇴사를 결심하며 Flutter를 해본다. 원래 local DB쓰는 법을 쓸려고했는데, 따끈따끈한 이슈가 터져서 따끈따끈하게 해결해서 자기자랑겸 써본다.

새로고침 하고싶어! 그런데 어떻게 하지?

웹에서는 간편하게 자바스크립트나 Jquery를 이용하면 누구보다 빠르게 새로고침이 된다. 그치만 상대는 앱이고 나는 Flutter를 처음해본다.(가장 주옥같은 상황이지) 일단 항상 그랬듯이 구글링을 해본다. 전혀 안돼서 이 방법 저 방법 찾다가 결국 뇌피셜로 해결해버렸다. 그래서 이렇게 쓰면 안됄 수도 있고 될 수도 있다. 원래 구글링 하면 안돼는거 50%/되는거 45%/뇌피셜 5%의 비율로 되어있다.

Bloc패턴

저번에 사용했던 Bloc패턴이 기억나니?... 기억안난다고? 그럼 이전껄 다시봐...
간단하게 코드를 보자면 이런식으로 되어있다.

import 'package:b2caremobile/models/historyReport_get.dart';
import 'package:b2caremobile/services/initDB_helpers.dart';
import 'package:rxdart/rxdart.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class HistoryReportGetBloc {
  final _historyReportSubject = BehaviorSubject<HistoryReportGet>();

  HistoryReportGetBloc() {
    // 생성자에 fetch함수를 실행한다?
    // 이것만 봐도 fetch함수가 중심인걸 알 수있다.
    fetch();
  }

  Future<HistoryReportGet> getHistoryReportAPIData() async {
    var carId;
    var deviceId;

    var initDB = await InitDBHelper().getData(1) ?? Null;
    for (var items in initDB) {
      carId = items.car;
      deviceId = items.device;
      // ... 생략 ... 대충 api에서 데이터 빼오는 내용
      var data = HistoryReportGet.fromJson(jsonDecode(utf8.decode(response.bodyBytes)));
      return data;
    }
  }

  void fetch() async {
    // 내부를 봐도 api실행하고 데이터를 받는게 이 함수이다.
    var historyReportResult = await getHistoryReportAPIData();
    _historyReportSubject.add(historyReportResult);
  }

  Stream<HistoryReportGet> get historyReportResult => _historyReportSubject.stream;
}

그럼 대충봐도 감이 오지않는가?
아 저 fetch 라는 함수가 실행되서 데이터를 받고있구나~라고

경우 1)버튼을 눌렀을 때 rebuild

첫번째 경우는 TextFormField에 버튼을 눌러서 데이터를 변경하는데 데이터는 잘 받아오고 내부DB에도 변경이 되었으나 UI에는 변경이 되지않을때이다.
나의 경우에는 차량번호를 입력하고 submit을 눌렀을때 변경되어야했었다.

onPressed: () {
    if (this._formKey.currentState.validate()) {
        _formKey.currentState.save();
        _updateCarNumber();
        historyReportGetBloc.fetch(); 
        // 패치를 해준다.
    }
},

경우 2) 데이터를 변경했을때 UI단에서 rebuild

데이터를 변경했을때 다른 화면에서도 변경된 사항이 보여야한다.
반드시 이 경우는 데이터를 정상적으로 받고, 전달이 완료 되었을때의 경우이다.
(나의 경우에는 api 응답 데이터가 정상적으로 전달되고,
내부 db에 데이터가 완벽하게 저장이 되었을때)

StatefulWidget안에서 setState에 해당 내용을 적는다.

@override
  void setState(fn) {
    // TODO: implement setState
    super.setState(fn);
    historyReportGetBloc.fetch();
    // bloc를 다시 패치하겠다~
  }

setState는 StatefulWidget안에서 데이터를 전송받을때 작동한다고 한다. 비동기로 동작한다고 한다.

이렇게 Bloc패턴 StreamBuilder를 사용할 때 rebuild하는 법을 알아보았다.