Advanced Flutter Project - Setting Up the Basic Structure - Part One

in utopian-io •  5 days ago


What Will I Learn?

  • You will learn about BLoC structure
  • You will learn how to use Streams and Sinks
  • You will learn how Utopian Works
  • You will learn how to access APIs
  • You will learn how to join together Tabs and Stream Events
  • You will learn how to refactor a flutter project


System Requirements:
OS Support for Flutter:
  • Windows 7 SP1 or later (64-bit)
  • macOS (64-bit)
  • Linux (64-bit)

Required Knowledge

  • A basic knowledge of localization
  • A fair understanding of Mobile development and Imperative or Object Oriented Programming
  • Basic knowledge of how to read JSON-like data or ARB data

Resources for Flutter and this Project:


Flutter Logo (Google):


  • Advanced


In this tutorial video, we setup the basic structure for the Utopian Rocks Mobile application so that in future videos, it will be possible to expand upon the code and add new features. The Utopian Rocks Mobile application is a prime application for a tutorial because it features many advanced concepts that can't be covered on their own. The application features two main BLoCs (Business Logic Components) and it gets its data from three separate APIs. It uses a Custom Font, has a custom launcher icon, and uses many other advanced features from the flutter platform.

Building an Application based on an Existing Application

The original Utopian Rocks application is based on an existing web application. This application was created because the Utopian front end was compromised. Contributors wanted a way to be able to see the moderation process and the voting process at a glance. The application features multiple pages which show the multi-step process that a contribution goes through when it enters the Utopian platform.


The web application featured above shows the basic layout of the Utopian Rocks application. Contributions are laid out in a list with their title, repository and category. You can filter the contributions by category using the icons at the top as well. The "Waiting for Review" page shows all of the contributions awaiting moderation. The "Waiting for Upvote" page shows all contributions that have been moderated and are waiting for an upvote.


The mobile version of this application that we are building in this series mirrors the web application in look and in functionality. Two primary tabs exist to show the user the general Utopian Pipeline in the same way that it is shown on the web application. Each contribution is also laid out in the same way that they are found on the web application. Users also have the ability to filter through each of the contributions by category just like with the web application.

Building a BLoC for the Contribution Data

To get started rebuilding this application, we need to be able to bring the in data from the Utopian Rocks API endpoints. For this purpose, we can build a Business Logic Component or BLoC. This BLoC allows us to manage the state and data of the application using streams and sinks in a very reactive manner. As the user does something with the User interface, the data will change accordingly.


In this case, the user interacts with the view either by opening the application or by choosing a tab. The each tab sends a string event back to the BLoC through a pageName sink or behavior subject. The sink then enters the BLoC and it calls the API to get the data. The data is then passed back to the results stream and this stream creates the resulting view. Because pageName is a behavior subject it will only call to the API if the string event is different from the proceeding event which stops the application from calling the API when the Tab is not changed.

The Source Code for this video may be found here:

Video Tutorial


Projects and Series

Stand Alone Projects:
Building a Calculator
Movie Searcher Application

Minesweeper Game

Weather Application

Redux Todo App


Proof of Work Done

Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

Hello @tensor

Thank you for your contribution to video tutorials.

Your video tutorial on the Advanced Flutter Project showing how it works alongside with Utopian is excellent.

Everything you have taught in the video + the write up on this post is of excellent standard.

I have rated it 100 point score because of the great value you are giving with this Utopian Rocks Mobile application.

As always, your video, audio quality and presentation are top-notch.

Your contribution has been evaluated according to Utopian policies and guidelines, as well as a predefined set of questions pertaining to the category.

To view those questions and the relevant answers related to your post, click here.

Need help? Write a ticket on
Chat with us on Discord.


Thank you for moderating my contributions as always. Nice to see that I got such a high score.


Thank you for your review, @rosatravels! Keep up the good work!


Thanks Utopian

Posted using Partiko Android

Hi, @tensor!

You just got a 7.41% upvote from SteemPlus!
To get higher upvotes, earn more SteemPlus Points (SPP). On your Steemit wallet, check your SPP balance and click on "How to earn SPP?" to find out all the ways to earn.
If you're not using SteemPlus yet, please check our last posts in here to see the many ways in which SteemPlus can improve your Steem experience on Steemit and Busy.

This post has been voted on by the SteemSTEM curation team and voting trail.

If you appreciate the work we are doing then consider voting us for witness by selecting stem.witness!

For additional information please join us on the SteemSTEM discord and to get to know the rest of the community!

Hey, @tensor!

Thanks for contributing on Utopian.
We’re already looking forward to your next contribution!

Get higher incentives and support!
Simply set as a 5% (or higher) payout beneficiary on your contribution post (via SteemPlus or Steeditor).

Want to chat? Join us on Discord

Vote for Utopian Witness!