The StreamBuilder that can listen to exposed streams and return widgets and capture snapshots of received stream data. The stream builder takes two arguments.

1. A stream

2. A Builder, which can convert elements of the stream into widgets

The Stream is like a pipe. When you enter a value from one side and a listener from the other side, the listener will get that value. A stream can have multiple listeners and all those listeners can get the pipeline.puting in all will get equal value. The way you put values on the stream is by using the Stream Controller. A stream builder is a widget that can convert user-defined objects into a stream.

Code Implementation

Create a new dart file called flutter_stream_builder inside the lib folder.

final imgStream = StreamController<Image>();

First of all, Create a stream Controller.

Because we need a controller to manipulate the stream so that we create a controller with the stream property of dart.

return Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
CircularProgressIndicator(
// backgroundColor:Colors.red,
),
SizedBox(
height: 100,
),
Text('Clicks Button',style:TextStyle(color:Colors.black,fontSize:15,fontWeight:FontWeight.w700),),

],
);

There is a button in this screen ,on clicking ,the progress indicator will be removed and go to the next screen and will show the image one by one.

StreamBuilder(
    stream: imgStream.stream,
    builder:
        (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
      if (!snapshot.hasData) {
        return Loader();
      }

      if (snapshot.connectionState == ConnectionState.done) {

      }

      return Container(
        height: 220,
        width: 220,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(10)),
        ),
        //  color: snapshot.data,
        child: ClipRRect(
          borderRadius: BorderRadius.all(Radius.circular(10)),
          child: snapshot.data,
        ),
      );
    }),if (imgCounter < imageList.length) {
  imgStream.sink.add(imageList[imgCounter]);
} else {
  imgStream.close();
}

In this screen we have used streambuilder we have used stream and sink to trigger and share data. which is controlled with a streamcontroller for events and stream.

complete Code File :

import 'dart:async';
import 'package:flutter/material.dart';
import 'package:flutter_stream_builder_demo/loading_widget.dart';

class FlutterStreamBuilder extends StatefulWidget {
@override
_FlutterStreamBuilderState createState() => _FlutterStreamBuilderState();
}

class _FlutterStreamBuilderState extends State<FlutterStreamBuilder> {
double _height;
double _width;

final imgStream = StreamController<Image>();

int imgCounter = -1;

final List<Image> imageList = [
Image.asset(
'assets/images/resort_1.jpg',
fit: BoxFit.cover,
),
Image.asset(
'assets/images/resort_2.jpg',
fit: BoxFit.cover,
),
Image.asset(
'assets/images/resort_3.jpg',
fit: BoxFit.cover,
),
Image.asset(
'assets/images/resort_4.jpg',
fit: BoxFit.cover,
),
];

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

@override
Widget build(BuildContext context) {
_height = MediaQuery.of(context).size.height;
_width = MediaQuery.of(context).size.width;
return Scaffold(
body: Container(
height: _height,
width: _width,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
StreamBuilder(
stream: imgStream.stream,
builder:
(BuildContext context, AsyncSnapshot<dynamic> snapshot) {
if (!snapshot.hasData) {
return Loader();
}

if (snapshot.connectionState == ConnectionState.done) {}

return Container(
height: 220,
width: 220,
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(10)),
),
// color: snapshot.data,
child: ClipRRect(
borderRadius: BorderRadius.all(Radius.circular(10)),
child: snapshot.data,
),
);
}),
RaisedButton(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(30.0),
),
onPressed: () {
// colorStream.sink.add(Colors.blue);

imgCounter++;

if (imgCounter < imageList.length) {
imgStream.sink.add(imageList]imgCounter[);
} else {
imgStream.close();
}
},
color: Colors.red,
textColor: Colors.white,
child: Text(" Click Me ".toUpperCase(),
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
letterSpacing: 1)),
),
],
),
),
);
}
}