تثبيت حزمة Flutter Email Sender
لإرسال رسائل البريد الإلكتروني في Flutter، سنستخدم حزمة Flutter Email Sender .
https://pub.dev/packages/flutter_email_sender
يمكننا تثبيت الحزمة من خلال تنفيذ الأمر التالي داخل مشروعنا:
flutter pub add flutter_email_sender
بمجرد تنفيذ الأمر، تأكد من التحقق من ملفك pubspec.yamlبحثًا عن التبعيات المضافة. يجب أن ترى حزمة Flutter Email Sender مضمنة في قسم التبعيات، مثل هذا:
dependencies:
flutter_email_sender: ^6.0.3
يجب علينا أيضًا إضافة النية التالية للسماح لتطبيقنا بإرسال رسائل البريد الإلكتروني على Android. يمكن القيام بذلك داخل android\app\src\main\AndroidManifest.xml الملف:
<queries>
<intent>
<action android:name="android.intent.action.SENDTO" />
<data android:scheme="mailto" />
</intent>
...
</queries>
إرسال رسائل البريد الإلكتروني في Flutter
بعد تثبيت حزمة Flutter Email Sender، يمكننا البدء في التنفيذ.
import 'package:flutter/material.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
home: Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
child: const Icon(
Icons.mail_outline,
color: Colors.white,
),
onPressed: () async => FlutterEmailSender.send(
Email(
body: 'I would like to request more information.',
recipients: ['info@onlyflutter.com'],
subject: 'Information request',
bcc: ['info@yournews.com'],
cc: ['support@yournews.com'],
),
),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، لدينا Scaffoldعنصر واجهة مستخدم يعرض FloatingActionButton. عند FloatingActionButtonالضغط على يتم استدعاء sendالدالة من الفئة. تأخذ الدالة مثيلًا من الفئة. داخل المثيل، نقوم بتعريف , , , و .FlutterEmailSendersendEmailEmailbodyrecipientssubjectbcccc
عندما تقوم بتشغيل التطبيق والضغط على FloatingActionButton، ستلاحظ أنه يفتح عميل البريد الإلكتروني الافتراضي للمستخدم، مثل Gmail.
كما ترى، Emailسيتم ملء القيم التي قدمناها في المثيل تلقائيًا. ومع ذلك، سيتمكن المستخدم دائمًا من تعديل هذه القيم.
إضافة رسالة التأكيد
لإعلام المستخدم بنجاح الضغط على الزر، يمكننا إضافة رسالة تأكيد.
import 'package:flutter/material.dart';
import 'package:flutter_email_sender/flutter_email_sender.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
home: HomePage(),
);
}
}
class HomePage extends StatelessWidget {
const HomePage({super.key});
@override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
backgroundColor: Colors.blueAccent,
child: const Icon(
Icons.mail_outline,
color: Colors.white,
),
onPressed: () async => FlutterEmailSender.send(
Email(
body: 'I would like to request more information.',
recipients: ['info@onlyflutter.com'],
subject: 'Information request',
bcc: ['info@yournews.com'],
cc: ['support@yournews.com'],
),
).then(
(_) => ScaffoldMessenger.of(context).showSnackBar(
const SnackBar(
backgroundColor: Colors.blueAccent,
content: Text(
'The email has either been sent or you navigated back using the back button.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 16),
),
),
),
),
),
);
}
}
في مقتطف التعليمات البرمجية أعلاه، قمنا بإنشاء HomePageعنصر واجهة مستخدم جديد. وهذا ضروري لأننا نحتاج إلى الوصول إلى ScaffoldMessengerلعرض SnackBarعنصر واجهة مستخدم.
خاتمة
إن السماح للمستخدمين بإرسال رسائل البريد الإلكتروني من تطبيق Flutter الخاص بك يمكن أن يحسن تجربة المستخدم. على سبيل المثال، يسهل ذلك على المستخدم التواصل معك لتقديم الملاحظات.
