Flutter Templates
How to Build an AI Email Responder App with Flutter and Back4App

41min
Introduction
In this tutorial, you will build an AI-powered email responder app using Flutter for the frontend and Back4App for the backend. The app will integrate with email services like Gmail or Outlook, analyze incoming emails using AI models (such as OpenAI's GPT-3), and generate personalized responses. By the end of this tutorial, you will have a functional app that can manage emails, generate automated responses, and allow users to personalize their email interactions.
This app leverages the power of Back4App's Parse Server to handle user authentication, data storage, and cloud functions, providing a scalable backend solution without the need to manage server infrastructure. Integrating AI capabilities and email services will enhance your Flutter development skills and provide a foundation for building advanced, data-driven applications.
Prerequisites
To complete this tutorial, you will need:
A Back4App account. Sign up for a free account at Back4App.
Flutter SDK installed on your local machine. Follow the official Flutter installation guide for your operating system.
Basic knowledge of Dart and Flutter development. If you're new to Flutter, consider reviewing the Flutter documentation before proceeding.
Familiarity with REST APIs and asynchronous programming in Dart.
An account with an AI service provider (e.g., OpenAI). Sign up for an API key to access AI models.
An email account (Gmail or Outlook) for integration testing.
Step 1 — Setting Up Your Back4App Backend
In this step, you will create a new Back4App application, set up your data classes, and configure the backend to work with your Flutter app.
1.1. Create a New Application on Back4App
Log in to your Back4App dashboard.
Click on "Create new App".
Enter an App Name (e.g., "AI Email Responder") and select your App Icon.
Choose your server location if prompted.
Click "Create".
1.2. Retrieve Application Keys
In your app's dashboard, navigate to App Settings > Security & Keys.
Note down the Application ID and Client Key. You will need these for your Flutter app configuration.
1.3. Define Your Data Model Classes
We will create the following classes in Back4App:
User (default)
EmailAccount
EmailTemplate
ResponseHistory
1.3.1. Create the EmailAccount Class
Go to Database > Browser.
Click "Create a class".
Choose "Custom" and name it EmailAccount.
Click "Create class".
Add the following columns to EmailAccount:
user (Pointer<_User>): Points to the User object.
emailAddress (String)
accountType (String): e.g., Gmail, Outlook.
authToken (String): Will store encrypted tokens.
1.3.2. Create the EmailTemplate Class
Repeat the steps to create a new class named EmailTemplate.
Add the following columns to EmailTemplate:
user (Pointer<_User>)
templateName (String)
templateContent (String)
templateType (String): e.g., formal, casual, follow-up.
1.3.3. Create the ResponseHistory Class
Create a new class named ResponseHistory.
Add the following columns to ResponseHistory:
user (Pointer<_User>)
originalEmailSummary (String)
generatedResponse (String)
userEditedResponse (String)
timeSaved (Number)
1.4. Set Class-Level Permissions
Ensure that only authenticated users can access their data:
In each class, go to the Security section.
Set Class-Level Permissions (CLP) to allow read/write access only to authenticated users.
Step 2 — Initializing Your Flutter Project
In this step, you will set up your Flutter project and configure it to connect to Back4App.
2.1. Create a New Flutter Project
Open your terminal and run:
Bash
flutter create ai_email_responder
flutter create ai_email_responder
﻿
Navigate to the project directory:
Bash
cd ai_email_responder
cd ai_email_responder
﻿
2.2. Add Required Dependencies
Open pubspec.yaml and add the following dependencies:
YAML
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_email_sender: ^5.0.2
  http: ^0.13.4
  provider: ^6.0.2
  fl_chart: ^0.45.1
dependencies:
  flutter:
    sdk: flutter
  parse_server_sdk_flutter: ^4.0.1
  flutter_email_sender: ^5.0.2
  http: ^0.13.4
  provider: ^6.0.2
  fl_chart: ^0.45.1
﻿
Run flutter pub get to install the packages.
2.3. Initialize Parse in Your App
Create a new file lib/config/back4app_config.dart:
Dart
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
// lib/config/back4app_config.dart
const String keyApplicationId = 'YOUR_APPLICATION_ID';
const String keyClientKey = 'YOUR_CLIENT_KEY';
const String keyParseServerUrl = 'https://parseapi.back4app.com';
﻿
Replace 'YOUR_APPLICATION_ID' and 'YOUR_CLIENT_KEY' with the keys from Back4App.
In lib/main.dart, initialize Parse:
Dart
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
// lib/main.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'config/back4app_config.dart';
import 'app.dart';

void main() async {
  WidgetsFlutterBinding.ensureInitialized();

  await Parse().initialize(
    keyApplicationId,
    keyParseServerUrl,
    clientKey: keyClientKey,
    autoSendSessionId: true,
    debug: true,
  );

  runApp(MyApp());
}
﻿
Create lib/app.dart:
Dart
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Email Responder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}
// lib/app.dart
import 'package:flutter/material.dart';
import 'screens/home_screen.dart';

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'AI Email Responder',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: HomeScreen(),
    );
  }
}
﻿
Step 3 — Implementing User Authentication
You will now implement user registration and login using Parse Server.
3.1. Create Authentication Screens
Create lib/screens/login_screen.dart and lib/screens/signup_screen.dart. For brevity, we'll focus on the login functionality.
Dart
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  Future<void> doUserLogin() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    final response = await user.login();

    if (response.success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('Error: $message')));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: usernameController,
              decoration:
                  InputDecoration(labelText: 'Username', icon: Icon(Icons.person)),
            ),
            TextField(
              controller: passwordController,
              decoration:
                  InputDecoration(labelText: 'Password', icon: Icon(Icons.lock)),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: doUserLogin,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}
