Float Stream Builder 대 Future Builder

Float Stream Builder 대 Future Builder

와의 주요 차이점은 무엇입니까.

• 무엇을 사용하고 언제 사용해야 합니까?

• 그들이 수행하고자 하는 작업은 무엇입니까?

• 그들 각각은 동적 목록의 변화를 어떻게 듣나요?

---

및 둘 다 동일한 동작을 사용합니다: 그들은 각자의 목표에 대한 변화에 귀를 기울인다. 새 값이 통지되면 새 빌드를 트리거합니다.

그래서 결국, 그들의 차이점은 그들이 듣는 대상이 어떻게 작동하는지입니다.

JS나 c#과 같은 것이다. 이들은 비동기 요청을 나타냅니다. 단 하나의 응답밖에 없다. 의 일반적인 용도는 HTTP 호출을 처리하는 것입니다. a에서 들을 수 있는 것은 상태입니다. 완료되었는지, 성공적으로 완료되었는지, 오류가 있었는지 여부. 하지만 그게 다입니다.

반면에 JS의 비동기와 같다. 이것은 시간이 지남에 따라 변할 수 있는 값으로 동화될 수 있다. 일반적으로 웹 소켓이나 이벤트(예: 클릭)를 나타냅니다. 를 들음으로써 각각의 새로운 값을 얻을 수 있으며 오류가 발생했거나 완료된 경우에도 마찬가지입니다.

그들 각각은 동적 목록의 변화를 어떻게 듣나요?

A는 변수 변화를 들을 수 없다. 일회성 응답입니다. 대신 a를 사용해야 합니다.

---

는 카메라에서 이미지 가져오기, 네이티브 플랫폼에서 한 번 데이터 가져오기(장치 배터리 가져오기 등), 파일 참조 가져오기, http 요청 등과 같은 일회성 응답에 사용됩니다.

한편, 위치 업데이트를 위해 듣기, 음악 재생, 스톱워치 등과 같은 일부 데이터를 두 번 이상 가져오는 데 사용됩니다.

---

여기 두 경우를 모두 언급한 완전한 예가 있다.

사각형 값을 풀고 5초 후에 결과를 반환합니다. 그러면 진행 표시기가 사용자에게 표시됩니다.

