Menjelajahi Flutter Stream Builder: Panduan Pemula

Mar 07 2023

Halo, teman kecil! Apakah Anda ingin mempelajari sesuatu yang disebut Flutter Stream Builder? Ini mungkin terdengar sedikit menakutkan, tapi jangan khawatir, saya akan menjelaskannya kepada Anda dengan cara yang mudah dimengerti. Flutter adalah alat yang digunakan orang untuk membuat aplikasi keren untuk ponsel dan tablet.

Flutter adalah alat yang digunakan orang untuk membuat aplikasi keren untuk ponsel dan tablet. Stream Builder adalah alat khusus di dalam Flutter yang membantu menunjukkan kepada Anda hal-hal yang berubah dari waktu ke waktu. Ini seperti melihat video yang terus diputar dan berubah saat Anda menontonnya.

Bayangkan Anda memiliki mainan yang mengeluarkan angka berbeda setiap detik. Anda ingin menunjukkan nomor itu di layar ponsel Anda. Bagaimana Anda melakukannya? Anda menggunakan Stream Builder! Ini membantu Anda mendengarkan mainan dan menampilkan nomor di layar setiap kali berubah.

Sekarang, mari kita lihat cara kerjanya dalam kode. Anda tahu bagaimana orang dewasa menggunakan kode untuk berbicara dengan komputer? Kita juga bisa melakukannya! Berikut tampilan kodenya:

StreamBuilder<int>(
  stream: yourToy.streamOfNumbers,
  builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
    if (snapshot.hasData) {
      return Text('The number is: ${snapshot.data}');
    } else {
      return Text('Loading...');
    }
  },
),

Mari kita lihat aplikasi demo yang menggunakan Stream Builder untuk menampilkan nomor acak di layar setiap detik.

Pertama, kami membuat proyek Flutter baru dan membuka main.dartfile. Kami kemudian membuat RandomNumbersScreenwidget yang menghasilkan aliran angka acak setiap detik menggunakan Stream.periodickonstruktor.

Kode Aplikasi Demo

Berikut adalah aplikasi demo sederhana yang menggunakan Stream Builder untuk menampilkan daftar angka acak yang diperbarui setiap detik:

import 'dart:async';
import 'dart:math';

import 'package:flutter/material.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      title: 'Stream Builder Demo',
      home: RandomNumbersScreen(),
    );
  }
}

class RandomNumbersScreen extends StatefulWidget {
  const RandomNumbersScreen({Key? key}) : super(key: key);

  @override
  _RandomNumbersScreenState createState() => _RandomNumbersScreenState();
}

class _RandomNumbersScreenState extends State<RandomNumbersScreen> {
  late Stream<int> _randomNumbersStream;

  @override
  void initState() {
    super.initState();
    _randomNumbersStream = Stream.periodic(
        const Duration(seconds: 1), (i) => Random().nextInt(100));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Random Numbers'),
      ),
      body: Center(
        child: StreamBuilder<int>(
          stream: _randomNumbersStream,
          builder: (BuildContext context, AsyncSnapshot<int> snapshot) {
            if (snapshot.hasData) {
              return Text(
                'Random number: ${snapshot.data}',
                style: const TextStyle(fontSize: 24),
              );
            } else if (snapshot.hasError) {
              return Text('Error: ${snapshot.error}');
            } else {
              return const CircularProgressIndicator();
            }
          },
        ),
      ),
    );
  }
}

Saat aplikasi pertama kali dimulai, kami menampilkan lingkaran berputar untuk memberi tahu pengguna bahwa sesuatu sedang terjadi. Saat nomor acak tersedia, kami menampilkannya di layar dengan ukuran font yang lebih besar. Jika ada kesalahan, kami menampilkan pesan kesalahan sebagai gantinya.

Kesimpulan

Itu dia! Anda telah mempelajari cara menggunakan Flutter Stream Builder untuk menampilkan hal-hal yang berubah dari waktu ke waktu. Anda dapat menggunakannya untuk menampilkan apa pun yang Anda inginkan yang terus berubah, seperti cuaca atau skor pertandingan.