Dictionary App Using Flutter
Hello everyone! so we are back with our new small weekend application “Dictionary App” this app was just a practice for me in streams and streambuilders so I gave it a thought to build this application.
Description
This app will give you the definition of words and also an example sentence related to this word. I have used the Owl Bot API to find the definition and example of the word. You can get your token-id and URL by clicking on the above link.
What is a Stream & StreamController?
In our app, we are using stream and streamcontroller a stream provides a way to receive a sequence of events. Each event is either a data event, also called an element of the stream, or an error event, which is a notification that something has failed. We have declared our stream and streamcontroller and then initialized them in our well-known initState( )
StreamController _streamController;
Stream _stream; @override
void initState() {
_streamController = StreamController();
_stream = _streamController.stream;
super.initState();
}
Now our stream is ready to get the data and tell StreamBuilder about the event received and the data along with it. So this is the work done by our stream which I tried to explain in a short and simple way 😅.
How to use Stream?
Guys, you find the whole code below whose flow I am explaining here I suggest you guys open the code on one tab and this article on another tab for better understanding. So coming to our question, well it's not too complicated at all as we have a textfield to which we assign a textcontroller to get the text/word user enters to get the meaning. As you can see above we have streamController.stream assigned to stream so from now any event added my streamController will reflect on the stream. So now the question arrives how to add the event or data to the streamController when I say event or data it can be an error from exception/error or the response from the HTTP, to add data to our streamController we have an inbuilt function add() by which we add data to our stream and then use them in our widgets to display the event/data. As an example, the below screen displays the message “Type a word to get its meaning” because when nothing is entered on the textfield we pass null to the streamController.add(null) and then in our widget, we check whether the stream has the null value a in it then shows the message like I shown below.
How to display event/data in a widget?
So now we came to our last question, well so now if we get a success response from our HTTP we pass the response body to the streamController.add(response.body) and this is detected in out StreamBuilder, detecting the event/data and showing appropriate widget is done by us. Below is an example of detecting the event and showing a widget
builder: (ctx, snapshot) {
if (snapshot.data == null) {
return Center(
child: Text(
'Type a word to get its meaning 🤔',
style: TextStyle(fontSize: 18, color: Colors.white),),
);
}
if (snapshot.data == 'waiting') {
return Center(child: CircularProgressIndicator());
}
if (snapshot.data == 'NoData') {
return Center(
child: Text(
'No Defination 😭',
style: TextStyle(fontSize: 20, color: Colors.white),),
);
}Here snapshot is something which will have the data in the send from the streamController as we have a stream but we do have a builder that has context and snapshot of the data which is been added to the stream. Creates a new [StreamBuilder] that builds itself based on the latest snapshot of interaction with the specified [stream] and whose build strategy is given by [builder]. So below screen is the example when we have a response.body in our stream:
Source Code: 👇
That’s all folks I don’t want to make it a big one though, so just kept it simple and feel free to copy and paste the code in your projects.
If you liked the article don’t forget to leave some claps and follow me for more interesting articles on flutter development.
Connect me on LinkedIn to know about my work:
Check out my recent article on showing some animated navigations:
