Build AI-Powered Apps with Flutter Workshop

Freestail: AI Freestyle Generator with Google Gemini

Conducted by: Alex Nyambura - Flutter Developer

---

Workshop Objectives

By the end of this session, you will:

• Build a complete AI-powered Flutter app
• Integrate Google Gemini API for content generation
• Deploy your app using Firebase App Distribution

---

Getting Started

Step 1: Clone the Repository

git clone https://github.com/lxmwaniky/freestail.git
cd freestail

Step 2: Install Dependencies

flutter pub get

Step 3: Set Up Environment Variables

cp example.env .env

Important: Edit the .env file and add your Gemini API key (we'll get this together):

GEMINI_API_KEY=your_api_key_here

---

Getting Your Gemini API Key

Follow Along:

1. Go to Google AI Studio
2. Sign in with your Google account
3. Click "Get API Key"
4. Create a new project or select an existing one
5. Copy your API key
6. Paste it in your .env file

Security Note: Never commit your API key to version control. Always use environment variables for sensitive data.

---

How Gemini Integration Works

1. API Service (lib/services/gemini_service.dart)

// POST request to Gemini API
final response = await http.post(
  Uri.parse('${AppConstants.geminiApiUrl}?key=$_apiKey'),
  headers: {'Content-Type': 'application/json'},
  body: jsonEncode(request.toJson()),
);

2. Smart Prompts (lib/constants/app_constants.dart)

• Genre-specific style guides
• Context-aware instructions
• Kenyan music culture integration

3. State Management (lib/providers/freestyle_provider.dart)

• Loading states
• Error handling
• Response processing

---

Test Your App

Run the app:

flutter run

Try These Features:

1. Select a genre - Try Gengetone or Amapiano
2. Add 3-6 words - For example: love, sunset, dance
3. Generate freestyle and see the AI in action
4. Remix to different genres
5. Copy lyrics to share with others

---

Customization Task

Change App Identity

1. Update Package Name

Android: android/app/build.gradle.kts

android {
    namespace = "com.yourname.freestail"  // Change this to your package name
    ...
}

2. Update App Name

Android: android/app/src/main/AndroidManifest.xml

<application
    android:label="Your App Name"  // Change this to your preferred name
    ...>

3. Update Bundle ID (iOS)

iOS: ios/Runner.xcodeproj/project.pbxproj

PRODUCT_BUNDLE_IDENTIFIER = com.yourname.freestail;

---

Firebase App Distribution

Step 1: Firebase Setup

# Install Firebase CLI (optional for this method)
npm install -g firebase-tools

# Login to Firebase (optional)
firebase login

Step 2: Create Firebase Project

1. Go to Firebase Console
2. Click "Create a project"
3. Enter your project name (e.g., "freestail-workshop")
4. Follow the setup steps
5. Once created, click "Add app" → Android
6. Enter your package name: com.yourname.freestail
7. Download google-services.json and place it in android/app/

Step 3: Build Your APK

# Build APK for distribution
flutter build apk --release

Step 4: Upload via Firebase Console (Recommended)

1. In your Firebase project, go to App Distribution (left sidebar)
2. Click "Get started"
3. Click "Upload your app's binary"
4. Drag and drop your APK: build/app/outputs/flutter-apk/app-release.apk
5. Add tester email addresses
6. Add release notes: "Workshop build - AI freestyle generator"
7. Click "Distribute"
8. Testers will receive email invitations to download your app!

---

Workshop Learning Points

What We Covered:

• AI Integration - Google Gemini API calls and implementation
• HTTP Requests - POST requests with authentication
• JSON Handling - Parsing API responses effectively
• Environment Variables - Secure API key management
• App Distribution - Firebase deployment workflow

Key Takeaways:

• AI APIs are powerful when integrated thoughtfully into user experiences
• Security practices are non-negotiable when working with API keys
• Modern Flutter development involves proper state management and clean architecture
• Testing and deployment are crucial parts of the development cycle

---

Connect

X (Twitter): @lxmwaniky

LinkedIn: Alex Nyambura

Website: lxmwaniky.vercel.app

Email: lxmwaniky@gmail.com

Helpful Resources:

• Flutter Documentation
• Google AI Studio
• Firebase Console

---

Congratulations!

You've successfully built an AI-powered Flutter app from scratch. This is just the beginning of what you can create with AI integration in mobile development.

Share your creation:

• Tweet your screenshots with hashtags: #FlutterAI #Gemini #BuildWithAI
• Share on LinkedIn and describe your learning experience
• Deploy to Firebase App Distribution for real users to test
• Add this project to your portfolio to showcase your AI development skills

Continue building amazing things with Flutter and AI integration. The possibilities are endless.