ویجت 26 (BackdropFilter در فلاتر)

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

داشتم شیشه های پنجره را تمیز می کردم ناگهان فلاتر خانم وارد خانه شد و نگاهی عمیق به شیشه کرد گفتم چیه تا حالا ندیدی یک مرد شیشه بشوره البته حق هم داری ما همش نزدیک عید هیچ وقت خانه نیستیم :) گفت نه بابا نگاه به شیشه کن یک چیزی بین تار و روشن است و دیدن منظره پشت این شیشه چقدر عجیب و زیباست منظره ای تار و روشن! همون جا بود که ایده ی ساخت این ویجت یعنی BackdropFilter به ذهنش رسید گفت دنبال چیزی هستم که بشه تصاویر را به راحتی ویرایش کرد و حتی ان را BLUR کرد و زیبایش کرد

منم پنجره را باز کردم خواستم بپرم پایین از دست این فلاتر اما منصرف شدم و گفتم بیام براتون یک مطلب در موردش بنویسم بعد تصمیم می گیرم :)

خوب بریم سراغ کد ان

import 'dart:ui';

import 'package:flutter/material.dart';

void main()
{
  runApp(MaterialApp(
    title: 'Androidmonks',
    home: Scaffold(
      appBar: AppBar(title: Text(&quotBackdrop Filter&quot),),
      body: Stack(
        children: <Widget>[
          ConstrainedBox(
            child: Image.network(&quothttps://images.pexels.com/photos/248797/pexels-photo-248797.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260&quot),
            constraints: BoxConstraints.expand(),
          ),
          Container(
            child: BackdropFilter(
              filter: ImageFilter.blur(sigmaX: 5, sigmaY: 6),
              child: Container(
                decoration: BoxDecoration(
                  color: Colors.grey.shade100.withOpacity(0.2),
                )
              ),
            ),
          ),
        ],
      ),

    ),
  ));
}

در کد بالا هدف BLUR کردن تصویر است پس در فیلتر این ویجت این کار را انجام می دهیم بعد از ان یک بچه تعریف کردیم و ویجت Container را بهش دادیم و رنگ مورد نظر خود را یعنی Grey را برایش انتخاب کردیم منتها Opacity که میزان تار بودن ان را کنترل میکنه یعنی از 0 تا 1 ان را 0.2 اختصاص دادیم که پس زمینه پشت بتواند جلوه کند خروجی ان به شکل زیر در امد

پیشنهاد میکنم با مقادیر ان کمی بازی کنید تا بهتر متوجه شوید ولی اگر بخواهید قسمتی را Blur کنید میتونید از Stack و سپس مقدار دهی Position به ان استفاده کنید که در اموزش های قبلی Stack را کامل بازگو کردم

نمونه خروجی دیگر این ویجت

حالا جاهایی تصویری نشان داده می شود و سوالی می پرسید میتونید ان عکس را Blur و تار کرده بعد پاسخ گویی ان را به حالت قبل در اورید

امیدوارم از این اموزش نهایت لذت را برده باشید

من از این ویجت یاد گرفتم مشکلاتی که درون وجودم را تار کرده اند و فکر میکنم اصلا زیبا نیستند میتوان به دید دیگری نگاه کرد و زیباهای بسیاری از ان بیرون کشید که همان ها بودند که تو الان اینجایی به قول افلاطون که میگه
امور مهمه هرگز به دور از خطر نیست و چنان که می‌گویند، دشواری، شرط هر چیز زیباست

نوشته شده توسط پژمان حاجی حیدری یک دوستدار فلاتر

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

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

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