Flutter, Google’s UI toolkit, makes it easy to build natively compiled applications for mobile, web, and desktop from a single codebase. Among its many features, Flutter enables developers to interact with external applications like email clients. In this guide, we will explore how to open an email app with a pre-filled email address in Flutter. This step-by-step tutorial is beginner-friendly and SEO-optimized for developers looking for practical solutions.

Table of Contents

Why Open Email App With Flutter?

Opening an email app with a pre-filled email address can streamline user interactions in your application. This feature is particularly useful for:

Customer Support: Allowing users to reach out for support directly.
Feedback Collection: Encouraging users to provide feedback.
Account Verification: Simplifying the process of contacting your support team.

By integrating this functionality, you enhance user experience and improve app engagement.

Step 1: Setting Up Your Flutter Project

Before we dive into the code, ensure you have Flutter installed. If not, you can follow Flutter’s installation guide.

Create a new Flutter project: flutter create email_app_demo
Navigate to the project directory: cd email_app_demo
Open the project in your preferred IDE (VS Code, Android Studio, etc.).

Step 2: Adding the Required Dependency

To open an email app, we will use the url_launcher package. This package allows you to launch URLs in the mobile platform’s default browser or app.

Add the url_launcher dependency in your pubspec.yaml file:

dependencies:
  flutter:
    sdk: flutter
  url_launcher: ^6.1.7

Dart

Run the following command to install the dependency:

flutter pub get

Dart

Step 3: Implementing the Email Launcher Functionality

Now, we will write the code to open an email app with a pre-filled email address.

import 'package:flutter/material.dart';
import 'package:url_launcher/url_launcher.dart';

void main() {
  runApp(EmailAppDemo());
}

class EmailAppDemo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: EmailLauncherScreen(),
    );
  }
}

class EmailLauncherScreen extends StatelessWidget {
  final String emailAddress = "example@example.com";

  void _launchEmailApp(BuildContext context) async {
    final Uri emailUri = Uri(
      scheme: 'mailto',
      path: emailAddress,
      query: 'subject=Hello&body=How are you?',
    );

    if (await canLaunchUrl(emailUri)) {
      await launchUrl(emailUri);
    } else {
      ScaffoldMessenger.of(context).showSnackBar(
        SnackBar(content: Text('Could not launch email app.')),
      );
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Open Email App'),
        backgroundColor: Colors.blueAccent,
      ),
      body: Center(
        child: ElevatedButton(
          onPressed: () => _launchEmailApp(context),
          child: Text('Send Email'),
        ),
      ),
    );
  }
}

Dart

Step 4: Running the App

Connect your device or start an emulator.
Run the app: flutter run
Tap the “Send Email” button. It will open the default email app with the recipient’s address, subject, and body pre-filled.

Conclusion

Opening an email app with a pre-filled address in Flutter is a simple yet powerful feature that enhances user experience. By following this guide, you can implement this functionality effortlessly. Integrate it into your app today and provide users with seamless email interaction.