// lib/screens/login_screen.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'home_screen.dart';

class LoginScreen extends StatefulWidget {
  @override
  _LoginScreenState createState() => _LoginScreenState();
}

class _LoginScreenState extends State<LoginScreen> {
  final TextEditingController usernameController = TextEditingController();
  final TextEditingController passwordController = TextEditingController();

  Future<void> doUserLogin() async {
    final username = usernameController.text.trim();
    final password = passwordController.text.trim();

    final user = ParseUser(username, password, null);
    final response = await user.login();

    if (response.success) {
      Navigator.pushReplacement(
        context,
        MaterialPageRoute(builder: (context) => HomeScreen()),
      );
    } else {
      _showError(response.error!.message);
    }
  }

  void _showError(String message) {
    ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('Error: $message')));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Login'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: Column(
          children: [
            TextField(
              controller: usernameController,
              decoration:
                  InputDecoration(labelText: 'Username', icon: Icon(Icons.person)),
            ),
            TextField(
              controller: passwordController,
              decoration:
                  InputDecoration(labelText: 'Password', icon: Icon(Icons.lock)),
              obscureText: true,
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: doUserLogin,
              child: Text('Login'),
            ),
          ],
        ),
      ),
    );
  }
}
﻿
3.2. Update Home Screen Navigation
Modify lib/app.dart to direct users to the login screen if they are not authenticated.
Dart
// lib/app.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/home_screen.dart';
import 'screens/login_screen.dart';

class MyApp extends StatelessWidget {
  Future<bool> hasUserLoggedIn() async {
    final currentUser = await ParseUser.currentUser() as ParseUser?;
    return currentUser != null;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: hasUserLoggedIn(),
      builder: (context, snapshot) {
        if (snapshot.hasData && snapshot.data == true) {
          return MaterialApp(
            title: 'AI Email Responder',
            theme: ThemeData(primarySwatch: Colors.blue),
            home: HomeScreen(),
          );
        } else {
          return MaterialApp(
            title: 'AI Email Responder',
            theme: ThemeData(primarySwatch: Colors.blue),
            home: LoginScreen(),
          );
        }
      },
    );
  }
}
// lib/app.dart
import 'package:flutter/material.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import 'screens/home_screen.dart';
import 'screens/login_screen.dart';

class MyApp extends StatelessWidget {
  Future<bool> hasUserLoggedIn() async {
    final currentUser = await ParseUser.currentUser() as ParseUser?;
    return currentUser != null;
  }