는 스톱워치를 보여주며, 매초마다 값을 1씩 증가시킵니다.

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0; // used by StreamBuilder

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildFutureBuilder(),
          SizedBox(height: 24),
          _buildStreamBuilder(),
        ],
      ),
    );
  }

  // constructing FutureBuilder
  Widget _buildFutureBuilder() {
    return Center(
      child: FutureBuilder<int>(
        future: _calculateSquare(10),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done)
            return Text("Square = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // used by FutureBuilder
  Future<int> _calculateSquare(int num) async {
    await Future.delayed(Duration(seconds: 5));
    return num * num;
  }

  // constructing StreamBuilder
  Widget _buildStreamBuilder() {
    return Center(
      child: StreamBuilder<int>(
        stream: _stopwatch(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.active)
            return Text("Stopwatch = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // used by StreamBuilder
  Stream<int> _stopwatch() async* {
    while (true) {
      await Future.delayed(Duration(seconds: 1));
      yield _count++;
    }
  }
}

---

나는 때때로 실제 세계의 유사성이 개념을 설명하고 기억하는 데 잘 작동한다는 것을 발견한다. 여기 하나가 있다 - 완벽하지는 않지만 나에게 도움이 된다.

여러분이 현대적인 초밥 식당 중 하나에 있다고 생각해 보세요. 여러분은 초밥 배가 달린 벨트를 가지고 방을 돌고 있습니다. 그냥 앉아서 한 명이 지나갈 때까지 기다렸다가 그것을 잡고 먹으면 된다. 하지만 그들은 또한 당신이 수행을 주문할 수 있도록 허락한다.

A는 당신이 테이크아웃을 주문할 때 그들이 당신에게 주는 번호가 있는 토큰과 같다. 당신은 요청을 했지만, 결과는 아직 준비되지 않았지만 당신은 자리 표시자를 가지고 있다. 그리고 결과가 준비되면 콜백(테이크아웃 카운터 위의 디지털 보드에 번호가 표시되거나 소리를 지른다)을 받게 됩니다. 이제 들어가서 음식(결과)을 꺼내면 됩니다.

A는 작은 초밥 그릇을 나르는 벨트와 같다. 그 테이블에 앉음으로써, 당신은 스트림을 "구독"했습니다. 다음 스시보트가 언제 도착할지는 모르지만, 셰프(메시지 소스)가 개울(벨트)에 놓았을 때 구독자들은 그것을 받을 것이다. 주의해야 할 중요한 것은 그들이 비동기식으로 도착한다는 것이다(다음 배/메시지가 언제 올지 모른다). 그러나 그들은 순차적으로 도착할 것이다(즉, 요리사가 세 종류의 초밥을 벨트에 어떤 순서대로 올려놓으면 - 당신은 그들이 같은 순서로 당신을 방문하는 것을 보게 될 것이다

코딩 관점에서 미래와 스트림은 비동기(즉각적으로 발생하지 않으며 요청을 한 후 결과를 얻을 수 있을지 모르는 경우)를 처리하는 데 도움이 됩니다.

차이점은 Future는 원샷 요청/응답에 관한 것인 반면(요청합니다. 지연이 있습니다. My Future는 수집할 준비가 되어 있습니다. 완료되었습니다!) 스트림은 단일 요청에 대한 연속적인 일련의 응답입니다(요청합니다. 지연이 있습니다, 그 다음에는 스트림이 마를 때까지 계속 응답이 오거나 스트림을 닫고 떠나기로 결정합니다.).

그게 도움이 되길 바래요.

---

그리고 비슷하게 행동한다: 그들은 각각의 사물의 변화에 귀를 기울인다. 변경된 값 알림에 대한 응답으로 새 빌드가 트리거됩니다.

궁극적으로, 그 차이는 그들이 비동기 통화를 듣는 방법에 있다.

퓨처빌더

그것에 대한 반응은 오직 하나뿐이다. 선물은 일반적으로 http 통화에서 사용됩니다. Future는 데이터 가져오기를 완료했거나 오류가 발생한 경우와 같이 상태를 청취하는 데 사용할 수 있습니다.

예를 들면 링크.

스트림 작성기

스트림과는 반대로, 다른 값을 동화시킬 수 있는 반복기이며, 이는 시간이 지남에 따라 변할 것이다. 각 새 값은 오류 메시지 또는 성공 메시지(있는 경우)와 함께 스트림에 의해 반환됩니다.

예를 들면 링크.

결론

다음 데이터는 위의 내용을 더 잘 이해하는 데 도움이 될 수 있습니다:

API에서 클래스의 총 과정 수와 같이 데이터를 가져와 표시하는 것이 사용 사례입니다. 그런 다음 Future Builder를 사용할 수 있습니다. 만약 그렇다면, 당신이 앱을 사용하는 동안 블로그에 곧 게시될 게시물이나 블로그에 댓글을 늘리거나 블로그에 좋아요를 늘리는 것과 같이 데이터가 매초 또는 분마다 업데이트됩니다. 특정 간격으로 비동기식으로 업데이트되며, 이 경우 StreamBuilder가 가장 좋은 옵션입니다. 사용 사례에 따라 사용할 항목을 결정합니다. 그들은 둘 다 나름대로 좋다.

---

여기 두 경우를 모두 언급하는 완전한 예가 있다. FutureBuilder는 사각형 값을 해결하고 5초 후 결과를 반환하며, 이 때까지 진행 표시기를 사용자에게 보여줍니다.

StreamBuilder는 _count 값을 초당 1씩 증가시키는 스톱워치를 보여줍니다.

void main() => runApp(MaterialApp(home: HomePage()));

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _count = 0; // used by StreamBuilder

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          _buildFutureBuilder(),
          SizedBox(height: 24),
          _buildStreamBuilder(),
        ],
      ),
    );
  }

  // constructing FutureBuilder
  Widget _buildFutureBuilder() {
    return Center(
      child: FutureBuilder<int>(
        future: _calculateSquare(10),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.done)
            return Text("Square = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // used by FutureBuilder
  Future<int> _calculateSquare(int num) async {
    await Future.delayed(Duration(seconds: 5));
    return num * num;
  }

  // constructing StreamBuilder
  Widget _buildStreamBuilder() {
    return Center(
      child: StreamBuilder<int>(
        stream: _stopwatch(),
        builder: (context, snapshot) {
          if (snapshot.connectionState == ConnectionState.active)
            return Text("Stopwatch = ${snapshot.data}");

          return CircularProgressIndicator();
        },
      ),
    );
  }

  // used by StreamBuilder
  Stream<int> _stopwatch() async* {
    while (true) {
      await Future.delayed(Duration(seconds: 1));
      yield _count++;
    }
  }
}

---

와 위젯을 모두 사용하면 데이터 변경에 대응하는 대응형 UI를 구축할 수 있습니다. 그러나, 그들은 그들의 용도와 그들이 사용하는 데이터의 유형에 관한 몇 가지를 가지고 있다.

위젯은 사용자 정보에 대한 네트워크 요청과 같이 를 비동기적으로 검색하려는 경우에 사용됩니다. 데이터 소스로 미래를 예상하고 미래가 완료되면 결과 데이터로 위젯 트리를 재구성합니다.

그러나, 위젯은 실시간 채팅 애플리케이션과 같이 사용자가 원할 때 사용됩니다. 스트림을 데이터 원본으로 예상하며, 새 데이터를 사용할 수 있을 때마다 업데이트된 데이터로 위젯 트리를 재구성합니다.

다음은 몇 가지 다른 점입니다:

에는 미래의 현재 상태를 나타내는 단일 AsyncSnapshot이 있으며, 스트림에서 방출되는 새 데이터 조각을 나타내는 여러 AsyncSnapshot이 있습니다. 위젯이 다시 빌드될 때마다 미래를 실행하고 위젯이 마운트될 때 스트림에 한 번만 가입하고 위젯이 삭제될 때 가입을 취소합니다. 다음은 사용 예입니다

FutureBuilder<String>(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot<String> snapshot) {
    if (snapshot.connectionState == ConnectionState.done) {
      return Text(snapshot.data);
    } else {
      return CircularProgressIndicator();
    }
  },
);

다음은 사용 예입니다

StreamBuilder<int>(
  stream: countStream(),
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    if (snapshot.hasData) {
      return Text('Count: ${snapshot.data}');
    } else {
      return CircularProgressIndicator();
    }
  },
);

요약하면, 는 일회성 비동기 데이터 검색에 사용되며, 는 지속적으로 업데이트되는 데이터를 표시하는 데 사용됩니다.

---

StreamBuilder와 FutureBuilder는 모두 Float에서 비동기 데이터 변경을 수신하는 데 사용할 수 있는 위젯입니다. StreamBuilder는 지속적으로 업데이트되는 데이터를 표시하는 데 사용되고 FutureBuilder는 한 번 검색된 데이터를 표시하는 데 사용됩니다.

StreamBuilder는 데이터 스트림의 변화를 수신하고 FutureBuilder는 미래의 상태를 수신합니다. 즉, StreamBuilder는 라이브 스톡 티커와 같이 지속적으로 변경되는 데이터를 표시하는 데 사용할 수 있는 반면 FutureBuilder는 네트워크 요청 결과와 같이 한 번 검색된 데이터만 표시하는 데 사용할 수 있습니다.

StreamBuilder는 FutureBuilder보다 설정이 더 복잡하지만, 더 유연하고 더 복잡한 데이터를 표시하는 데 사용할 수 있습니다.

일반적으로 지속적으로 업데이트되는 데이터를 표시해야 하는 경우에는 StreamBuilder를 사용하고 한 번 검색되는 데이터를 표시해야 하는 경우에는 FutureBuilder를 사용해야 합니다.