DEV Community: Dhanush Vardhan

Power your Flutter App with Gemini AI ✨

Dhanush Vardhan — Fri, 16 Feb 2024 08:38:10 +0000

Flutter Meets AI: Supercharge Your App with Gemini's Magic ✨

Picture this: your Flutter app, but with a superpower of Google's new AI. I'm talking text that writes itself, images that tell their own stories, and code that practically completes itself! That's the power of Gemini, Google's super cool AI model, and it's ready to level up your app game.

So, what's this Gemini you speak of?

Think of it as your personal AI genie, granting wishes in the form of text generation, image analysis, and even code understanding. This means you can:

Craft personalized content: Imagine your app writing product descriptions that adapt to each user, or summarizing news articles for quick reads. Boom! Instant engagement.
Make images come alive: Let Gemini automatically caption user-uploaded pics, or use them to search for similar products. Visual magic, unlocked! ‍♀️
Become a coding ninja: Get AI-powered suggestions and autocompletion, making you a coding rockstar. Plus, debug like a pro with code comprehension tools.

Ready to get your AI groove on?

No need for complicated spells! Here's the breakdown:

Pick your AI playground:
- Vertex AI: Google's easy-to-use platform for accessing Gemini, like renting a pre-built castle for your AI party.
- Google Cloud Functions: More control for the tech-savvy wizards, build your own custom AI fortress!
Connect the dots:
- google_generative_ai: This handy package is like a magic wand for talking to Gemini from your Flutter app. ✨
- DIY with HTTP: Want more control over the spells? Use this code library for custom API calls. 🪄

Let's do some AI-fu!

Here's a taste of how to generate text with google_gemini:

Let's first install the package! Open up your terminal in the root folder of your Flutter project and run this code

flutter pub add google_gemini

Get your API Key here

Once you get that done, let's get coding


import 'package:google_gemini/google_gemini.dart';

Future<String> writeMeASong(String topic) async {
  final gemini = GoogleGemini(
    apiKey: "<---Your-API-Key--->",
  );
  final response = await gemini.generateFromText("Write me a song");

  return response.text;
}


void main() async {
  final mySong = await writeMeASong("cats and dogs");
  print(mySong); // Now you have an AI-generated song!
}

But wait, there's more!

Combine text and images for even cooler stuff, like generating stories based on pictures.

Train Gemini to understand your app's specific lingo for even more personalized magic.

Remember, with great AI power comes great responsibility...:

Use Gemini ethically and for good.

Keep an eye on those API costs, don't go bankrupt building your AI!
Respect user privacy, data is precious!
So, are you ready to unleash the power of AI in your Flutter app? Dive in, experiment, and see what amazing things you can create! With Gemini by your side, the possibilities are endless.

Flutter's Provider: The Superhero of State Management!

Dhanush Vardhan — Sat, 18 Nov 2023 08:28:50 +0000

What is a Provider? 🤔

