StreamBuilder stuck in connectionState.waiting in Flutter - 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