Usare gli StreamBuilder in Flutter

StreamBuilder è un widget per Flutter che ci permette di aggiornare solo una parte della UI quando vengono emessi nuovi dati.

In genere viene usato quando ci sono operazioni asincrone che aggiornano i dati di frequente.

In questo articolo vediamo un esempio per cominciare ad usarli.

Non sono necessarie librerie esterne:

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  static Stream<int> myStream() {
    return Stream.periodic(
      const Duration(seconds: 2),
      (count) => count,
    ).take(10);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: StreamBuilder<int>(
          stream: myStream(),
          initialData: 0,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return const CircularProgressIndicator();
            }

            if (snapshot.hasError) {
              return Text(snapshot.error.toString());
            }

            return Text('Count: ${snapshot.data}');
          },
        ),
      ),
    );
  }
}

Qui mostriamo un semplice count che si incremente con Stream.periodic.

Come vedete viene aggiornato solo il testo, e non tutta l'interfaccia.

Enjoy!