Skip to content

DEV Community

Samuel Adekunle

Posted on Apr 15 • Originally published at techwithsam.dev

Get Started with Firebase AI Logic + Flutter: Build A Simple Caption Generator

#firebase #flutter #gemini #techwithsam

This will be a continuation from the last article on Genkit Dart for Flutter Developers; you can check it out here.

WHAT IS FIREBASE AI LOGIC?

Firebase AI Logic (previously known as Vertex AI in Firebase) is Google’s official way to give your Flutter (iOS, Android, and web) apps direct, secure access to the latest Gemini models.

Today, we will build a simple app with Firebase AI Logic. We will learn how to use Firebase AI Logic with Gemini models in real Flutter apps.

To get started, create a new Firebase project or use an existing one. Once you have your Firebase project set up, you also need to connect it to your Flutter project. Under project categories on Firebase → AI services → AI Logic → Get started (Gemini Developer API — Vertex AI Gemini API), we’ll continue with the Gemini Developer API

That’s all for the setup.

QUICK SETUP IN FLUTTER

flutter pub add firebase_ai

You must added firebase_core package

In main.dart

void main() async {
  await Firebase.initializeApp(options: DefaultFirebaseOptions.currentPlatform);

  runApp(const MyApp());
}

Then we can create a new file caption_generator.dart

void _generateCaption() async {
    if (_captionController.text.isEmpty) {
      ScaffoldMessenger.of(context).showSnackBar(
        const SnackBar(
          content: Text('Please enter a description to generate a caption.'),
        ),
      );
      return;
    }
    try {
      setState(() => _isGenerating = true);

      final model = FirebaseAI.googleAI().generativeModel(
        model: 'gemini-3.1-flash-lite-preview',
        generationConfig: GenerationConfig(
          maxOutputTokens: 50,
          temperature: 0.7,
        ),
        systemInstruction: Content.system(
          'You generate concise captions that are catchy and engaging, suitable for social media posts or advertisements.'
          'Do not use markdown, bullet points, headings, code blocks, or JSON.',
        ),
      );

      final response = await model.generateContent([
        Content.text(_captionController.text),
      ]);

      setState(() => _generatedCaption = response.text!);
    } catch (e) {
      print('Error generating caption: $e');
      ScaffoldMessenger.of(
        context,
      ).showSnackBar(SnackBar(content: Text('Error generating caption: $e')));
    } finally {
      setState(() => _isGenerating = false);
    }
  }

techwithsam / ai_content_generator

Genkit Dart for Flutter Developers: Build Full-Stack AI Apps in 2026 (Getting Started)

AI Content Generator - Genkit Dart

A full-stack Dart application featuring a Flutter frontend and a Dart backend.

Genkit Dart for Flutter Developers - Watch on youtube

Source Code Structure

This project follows a feature-based architecture separating the frontend UI and the backend logic.

`lib/` (Flutter Frontend)

Contains the UI and client-side logic for the Flutter application.

main.dart: The main entry point for the Flutter app.
features/: Contains feature-specific code (e.g., home_page.dart and home_controller.dart).
shared/: Contains shared resources used across the application:
- models/: Application data models.
- services/: Client-side services for API integration and business logic.
- theme/: App-wide styling and themes.

`backend/` (Dart Backend)

Contains the backend server environment.

bin/my_genkit_app.dart: The main entry point for the Genkit backend application.

Platform Directories

android/, ios/, macos/, linux/, windows/, web/: Standard platform-specific directories for building the Flutter app for each…

BEST PRACTICES FOR PRODUCTION

Always use App Check + Firebase Auth — never trust the client blindly
Start with Flash models for speed and cost, upgrade to Pro only when you need heavy reasoning
Keep prompts in Remote Config so you can iterate without redeploying the app
Cache frequent responses in Firestore to save cost and latency Monitor usage in Firebase console — set budgets early
For complex multi-step workflows or heavy tool use, consider moving logic to Genkit on the backend instead of doing everything client-side

There you have it — Firebase AI Logic lets Flutter developers finally build real full-stack AI apps without leaving the Dart ecosystem.

If this article helped you even a little, smash that clap button and subscribe so you don’t miss the next deep-dive.

Lastly, if you’re serious about mastering AI tools like this, join my free Flutter + AI newsletter. Every week, I share the exact prompts, workflows, and early access to new agent skills that I test before they hit YouTube. Completely free, no spam. https://techwithsam.dev/newsletter — I’d love to see you there!

Thanks for reading, Flutter fam.

See you in the next one — peace! ✌️

Samuel Adekunle
Tech With Sam
https://youtube.com/@techwithsam

Top comments (0)

Subscribe