  @override
  Widget build(BuildContext context) {
    return FutureBuilder<bool>(
      future: hasUserLoggedIn(),
      builder: (context, snapshot) {
        if (snapshot.hasData && snapshot.data == true) {
          return MaterialApp(
            title: 'AI Email Responder',
            theme: ThemeData(primarySwatch: Colors.blue),
            home: HomeScreen(),
          );
        } else {
          return MaterialApp(
            title: 'AI Email Responder',
            theme: ThemeData(primarySwatch: Colors.blue),
            home: LoginScreen(),
          );
        }
      },
    );
  }
}
﻿
Step 4 — Integrating Email Services
In this step, you will set up the email integration using the flutter_email_sender package.
4.1. Configure Email Sender
Add necessary permissions to your Android and iOS configurations.
For Android, update android/app/src/main/AndroidManifest.xml:
XML
<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.INTERNET"/>
﻿
For iOS, ensure that your Info.plist includes:
XML
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
﻿
4.2. Implement Email Sending Functionality
Create lib/services/email_service.dart:
Dart
// lib/services/email_service.dart
import 'package:flutter_email_sender/flutter_email_sender.dart';

class EmailService {
  Future<void> sendEmail(String subject, String body, List<String> recipients) async {
    final Email email = Email(
      body: body,
      subject: subject,
      recipients: recipients,
      isHTML: false,
    );

    await FlutterEmailSender.send(email);
  }
}
// lib/services/email_service.dart
import 'package:flutter_email_sender/flutter_email_sender.dart';

class EmailService {
  Future<void> sendEmail(String subject, String body, List<String> recipients) async {
    final Email email = Email(
      body: body,
      subject: subject,
      recipients: recipients,
      isHTML: false,
    );

    await FlutterEmailSender.send(email);
  }
}
﻿
4.3. Implement Email Fetching (Placeholder)
Email fetching from providers like Gmail requires OAuth and API integration, which can be complex. For this tutorial, we will simulate email fetching.
Create lib/models/email.dart:
Dart
// lib/models/email.dart
class Email {
  final String sender;
  final String subject;
  final String body;
  final DateTime date;

  Email({
    required this.sender,
    required this.subject,
    required this.body,
    required this.date,
  });
}
// lib/models/email.dart
class Email {
  final String sender;
  final String subject;
  final String body;
  final DateTime date;

  Email({
    required this.sender,
    required this.subject,
    required this.body,
    required this.date,
  });
}
﻿
Create lib/services/email_service.dart (update with dummy data):
Dart
// lib/services/email_service.dart
import '../models/email.dart';

class EmailService {
  Future<List<Email>> fetchEmails() async {
    // Simulate network delay
    await Future.delayed(Duration(seconds: 2));

    return [
      Email(
        sender: '[email protected]',
        subject: 'Meeting Reminder',
        body: 'Don\'t forget about our meeting tomorrow at 10 AM.',
        date: DateTime.now().subtract(Duration(hours: 1)),
      ),
      // Add more dummy emails
    ];
  }

  // Existing sendEmail method
}
// lib/services/email_service.dart
import '../models/email.dart';

class EmailService {
  Future<List<Email>> fetchEmails() async {
    // Simulate network delay
    await Future.delayed(Duration(seconds: 2));

    return [
      Email(
        sender: 'john.doe@example.com',
        subject: 'Meeting Reminder',
        body: 'Don\'t forget about our meeting tomorrow at 10 AM.',
        date: DateTime.now().subtract(Duration(hours: 1)),
      ),
      // Add more dummy emails
    ];
  }

  // Existing sendEmail method
}
﻿
Step 5 — Integrating AI Services for Response Generation
You will now set up the AI integration to generate email responses.
5.1. Set Up HTTP Requests to AI API
Install the http package (already added).
Create lib/services/ai_service.dart:
Dart
// lib/services/ai_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class AIService {
  final String apiKey = 'YOUR_OPENAI_API_KEY';
  final String apiUrl = 'https://api.openai.com/v1/engines/davinci/completions';

  Future<String> generateResponse(String emailContent) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Authorization': 'Bearer $apiKey',
        'Content-Type': 'application/json',
      },
      body: jsonEncode({
        'prompt': 'Reply to the following email:\n$emailContent',
        'max_tokens': 150,
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['choices'][0]['text'].trim();
    } else {
      throw Exception('Failed to generate response');
    }
  }
}
// lib/services/ai_service.dart
import 'dart:convert';
import 'package:http/http.dart' as http;

class AIService {
  final String apiKey = 'YOUR_OPENAI_API_KEY';
  final String apiUrl = 'https://api.openai.com/v1/engines/davinci/completions';

