Using Stream Builder Effectively

Question

Please i will like to know what am doing wrong here, my intention is for the list of widget to be scrollabe and not overflow, but right now singlechildscrollview with spread operator did not solve my issue, here is the part of the code.

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

  @override
  State<CheckInUpdateLogCard> createState() => _CheckInUpdateLogCardState();
}

class _CheckInUpdateLogCardState extends State<CheckInUpdateLogCard> {
  late Stream activityTextStream;
  final apartmentUpdate = [
    'Slavador',
    'Cusco',
    'Helsinki',
    'Suzda',
    'Slavador',
    'Cusco',
    'Helsinki',
  ];

  @override
  void initState() {
    super.initState();
    activityTextStream = getActivityText();
  }

  Stream getActivityText() async* {
    await Future.delayed(const Duration(seconds: 5));
    yield apartmentUpdate;
  }

  @override
  Widget build(BuildContext context) {
    return Container(
      height: 500,
      width: double.infinity,
      padding: const EdgeInsets.all(20),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(20),
        color: AppColors.greyBackgrond,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: [
          const ApartmentText(
            theText: 'Recent Activities',
            theColor: AppColors.blackHeaderColor,
            theSize: 24,
          ),
          kSpacerHeight20,
          StreamBuilder(
              stream: activityTextStream,
              builder: (context, snapshot) {
                if (snapshot.connectionState == ConnectionState.waiting) {
                  return Center(
                      child: CircularProgressIndicator(
                    backgroundColor: AppColors.greyBackgrond,
                  ));
                } else if (snapshot.hasData) {
                  final textData = snapshot.data;
                  List<Widget> returnWidgets = [];
                  for (var theTextWidget in textData) {
                    final messageWidget =
                        ActivitiesText(theText: '$theTextWidget');
                    returnWidgets.add(messageWidget);
                  }
                  return SingleChildScrollView(
                    child: Column(
                      children: [...returnWidgets],
                    ),
                  );
                } else {
                  return const Text('No Data');
                }
              }),
        ],
      ),
    );
  }
}

And also adding to my list to get more widget i have to reload the app. How can i make it update when i update the list.

Answer 1

You can see this code and run it here

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

@override
State<CheckInUpdateLogCard> createState() => 
_CheckInUpdateLogCardState();
}

class _CheckInUpdateLogCardState extends State<CheckInUpdateLogCard> {
late Stream<int> randomNumberStream;
List<int> numbers = List.generate(100,(index)=>(index+1));

@override
void initState() {
super.initState();
randomNumberStream = getRandomNumbers();
}

Stream<int> getRandomNumbers() async* {
while (numbers.length > 0) {
  await Future.delayed(const Duration(seconds: 1));
  var number = numbers[Random().nextInt(numbers.length)];
  numbers.remove(number);
  yield number;
}
}

@override
Widget build(BuildContext context) {
return Container(
  height: 500,
  width: double.infinity,
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    borderRadius: BorderRadius.circular(20),
    color: Colors.white,
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.center,
    mainAxisAlignment: MainAxisAlignment.center,
    children: [
      Text(
        'Random numbers',
        style: TextStyle(fontSize: 20),
      ),
      SizedBox(height: 20),
      StreamBuilder<int>(
          stream: randomNumberStream,
          builder: (context, snapshot) {
            if (snapshot.connectionState == ConnectionState.waiting) {
              return Center(
                  child: CircularProgressIndicator(
                backgroundColor: Colors.white,
              ));
            } else if (snapshot.hasData) {
              final textData = snapshot.data;
              return Center(child: Text(textData.toString()));
            } else {
              return const Text('No Data');
            }
          }),
    ],
  ),
);
}
}

Like this, you can use Stream Builder effectively.