ویجت 3 (AlertDialog در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی AlertDialog

اگر با این ویجت اشنایی ندارید تصویر زیر نشان دهنده کامل این ویجت است که دیالوگی را به کاربر نمایش می دهد

قبل از شروع کار با ویجت کد نویسی اولیه را برای ایجاد طرح اولیه انجام میدهیم

import &quotpackage:flutter/material.dart"
import 'package:flutter_widgets/const/_const.dart';

class SimpleDialogPage extends StatefulWidget {
  @override
  _DialogState createState() => _DialogState();
}

class _DialogState extends State<SimpleDialogPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(PageName.SIMPLE_DIALOG),
      ),
      body: SingleChildScrollView(
       
      ),
    );
  }
}

قبل از رفتن سراغ جزئیات ویجت مان یک دست گرمی باهاش میزنیم تا ببینیم این ویجت چند مرده حلاجه :)

SimpleDialog(
              title: Text(&quotWhat we do?&quot),
              children: [
                Text(&quotThis is our tutorial about the SimpleDialog.&quot),
              ],
            ),

و خروجی

پارامتر های AlertDialog به شکل زیر است

SimpleDialog({
    Key key,
    this.title,
    this.titlePadding = const EdgeInsets.fromLTRB(24.0, 24.0, 24.0, 0.0),
    this.children,
    this.contentPadding = const EdgeInsets.fromLTRB(0.0, 12.0, 0.0, 16.0),
    this.backgroundColor,
    this.elevation,
    this.semanticLabel,
    this.shape,
  })

پارامتر title که عنوان دیالوگ ماست و elavation هم که سایه ماست

اما shape که برای طراحی شکل دیالوگ ما به کار میرود

به کد زیر و خروجی ان دقت کنید

Widget _shapeDialog() => SimpleDialog(
        title: Text(
          &quotBe careful!&quot,
          textAlign: TextAlign.center,
        ),
        children: <Widget>[
          Text(
            &quotIf you write a message, you should care about the message.&quot,
            textAlign: TextAlign.center,
          ),
        ],
        backgroundColor: BLUE_LIGHT,
        elevation: 4,
        shape: StadiumBorder(
          side: BorderSide(
            style: BorderStyle.none,
          ),
        ),
      );

ویجت AlertDialog هم به مانند SampleDialog است با یکسری پارامتر های جدید

AlertDialog({
    Key key,
    this.title,
    this.titlePadding,
    this.titleTextStyle,
    this.content,
    this.contentPadding = const EdgeInsets.fromLTRB(24.0, 20.0, 24.0, 24.0),
    this.contentTextStyle,
    this.actions,
    this.backgroundColor,
    this.elevation,
    this.semanticLabel,
    this.shape,
  })

پارامتر action برای ایجاد عملکرد در دیالوگ مورد استفاده قرار می گیره به کد زیر نگاه کنید

Widget _alertDialog() => AlertDialog(
        title: Text(
          &quotHow to follow us?&quot,
          textAlign: TextAlign.center,
        ),
        titleTextStyle: TextStyle(
            color: TEXT_BLACK, fontSize: 30, fontWeight: FontWeight.w700),
        titlePadding: EdgeInsets.symmetric(horizontal: 30, vertical: 20),
        content: Text(&quot1. You should login in the facebook.\n&quot
            &quot2. You should search the Flutter Open.\n&quot
            &quot3. Then, you can follow the Flutter Open.&quot),
        contentPadding: EdgeInsets.symmetric(horizontal: 20, vertical: 20),
        contentTextStyle: TextStyle(color: TEXT_BLACK_LIGHT, fontSize: 16),
        actions: <Widget>[
          Container(
            height: 40,
            width: 100,
            child: FlatButton(
              child: Text(
                &quotSure&quot,
                style: TextStyle(color: TEXT_BLACK_LIGHT),
              ),
              color: RED_LIGHT,
              onPressed: () {
                print(&quotHello&quot);
              },
            ),
          )
        ],
        shape: RoundedRectangleBorder(
          side: BorderSide(
            style: BorderStyle.none,
          ),
          borderRadius: BorderRadius.circular(10)
        ),
      );

به همین سادگی به همین خوشمزگی.

اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?

روز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)