  Future<String> generateResponse(String emailContent) async {
    final response = await http.post(
      Uri.parse(apiUrl),
      headers: {
        'Authorization': 'Bearer $apiKey',
        'Content-Type': 'application/json',
      },
      body: jsonEncode({
        'prompt': 'Reply to the following email:\n$emailContent',
        'max_tokens': 150,
      }),
    );

    if (response.statusCode == 200) {
      final data = jsonDecode(response.body);
      return data['choices'][0]['text'].trim();
    } else {
      throw Exception('Failed to generate response');
    }
  }
}
﻿
Note: Replace 'YOUR_OPENAI_API_KEY' with your actual API key.
5.2. Implement the Response Editor Widget
Create lib/widgets/response_editor.dart:
Dart
// lib/widgets/response_editor.dart
import 'package:flutter/material.dart';

class ResponseEditor extends StatelessWidget {
  final String initialResponse;
  final TextEditingController controller;

  ResponseEditor({required this.initialResponse})
      : controller = TextEditingController(text: initialResponse);

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      maxLines: null,
      decoration: InputDecoration(
        hintText: 'Edit your response here...',
        border: OutlineInputBorder(),
      ),
    );
  }
}
// lib/widgets/response_editor.dart
import 'package:flutter/material.dart';

class ResponseEditor extends StatelessWidget {
  final String initialResponse;
  final TextEditingController controller;

  ResponseEditor({required this.initialResponse})
      : controller = TextEditingController(text: initialResponse);

  @override
  Widget build(BuildContext context) {
    return TextField(
      controller: controller,
      maxLines: null,
      decoration: InputDecoration(
        hintText: 'Edit your response here...',
        border: OutlineInputBorder(),
      ),
    );
  }
}
﻿
5.3. Displaying AI-Generated Responses
In lib/screens/email_detail_screen.dart, integrate the AI service.
Dart
// lib/screens/email_detail_screen.dart
import 'package:flutter/material.dart';
import '../models/email.dart';
import '../services/ai_service.dart';
import '../widgets/response_editor.dart';
import '../services/email_service.dart';

class EmailDetailScreen extends StatefulWidget {
  final Email email;

  EmailDetailScreen({required this.email});

  @override
  _EmailDetailScreenState createState() => _EmailDetailScreenState();
}

class _EmailDetailScreenState extends State<EmailDetailScreen> {
  final AIService aiService = AIService();
  final EmailService emailService = EmailService();
  String? aiResponse;
  bool isLoading = false;

  Future<void> generateResponse() async {
    setState(() {
      isLoading = true;
    });

    try {
      final response = await aiService.generateResponse(widget.email.body);
      setState(() {
        aiResponse = response;
      });
    } catch (e) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('AI Error: $e')));
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  void sendResponse(String responseText) {
    emailService.sendEmail(
      'Re: ${widget.email.subject}',
      responseText,
      [widget.email.sender],
    );

    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text('Email Sent')));
  }

  @override
  void initState() {
    super.initState();
    generateResponse();
  }

  @override
  Widget build(BuildContext context) {
    final responseEditor = aiResponse != null
        ? ResponseEditor(initialResponse: aiResponse!)
        : null;

    return Scaffold(
      appBar: AppBar(
        title: Text('Email from ${widget.email.sender}'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: isLoading
            ? Center(child: CircularProgressIndicator())
            : Column(
                children: [
                  Text(widget.email.body),
                  SizedBox(height: 20),
                  responseEditor != null
                      ? Expanded(child: responseEditor)
                      : Container(),
                  ElevatedButton(
                    onPressed: () {
                      if (responseEditor != null) {
                        sendResponse(responseEditor.controller.text);
                      }
                    },
                    child: Text('Send Response'),
                  ),
                ],
              ),
      ),
    );
  }
}
// lib/screens/email_detail_screen.dart
import 'package:flutter/material.dart';
import '../models/email.dart';
import '../services/ai_service.dart';
import '../widgets/response_editor.dart';
import '../services/email_service.dart';

class EmailDetailScreen extends StatefulWidget {
  final Email email;

  EmailDetailScreen({required this.email});

  @override
  _EmailDetailScreenState createState() => _EmailDetailScreenState();
}

class _EmailDetailScreenState extends State<EmailDetailScreen> {
  final AIService aiService = AIService();
  final EmailService emailService = EmailService();
  String? aiResponse;
  bool isLoading = false;

