آموزش ساخت Alert Dialog در فلاتر
در این مطلب قصد داریم که بصورت ویدیویی آموزش طراحی Alert dialog را در فلاتر یاد بگیریم.
برای آموزش فلاتر ویجت های بسیار زیادی وجود دارد که باید کاربرد آنها را یاد بگیرید.
یکی از این ویجت ها دیالوگ ها هستند که برای نمایش اطلاعات به کاربر استفاده میشود.
Alert dialog چیست؟
دیالوگ ابزار مفیدی برای اطلاع و هشدار دادن به کاربر می باشد که بصورت یک پنجره پاپ آپ در وسط صفحه اجرا می شود.
در فریمورک فلاتر (Flutter)، “الرت دیالوگ” یک پنجره پیام معمولاً با دکمههای انتخاب مخصوصی است که برای نمایش پیامهای کاربر به صورت مدل مورد استفاده قرار میگیرد. این دیالوگها میتوانند برای اعلام پیامهای مهم، و یا جلب تأیید یا عملیات انتخابی از کاربر استفاده شوند.
Alert dialo یک پنجره کوچک است که با استفاده از آن کاربر می تواند برای انجام یک عمل تصمیم بگیرد و یا اطلاعاتی را اضافه نماید. همانند خارج شدن از برنامه و یا صفحه ورود کاربر و….
نحوه ساخت Alert dialo در فلاتر
در فلاتر، میتوانید از کلاس AlertDialog
برای ایجاد الرت دیالوگها استفاده کنید.
این کلاس معمولاً به همراه متدهایی برای تعیین متن پیام، دکمهها و عملیات مرتبط با دیالوگ ارائه میشود.
این یک نمونه ساده از استفاده از AlertDialog
در فلاتر است:
برای شروع شما اول از همه باید از دستور showDialog() در فلاتر استفاده کنید, این دستور به برنامه اطلاع می دهد که قصد داریم یک دیالوگ را به کاربر نمایش دهیم.
این متد دو پارامتر از نوع context و itemBuilder دارد.
داخل این متد از ویجت AlertDialog استفاده میکنیم. این ویجت شامل دو ویژگی مهم به نام های title و content هست.
در بخش content بسته به سلیقه و نیاز خود از ویجت های مختلفی میتونید استفاده کنید تا یک alert dialog اختصاصی طراحی کنید.
در کد زیر یک مثال ساده از دیالوگ ها را میتونید مشاهده کنید.
import 'package:flutter/material.dart';
void showAlertDialog(BuildContext context) {
showDialog(
context: context,
builder: (BuildContext context) {
return AlertDialog(
title: Text('پیام مهم'),
content: Text('این یک پیام مهم است!'),
actions: [
TextButton(
child: Text('باشه'),
onPressed: () {
Navigator.of(context).pop(); // برای بستن دیالوگ
},
),
],
);
},
);
}
در این مثال، ما یک AlertDialog
با عنوان “پیام مهم” و متن “این یک پیام مهم است!” ایجاد کردهایم و یک دکمه “باشه” اضافه کردهایم که به کمک Navigator.of(context).pop()
دیالوگ را بسته و کاربر میتواند با زدن این دکمه از دیالوگ خارج شود.
شما میتوانید این showAlertDialog
را در واکنش به رویدادهای مختلف در برنامههای فلاتر خود فراخوانی کنید تا الرت دیالوگهای مختلفی را نمایش دهید.
مطالب زیر را حتما مطالعه کنید
آموزش پیاده سازی لینت Lint در برنامه نویسی فلاتر
آموزش الگوی تزریق وابستگی در فلاتر Dependency Injection
کتاب های آموزش برنامه نویسی فلاتر + دانلود PDF
آموزش نصب فلاتر و رفع خطاهای رایج ساخت پروژه + ویدیو
آموزش استفاده از نقشه در فلاتر
آموزش ساخت Navigation Drawer در فلاتر
4 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
ممنون
خواهش میکنم
سپاس از آموزش هاتون.
سپاس از اموزش