Imagine you're at a buffet (yum!). You have a plate (your app screen) and a variety of dishes (data) to choose from. Now, you don't cook a new dish every time you want to eat (that's just exhausting!). Instead, you go to the buffet (Provider) and pick what you need. Easy peasy! Provider in Flutter is like this buffet. It's a central spot where your app's data is stored, ready to be used by different widgets.

Let's use a real-life analogy to explain this concept:

Imagine you're building a to-do list app. In this app, you have a list of tasks that you want to display on different screens, like the home screen and a detail screen for each task. You also want to be able to add, edit, or delete tasks from any screen.

Now, think of the Provider as a bucket. This bucket contains your list of tasks. Every time you make a change to this bucket, it automatically updates all the screens in your app that are interested in the task list.

Why Use Provider? 🚀

Using setState everywhere in Flutter can be like using a hammer for every problem - not ideal! It can lead to performance issues and make your app as slow as a sloth on a lazy day. Provider to the rescue! It separates your app's brain (logic) from its beauty (UI), keeping your code clean, organized, and as pretty as a picture.

Using Provider in a Todo/Task App

1. Import Dependency

dependencies:
  provider:

2. Create a Model Class for Our Task

class Task {
  final String title;
  final String description;

  Task({required this.title, required this.description});
}

3. Creating a Provider

You create a provider by defining a class that holds the data you want to share, in this case, your task list.

class TaskProvider extends ChangeNotifier {
  List<Task> _tasks = [];

  // Methods to add, edit, or delete tasks go here

  // Getter to access the task list
  List<Task> get tasks => _tasks;

  // Method to add a new task
  void addTask(Task newTask) {
    _tasks.add(newTask);
    notifyListeners(); // Notify listeners to rebuild widgets
  }
}

4. Initializing the Provider

You create an instance of your provider class and make it available to your app. This is typically done at the root of your app using a ChangeNotifierProvider.

void main() {
  runApp(
    ChangeNotifierProvider(
      create: (context) => TaskProvider(),
      child: MyApp(),
    ),
  );
}

5. Accessing Data

Now, any widget in your app can access the task list from the provider. For example, your home screen can display the list of tasks like this:

final tasks = Provider.of<TaskProvider>(context).tasks;

6. Updating Data

When you add, edit, or delete a task, you do it through the provider. The provider updates its internal data and automatically notifies all the widgets that are listening to it. For example, when you add a new task:

final taskProvider = Provider.of<TaskProvider>(context);
taskProvider.addTask(newTask);

7. Widget Rebuild

When the provider notifies that the data has changed, widgets that depend on that data will automatically rebuild to reflect the updated information. So, your home screen will refresh to display the new task you added.

ListView.builder(
  itemCount: taskProvider.tasks.length,
  itemBuilder: (context, index) {
    final task = taskProvider.tasks[index];
    return ListTile(
      title: Text(task.title),
      subtitle: Text(task.description),
    );
  },
),

That's it you aced this!!! It was that simple

Conclusion 🌈

So, next time you dive into a Flutter project, remember the Provider - your data management superhero! With Provider, managing state is as smooth as spreading butter on warm toast. Happy Fluttering 🎉✨🚀

Simplifying CRUD Operations with Firestore and Flutter: A Beginner's Guide

Dhanush Vardhan — Tue, 07 Nov 2023 05:32:12 +0000

Welcome, Flutter enthusiasts and future mobile app developers! If you're looking to create dynamic, scalable, and real-time mobile applications, learning how to perform CRUD (Create, Read, Update, Delete) operations with Firestore in Flutter is essential. This beginner-friendly guide will walk you through the fundamental steps of integrating Firestore with Flutter and how to work with photos within your app.

Before diving in, make sure you have the following ready:

A basic understanding of Dart and Flutter.
Flutter installed on your machine.
And make sure you were your thinking caps !!

Step 1: Create a Firebase Project

Navigate to your Firebase Console and click Add Project.

Step 2: Setup Your Firebase Project

Give your project a name and enable google analytics.

Step 3: Connecting the Flutter App to the Firebase Project

To connect the flutter app to firebase, we must install firebase-cli. (PS: this requires nodejs to be installed https://nodejs.org/en/download)

npm install -g firebase-tools

firebase login

Now go ahead and click the Flutter icon on the dashboard of your firebase project.

Run the commands and you'll have your Firebase Project connected to your Flutter App

Now navigate to main.dart and paste this code just above your runApp()

Lesssgoooo 🎉 you've SUCCESSFULLY Connected your Flutter app to Firebase

Now you just have to navigate to Firestore and enable the feature

Step 4: Adding Dependencies

First, add the necessary Firestore package to your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  cloud_firestore: ^latest_version
  firebase_storage: ^latest_version

After saving the file, run flutter pub get in your terminal to install the packages.

CRUD Operations

Create (Adding Data)
To add data to Firestore, you'll use the collection and add methods:

FirebaseFirestore.instance.collection('users').add({
  'name': 'Jane Doe',
  'age': 30,
  'email': 'jane.doe@example.com',
});

Read (Retrieving Data)
To fetch data, you'll use collection and get:

FirebaseFirestore.instance.collection('users').get().then((querySnapshot) {
  querySnapshot.docs.forEach((result) {
    print(result.data());
  });
});

Update (Modifying Data)
For updating a document, you'll need its ID:

FirebaseFirestore.instance.collection('users').doc(documentId).update({
  'age': 31,
});

Delete (Removing Data)
To delete a document, also use the document's ID:

FirebaseFirestore.instance.collection('users').doc(documentId).delete();

Integrating Photos with Firestore and Flutter
Working with photos involves storing the images in Firebase Storage and keeping references in Firestore.

Uploading Images

Apart from just Firestore, Firebase offers a lot of other features to like Firebase Storage and much more....

Now lets take a loot at how to use Firebase Storage!!

Step 1: Uploading Images into the Firebase Storage

FirebaseStorage storage = FirebaseStorage.instance;
TaskSnapshot snapshot = await storage.ref('uploads/user-profile.jpg').putFile(imageFile);
String downloadUrl = await snapshot.ref.getDownloadURL();

Step 2: Storing Image URLs in Firestore
After uploading, save the image URL to Firestore:

FirebaseFirestore.instance.collection('users').doc(userId).update({
  'profileImageUrl': downloadUrl,
});

Step 3: Displaying Images in Flutter
To display the image, use the Image.network widget with the Firestore URL:

Image.network(downloadUrl);

Congratulations! 🎉🎉

You now have a foundational understanding of CRUD operations in Firestore with Flutter and how to integrate photos into your app. As you continue your journey, remember that practice is key to mastery. Keep experimenting, building, and learning.

Happy coding!

What is Flutter, how do I get started ??!!!

Dhanush Vardhan — Fri, 13 Oct 2023 22:01:32 +0000

Flutter is gaining a lot of hype now, but what is it in the first place, is it hard to learn, is it worth the learning??? Don't worry, I've got you

Flutter is a cross-platform development toolkit, basically, you only need to code once but you'll have an app ready to ship for both Android and IOS mainly!! Well, that's amazing but what about the performance? Performance is not even a doubt, Flutter gets really close to native app performance and renders apps at 60fps, that's just as smooth as butter!!🧈🧈

Now let's get coding

Everything in Flutter is a widget, in fact, the screen itself is a widget. Now let's create our first app in Flutter

Go to your terminal and hit

flutter create counter_app

Now that you've created the Flutter project, drag and drop the folder in VS Code.

Navigate to main.dart in the lib folder and run the project on an emulator

Now I know the code looks very intimidating, but that's why I'm here to help you out.

The first thing you should notice is the StatelessWidget and StatefulWidget in the code. To put it in a simple way, StatefulWidget is used when the content on the screen needs to be dynamic or in other words the state needs to be altered. StatelessWidget is used when you don't want any change in the screen's content. Yes, it's as simple as that!!!

If you want to create a StatefulWidget, just type stf and your code editor will generate the code for you. If you want a StatelessWidget, you should type stl.

Now you see you have a function called _incrementCounter which has setState in it. Now what on earth is that?!!!

As the name says setState is used to set the state of a variable. In this app, we want to increment the state of the counter variable every time we hit the increment button hence we are using setState to change the state of the _counter.

Now let's take a look at the other crazy stuff we have in our app

As I told you before, everything in Flutter is a widget the MyHomePage screen itself is a widget. Inside the MyHomePage widget/screen, we need to add more widgets to display content on the screen. Starting with the Scaffold

Scaffold: This widget basically provides you a canvas to place all the other widgets you need in an app. For example, if you are going to a Supermarket to get some snacks for your weekend Netflix, you will definitely need a bag to place all your snacks. The bag here is your Scaffold and the other snacks you'll want inside the bag can be the other widgets. These snacks will be placed inside the body property of your Scaffold
Text: As the name itself says, a Text widget will help you place text on the screen

But what should I do to place these widgets in the order I want??!!! That's why we've got the Layout Widgets.

We have Column, Row, Stack, and many more...

But what are children and child that I can see in these Layout Widgets??!!!

children is just a property that takes a list of widgets that needs to be placed in a Layout Widget.
child is a property that takes a single widget that needs to be placed in a Layout Widget.

Now you know everything that you need to start dashing with Flutter

That's it guys, you've nailed this!!!

There is a bucket load of widgets that Flutter offers you, check them out at Flutter Widget Catalog

If you are already starting to love Flutter Check out my Video or Schedule a meeting with me