  Future<void> generateResponse() async {
    setState(() {
      isLoading = true;
    });

    try {
      final response = await aiService.generateResponse(widget.email.body);
      setState(() {
        aiResponse = response;
      });
    } catch (e) {
      ScaffoldMessenger.of(context)
          .showSnackBar(SnackBar(content: Text('AI Error: $e')));
    } finally {
      setState(() {
        isLoading = false;
      });
    }
  }

  void sendResponse(String responseText) {
    emailService.sendEmail(
      'Re: ${widget.email.subject}',
      responseText,
      [widget.email.sender],
    );

    ScaffoldMessenger.of(context)
        .showSnackBar(SnackBar(content: Text('Email Sent')));
  }

  @override
  void initState() {
    super.initState();
    generateResponse();
  }

  @override
  Widget build(BuildContext context) {
    final responseEditor = aiResponse != null
        ? ResponseEditor(initialResponse: aiResponse!)
        : null;

    return Scaffold(
      appBar: AppBar(
        title: Text('Email from ${widget.email.sender}'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16),
        child: isLoading
            ? Center(child: CircularProgressIndicator())
            : Column(
                children: [
                  Text(widget.email.body),
                  SizedBox(height: 20),
                  responseEditor != null
                      ? Expanded(child: responseEditor)
                      : Container(),
                  ElevatedButton(
                    onPressed: () {
                      if (responseEditor != null) {
                        sendResponse(responseEditor.controller.text);
                      }
                    },
                    child: Text('Send Response'),
                  ),
                ],
              ),
      ),
    );
  }
}
﻿
Step 6 — Managing Email Templates
You will now implement email template management using Back4App.
6.1. Define the EmailTemplate Model
Create lib/models/email_template.dart:
Dart
// lib/models/email_template.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class EmailTemplate extends ParseObject implements ParseCloneable {
  EmailTemplate() : super('EmailTemplate');
  EmailTemplate.clone() : this();

  @override
  EmailTemplate clone(Map<String, dynamic> map) => EmailTemplate.clone()..fromJson(map);

  String? get templateName => get<String>('templateName');
  set templateName(String? value) => set<String>('templateName', value);

  String? get templateContent => get<String>('templateContent');
  set templateContent(String? value) => set<String>('templateContent', value);

  String? get templateType => get<String>('templateType');
  set templateType(String? value) => set<String>('templateType', value);
}
// lib/models/email_template.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class EmailTemplate extends ParseObject implements ParseCloneable {
  EmailTemplate() : super('EmailTemplate');
  EmailTemplate.clone() : this();

  @override
  EmailTemplate clone(Map<String, dynamic> map) => EmailTemplate.clone()..fromJson(map);

  String? get templateName => get<String>('templateName');
  set templateName(String? value) => set<String>('templateName', value);

  String? get templateContent => get<String>('templateContent');
  set templateContent(String? value) => set<String>('templateContent', value);

  String? get templateType => get<String>('templateType');
  set templateType(String? value) => set<String>('templateType', value);
}
﻿
6.2. Implement Template Service
Create lib/services/template_service.dart:
Dart
// lib/services/template_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/email_template.dart';

class TemplateService {
  Future<List<EmailTemplate>> fetchTemplates() async {
    final query = QueryBuilder<EmailTemplate>(EmailTemplate());
    final response = await query.find();

    if (response.success && response.results != null) {
      return response.results as List<EmailTemplate>;
    } else {
      return [];
    }
  }

  Future<void> addTemplate(EmailTemplate template) async {
    await template.save();
  }
}
// lib/services/template_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/email_template.dart';

class TemplateService {
  Future<List<EmailTemplate>> fetchTemplates() async {
    final query = QueryBuilder<EmailTemplate>(EmailTemplate());
    final response = await query.find();

    if (response.success && response.results != null) {
      return response.results as List<EmailTemplate>;
    } else {
      return [];
    }
  }

  Future<void> addTemplate(EmailTemplate template) async {
    await template.save();
  }
}
﻿
6.3. Create Template Management Screen
Create lib/screens/template_management_screen.dart:
Dart
// lib/screens/template_management_screen.dart
import 'package:flutter/material.dart';
import '../models/email_template.dart';
import '../services/template_service.dart';

class TemplateManagementScreen extends StatefulWidget {
  @override
  _TemplateManagementScreenState createState() => _TemplateManagementScreenState();
}

