StreamBuilder stuck in connectionState.waiting in Flutter

Question

I am trying to create a todo list application, i used Streambuilder to show list of Streams. it is a simple application there is a button to add new task it is a floatingActionButton and a StreamController to manage the data, and have a TabBar with two tabs first and second so the StreamBuilder is in the first tab and other tab just contain a string in the center for now.

I can add tasks to the StreamController perfectly, but there is two issues:

1- when the program runs StreamBuilder stuck in ConnectionSatate.waiting if the Stream is null.

2- when i click second tab and came back to first tab the it also stuck in ConnectionSatate.waiting even my stream has data in it, and when i click add button to add new data it shows the data and the new one again.

here is my whole code:

import 'dart:async';
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(
      home: const MyHomePage(),
    );
  }
}

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

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

class _MyHomePageState extends State<MyHomePage> {
  final StreamController<List<String>> streamController =
      StreamController<List<String>>.broadcast();

  List<String> list = [];

  @override
  void initState() {
    super.initState();
  }

  @override
  void dispose() {
    streamController.close();
    super.dispose();
  }

  int i = 0;

  @override
  Widget build(BuildContext context) {
    return DefaultTabController(
      length: 2,
      child: Scaffold(
        appBar: AppBar(
          bottom: PreferredSize(
            preferredSize: Size.fromHeight(0),
            child: Container(
              height: 30,
              width: MediaQuery.of(context).size.width,
              child: TabBar(
                  labelColor: Theme.of(context).iconTheme.color,
                  indicatorColor: Colors.green.shade600,
                  tabs: [
                    Tab(text: 'first'),
                    Tab(text: 'second'),
                  ]),
            ),
          ),
        ),
        body: TabBarView(children: [
          tasks(),
          Center(
            child: Text('SECOND TAB'),
          )
        ]),
        floatingActionButton: TextButton(
            onPressed: () {
              list.add('data ${++i}');
              streamController.sink.add(list);
            },
            child: Icon(
              Icons.add,
            )),
      ),
    );
  }

  Padding tasks() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 13, vertical: 5),
      child: Column(
        children: [
          Expanded(
              child: StreamBuilder(
                  stream: streamController.stream,
                  builder: (context, snapshot) {
                    if (snapshot.connectionState == ConnectionState.waiting) {
                      return const Center(child: CircularProgressIndicator());
                    }
                    if (!snapshot.hasData) {
                      return const Center(
                        child: Text('There is no data'),
                      );
                    }
                    return ListView.builder(
                        itemCount: snapshot.data!.length,
                        itemBuilder: (context, index) => Padding(
                              padding: const EdgeInsets.all(8.0),
                              child: Text(
                                snapshot.data![index],
                                style: const TextStyle(
                                  fontSize: 25,
                                ),
                              ),
                            ));
                  })),
        ],
      ),
    );
  }
}

here is a video of my problem

I tried without StreamController but when i came back to first tab it shows the error that i can't listen to a Stream multiple times.

Answer 1

here is the answer, you need to use AutomaticKeepAliveClientMixin I wrote a demo code sample for you https://dartpad.dartlang.org/?id=52e8e2ef8bad97f21dc91fa420dcec0e