ویجت 1 (SnackBar در فلاتر)

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

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

قبل از رفتن به سراغ ویجت مون باید باتن و قسمت اصلی کد صفحه مون را بنویسیم

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

class SnackPage extends StatefulWidget {
  @override
  _SnackState createState() => _SnackState();
}

class _SnackState extends State<SnackPage> {
  GlobalKey<ScaffoldState> _key = GlobalKey();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        key: _key,
        appBar: AppBar(
          title: Text(PageName.SNACK_BAR),
        ),
        body: Center(
          child: RaisedButton(
            onPressed: () {
             // our code.
            },
            child: Text(&quotShow the snack bar&quot),
            color: RED,
          ),
        ));
  }
}

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

final bar = _snackSample();
_key.currentState.showSnackBar(bar);

در مرحله بعدی می رسیم پیاده سازی سراغ پیاده سازی ویجت اصلی مان و شناخت ویژگی های ان

SnackBar({
    Key key,
    @required this.content,
    this.backgroundColor,
    this.action,
    this.duration = _kSnackBarDisplayDuration,
    this.animation,
  })

قسمت content که محتوای ویجت مون را ایجاد میکنه مثلا در تصویر بالا You have a message

قسمت backgroundColor هم رنگ پشت را ایجاد میکنه مثل backgroundColor: Colors.lightGreen

قسمت action برای تعریف عملگرد در ویجت استفاده میشه

Widget _snackAction() => SnackBar(
        content: Text(
          &quotTest the action in the SnackBar.&quot,
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        action: SnackBarAction(
          label: &quotI Know!&quot,
          textColor: Colors.white,
          disabledTextColor: TEXT_BLACK_LIGHT,
          onPressed: () {
            print(&quotI know you are testing the action in the SnackBar!&quot);
          },
        ),
        backgroundColor: BLUE_LIGHT,
      );

قسمت duration هم مدت زمان نمایش ویجت مان است

Widget _snackDuration() => SnackBar(
        content: Text(
          &quotYou have a message!&quot,
          style: TextStyle(
            color: TEXT_BLACK,
            fontSize: 20,
          ),
          textAlign: TextAlign.center,
        ),
        backgroundColor: BLUE_LIGHT,
        duration: Duration(milliseconds: 100),
      );

و در نهایت animation هم برای ایجاد انیمیشن مورد نظر به کار می رود و در اخر کار خروجی شبیه زیر خواهیم داشت

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

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

ایدی کانال برای دسترسی به تمام اموزش ها @Learnpg

لینک کانال https://t.me/joinchat/AAAAAFDR-mppe-ciC6X1Qg

ایدی تلگرام بنده @pejmanprogrammer

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