class _TemplateManagementScreenState extends State<TemplateManagementScreen> {
  final TemplateService templateService = TemplateService();
  List<EmailTemplate> templates = [];
  bool isLoading = true;

  Future<void> loadTemplates() async {
    final fetchedTemplates = await templateService.fetchTemplates();
    setState(() {
      templates = fetchedTemplates;
      isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    loadTemplates();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Email Templates'),
        ),
        body: isLoading
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: templates.length,
                itemBuilder: (context, index) {
                  final template = templates[index];
                  return ListTile(
                    title: Text(template.templateName ?? 'Unnamed'),
                    subtitle: Text(template.templateType ?? 'No Type'),
                  );
                },
              ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Implement template creation
          },
          child: Icon(Icons.add),
        ));
  }
}
// lib/screens/template_management_screen.dart
import 'package:flutter/material.dart';
import '../models/email_template.dart';
import '../services/template_service.dart';

class TemplateManagementScreen extends StatefulWidget {
  @override
  _TemplateManagementScreenState createState() => _TemplateManagementScreenState();
}

class _TemplateManagementScreenState extends State<TemplateManagementScreen> {
  final TemplateService templateService = TemplateService();
  List<EmailTemplate> templates = [];
  bool isLoading = true;

  Future<void> loadTemplates() async {
    final fetchedTemplates = await templateService.fetchTemplates();
    setState(() {
      templates = fetchedTemplates;
      isLoading = false;
    });
  }

  @override
  void initState() {
    super.initState();
    loadTemplates();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Email Templates'),
        ),
        body: isLoading
            ? Center(child: CircularProgressIndicator())
            : ListView.builder(
                itemCount: templates.length,
                itemBuilder: (context, index) {
                  final template = templates[index];
                  return ListTile(
                    title: Text(template.templateName ?? 'Unnamed'),
                    subtitle: Text(template.templateType ?? 'No Type'),
                  );
                },
              ),
        floatingActionButton: FloatingActionButton(
          onPressed: () {
            // Implement template creation
          },
          child: Icon(Icons.add),
        ));
  }
}
﻿
Step 7 — Implementing Response History Tracking
You will now save the AI-generated responses and user edits to Back4App for analytics.
7.1. Define the ResponseHistory Model
Create lib/models/response_history.dart:
Dart
// lib/models/response_history.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ResponseHistory extends ParseObject implements ParseCloneable {
  ResponseHistory() : super('ResponseHistory');
  ResponseHistory.clone() : this();

  @override
  ResponseHistory clone(Map<String, dynamic> map) => ResponseHistory.clone()..fromJson(map);

  String? get originalEmailSummary => get<String>('originalEmailSummary');
  set originalEmailSummary(String? value) => set<String>('originalEmailSummary', value);

  String? get generatedResponse => get<String>('generatedResponse');
  set generatedResponse(String? value) => set<String>('generatedResponse', value);

  String? get userEditedResponse => get<String>('userEditedResponse');
  set userEditedResponse(String? value) => set<String>('userEditedResponse', value);

  int? get timeSaved => get<int>('timeSaved');
  set timeSaved(int? value) => set<int>('timeSaved', value);
}
// lib/models/response_history.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class ResponseHistory extends ParseObject implements ParseCloneable {
  ResponseHistory() : super('ResponseHistory');
  ResponseHistory.clone() : this();

  @override
  ResponseHistory clone(Map<String, dynamic> map) => ResponseHistory.clone()..fromJson(map);

  String? get originalEmailSummary => get<String>('originalEmailSummary');
  set originalEmailSummary(String? value) => set<String>('originalEmailSummary', value);

  String? get generatedResponse => get<String>('generatedResponse');
  set generatedResponse(String? value) => set<String>('generatedResponse', value);

  String? get userEditedResponse => get<String>('userEditedResponse');
  set userEditedResponse(String? value) => set<String>('userEditedResponse', value);

  int? get timeSaved => get<int>('timeSaved');
  set timeSaved(int? value) => set<int>('timeSaved', value);
}
﻿
7.2. Save Response History After Sending Email
Update lib/screens/email_detail_screen.dart in the sendResponse method:
Dart
import '../models/response_history.dart';

// ...

