Explore Google Gemini API With Flutter, BloC & Clean Architecture. (Habbito App ) — PT1

Hi and Glad that you bumped into this article. Thumbs up 🚀 if you follow along and get to learn .Please add any comment when you have any. In this article we’re going to create Habbito App — An app Idea I have been thinking of for quite sometime. Its a simple app that uses Google Gemini API to get a list of top Addiction Habits, Fetches vast information about the habbits and How to quit them. It gets up-to date information concerning Habbits using Conversational Text Context AI Prompts . We will go further to explore how to dynamically prompt for more information using dynamic querying for our app to maintain the flow of interactivity within our app. We will create a chat page too to allow live interaction where you can ask for any information related to habbits and the app responds with well curated responses based on Current context and ethical information based onGemini AI.

Below is a Short illustration of what the final project will/ would 😊 look like.

IOS Simulator screenshots — Ben Salcie

This tutorial will assumes you have some understanding on the following:

1. Flutter App Development fundamentals.
2. Basic Understanding of Gemini API
3. Some knowledge on Clean Architecture
4. Some understanding on BloC State Management.

In the next part we will dive into setting up the project and how to begin & the actual implementation. If you a want to jump straight to the complete project 🤗 head over here GitHub Repo

Stay tuned for part two…..

Fun Fact About Google Gemini API. 🔥

Gemini was built upon the foundational research and technology of Google’s Pathways Language Model (PaLM), which demonstrated impressive capabilities in various language tasks, including generating different kinds of creative content.

Welcome back for another part . Here we will jump straight into it. However I will be gentle enough to give you an overview of what we need to do.

1. Setup our Flutter project.
2. Add Required Dependancies.
3. Basis house cleanup.
4. Architecture setup — Clean Architecture.

Lets Get started.

Lets jump into it now. Open terminal at the directory of your choice, for this case, ➜ ~ /Users/bensalcie/AndroidStudioProjects/FLUTTER . Assuming you already have flutter setup on your PC. If not check here and come back.

Create a new flutter flutter project by typing flutter create habbitoapp

Open this in your favourite Code Editor, I like Visual Studio code for Flutter, and prefer Android Studio for Native Android Kotlin projects. However you could use any of your choice. Below is how it would look like — This is a basic Template that comes with Flutter. We will Edit a couple if things to bring up our design to be up-to speed with what looks cool to our eyes.

What you should see once you open newly created project in IDE

Here we will do a couple of refactors to ensure our App can “Breath” — Allowing us to only touch files when necessary and focus on whats necessary. Lets start by first adding all the required dependancies. In your pubspec.yaml

Some of the dependancies have been added to facilitate later upgrades to the project with more cooler features 😊. Essentially yours should look like this.

One of the first Dependancy , is the .env package that will aid in managing our dev and release versions of the app.

So lets go ahead and create two files, .env and .dev.env files. and add contents as shown.

These hidden files will be used to manage our Sensitive credentials on DEV and RELEASE Environments. Looking at it , we have Credentials for GEMINI API Key and PEXEL API KEY and the Corresponding Base URLS for PEXEL . PEXEL is relatively strange over here, but its just a fancy platform to help us make our app lively by providing our source of images. We make silent API calls to PEXEL to get suggested images after AI gives us textual context.

Next is to create our folder structure with Clean Architecture. Create the following folders:

1. core — Will hold our Core shared modules.
2. features — All features will go here with seperation of concerns.
3. di — This module will hold our Dependancy Injection modules .
4. themes — We will maintain all our stylings over here

The first module we will setup is the di module , we will have two files.

1. injection.dart — Will be responsible to configureDependencies accross our app. We will Initialize all our dependancies as the first thing our app starts.

injection.dart

2. module_injection.dart — This file will be responsible for Registering our Modules. We will heavily be depending on SharedPreferences, Method Channels , for platform coms, BASE URL for PEXEL API Implementations.

module_injection.dart

At this point , the only one class is missing to Complete registering our Modules is gemini_model_service.dart and we will talk more about it in the next Part.

Cheers for Reaching this end. 🚀 Lets meet on the next part.