Stream Builder In Flutter
In this blog, we will explore the Stream Builder in a flutter. We will be using some core functions available in a flutter. We will implement a demo of the Stream Builder in your flutter applications.
Table of Contents :
Flutter :
“ Flutter is Google’s UI toolkit that helps you build beautiful and natively combined applications for mobile, web, and desktop in a single codebase in record time ”
Stream Builder :
The StreamBuilder can listen to exposed streams and return widgets and capture snapshots of received stream data. The stream builder takes two arguments.
- 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.
Demo Module :
Code Implementation
Create a new dart file calledflutter_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.
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.
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),),
],
);
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.
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();
}
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)),
),
],
),
),
);
}
}
Conclusion :
In this article, I have explained a Stream Builder demo, you can modify and experiment according to your own, this little introduction was from the Stream Builder our side.
I hope this blog helps will provide you with sufficient information in Trying up the Stream Builder in your flutter project. So please try it.
❤ ❤ Thanks for reading this article ❤❤
If I got something wrong? Let me know in the comments. I would love to improve.
Clap 👏 If this article helps you.
Feel free to connect with us
And read more articles from FlutterDevs.com
FlutterDevs team of Flutter developers to build high-quality and functionally-rich apps. Hire flutter developer for your cross-platform Flutter mobile app project on an hourly or full-time basis as per your requirement! You can connect with us on Facebook, GitHub, Twitter, and LinkedIn for any flutter related queries.
We welcome feedback and hope that you share what you’re working on using #FlutterDevs. We truly enjoy seeing how you use Flutter to build beautiful, interactive web experiences