void sendResponse(String responseText) async {
  await emailService.sendEmail(
    'Re: ${widget.email.subject}',
    responseText,
    [widget.email.sender],
  );

  // Save response history
  final responseHistory = ResponseHistory()
    ..set('originalEmailSummary', widget.email.body)
    ..set('generatedResponse', aiResponse)
    ..set('userEditedResponse', responseText)
    ..set('timeSaved', calculateTimeSaved());

  await responseHistory.save();

  ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('Email Sent')));

  Navigator.pop(context);
}

int calculateTimeSaved() {
  // Placeholder implementation
  return 5; // Assume 5 minutes saved
}
import '../models/response_history.dart';

// ...

void sendResponse(String responseText) async {
  await emailService.sendEmail(
    'Re: ${widget.email.subject}',
    responseText,
    [widget.email.sender],
  );

  // Save response history
  final responseHistory = ResponseHistory()
    ..set('originalEmailSummary', widget.email.body)
    ..set('generatedResponse', aiResponse)
    ..set('userEditedResponse', responseText)
    ..set('timeSaved', calculateTimeSaved());

  await responseHistory.save();

  ScaffoldMessenger.of(context)
      .showSnackBar(SnackBar(content: Text('Email Sent')));

  Navigator.pop(context);
}

int calculateTimeSaved() {
  // Placeholder implementation
  return 5; // Assume 5 minutes saved
}
﻿
Step 8 — Adding Analytics with Charts
You will now implement a basic analytics dashboard using fl_chart.
8.1. Implement Analytics Service
Create lib/services/analytics_service.dart:
Dart
// lib/services/analytics_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/response_history.dart';

class AnalyticsService {
  Future<List<ResponseHistory>> fetchResponseHistories() async {
    final query = QueryBuilder<ResponseHistory>(ResponseHistory());
    final response = await query.find();

    if (response.success && response.results != null) {
      return response.results as List<ResponseHistory>;
    } else {
      return [];
    }
  }

  Future<int> calculateTotalTimeSaved() async {
    final histories = await fetchResponseHistories();
    return histories.fold(0, (sum, item) => sum + (item.timeSaved ?? 0));
  }
}
// lib/services/analytics_service.dart
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';
import '../models/response_history.dart';

class AnalyticsService {
  Future<List<ResponseHistory>> fetchResponseHistories() async {
    final query = QueryBuilder<ResponseHistory>(ResponseHistory());
    final response = await query.find();

    if (response.success && response.results != null) {
      return response.results as List<ResponseHistory>;
    } else {
      return [];
    }
  }

  Future<int> calculateTotalTimeSaved() async {
    final histories = await fetchResponseHistories();
    return histories.fold(0, (sum, item) => sum + (item.timeSaved ?? 0));
  }
}
﻿
8.2. Create Analytics Dashboard
Create lib/screens/analytics_screen.dart:
Dart
// lib/screens/analytics_screen.dart
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import '../services/analytics_service.dart';

class AnalyticsScreen extends StatefulWidget {
  @override
  _AnalyticsScreenState createState() => _AnalyticsScreenState();
}

class _AnalyticsScreenState extends State<AnalyticsScreen> {
  final AnalyticsService analyticsService = AnalyticsService();
  int totalTimeSaved = 0;

  Future<void> loadAnalytics() async {
    final timeSaved = await analyticsService.calculateTotalTimeSaved();
    setState(() {
      totalTimeSaved = timeSaved;
    });
  }

  @override
  void initState() {
    super.initState();
    loadAnalytics();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Analytics'),
        ),
        body: Center(
          child: Text('Total Time Saved: $totalTimeSaved minutes'),
        ));
  }
}
// lib/screens/analytics_screen.dart
import 'package:flutter/material.dart';
import 'package:fl_chart/fl_chart.dart';
import '../services/analytics_service.dart';

class AnalyticsScreen extends StatefulWidget {
  @override
  _AnalyticsScreenState createState() => _AnalyticsScreenState();
}

class _AnalyticsScreenState extends State<AnalyticsScreen> {
  final AnalyticsService analyticsService = AnalyticsService();
  int totalTimeSaved = 0;

  Future<void> loadAnalytics() async {
    final timeSaved = await analyticsService.calculateTotalTimeSaved();
    setState(() {
      totalTimeSaved = timeSaved;
    });
  }

  @override
  void initState() {
    super.initState();
    loadAnalytics();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Analytics'),
        ),
        body: Center(
          child: Text('Total Time Saved: $totalTimeSaved minutes'),
        ));
  }
}
﻿
Step 9 — Implementing Offline Support
You will now add offline capabilities to your app using Parse's local data store.
9.1. Enable Local Data Store
In lib/main.dart, enable the local datastore:
Dart
await Parse().initialize(
  keyApplicationId,
  keyParseServerUrl,
  clientKey: keyClientKey,
  autoSendSessionId: true,
  debug: true,
  coreStore: await CoreStoreSembastImp.getInstance(),
);
await Parse().initialize(
  keyApplicationId,
  keyParseServerUrl,
  clientKey: keyClientKey,
  autoSendSessionId: true,
  debug: true,
  coreStore: await CoreStoreSembastImp.getInstance(),
);
﻿
9.2. Modify Data Models for Pinning
In your models (e.g., ResponseHistory), add methods to pin and unpin objects:
Dart
Future<void> pin() async {
  await this.pin();
}

Future<void> unpin() async {
  await this.unPin();
}
Future<void> pin() async {
  await this.pin();
}

Future<void> unpin() async {
  await this.unPin();
}
﻿
9.3. Implement Offline Manager
Create lib/utils/offline_manager.dart:
Dart
// lib/utils/offline_manager.dart
import '../models/email.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class OfflineManager {
  Future<void> cacheEmails(List<Email> emails) async {
    for (var email in emails) {
      final parseObject = ParseObject('Email')
        ..set('sender', email.sender)
        ..set('subject', email.subject)
        ..set('body', email.body)
        ..set('date', email.date);

      await parseObject.pin();
    }
  }

  Future<List<Email>> getCachedEmails() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Email'));
    final response = await query.fromPin().find();

    if (response.success && response.results != null) {
      return response.results!.map((e) {
        return Email(
          sender: e.get<String>('sender') ?? '',
          subject: e.get<String>('subject') ?? '',
          body: e.get<String>('body') ?? '',
          date: e.get<DateTime>('date') ?? DateTime.now(),
        );
      }).toList();
    } else {
      return [];
    }
  }
}
// lib/utils/offline_manager.dart
import '../models/email.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

class OfflineManager {
  Future<void> cacheEmails(List<Email> emails) async {
    for (var email in emails) {
      final parseObject = ParseObject('Email')
        ..set('sender', email.sender)
        ..set('subject', email.subject)
        ..set('body', email.body)
        ..set('date', email.date);

      await parseObject.pin();
    }
  }

  Future<List<Email>> getCachedEmails() async {
    final query = QueryBuilder<ParseObject>(ParseObject('Email'));
    final response = await query.fromPin().find();

    if (response.success && response.results != null) {
      return response.results!.map((e) {
        return Email(
          sender: e.get<String>('sender') ?? '',
          subject: e.get<String>('subject') ?? '',
          body: e.get<String>('body') ?? '',
          date: e.get<DateTime>('date') ?? DateTime.now(),
        );
      }).toList();
    } else {
      return [];
    }
  }
}
﻿
9.4. Use Offline Data When No Connectivity
In your email fetching logic, check for connectivity and use cached data if offline.
Conclusion
In this tutorial, you built an AI Email Responder app using Flutter and Back4App. You:
Set up a Back4App backend with necessary data models and security configurations.
Initialized a Flutter project and connected it to Back4App.
Implemented user authentication with Parse Server.
Integrated email sending and simulated email fetching.
Integrated AI services to generate email responses.
Managed email templates and stored them in Back4App.
Tracked response history for analytics.
Added basic analytics using fl_chart.
Implemented offline support using Parse's local data store.
This app provides a foundation for building more advanced features, such as real email integration with OAuth, advanced AI capabilities, and improved UI/UX design.
Next Steps
Email Integration: Implement real email fetching using Gmail or Outlook APIs with OAuth authentication.
Enhanced AI Features: Fine-tune AI prompts for better responses and implement personalization based on user data.
UI/UX Improvements: Enhance the app's interface for better user experience.
Testing and Deployment: Write unit and integration tests and prepare the app for deployment to app stores.
Security Enhancements: Encrypt sensitive data and implement robust error handling and input validation.
For more information on using Back4App with Flutter, refer to the Back4App Flutter Guide.
Updated 01 Oct 2024
Did this page help you?
Building a Multiplatform Game Using Flutter and Back4app
How to Build an AR Language Immersion App with Flutter and Back4App