ویجت 17 (Hero در فلاتر)

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

ادم با شنیدن اسم این ویجت یاد بازی Dota می افته :) در فلاتر با استفاده Hero انیمیشنی موقع جابه جایی بین صفحات به وِیجت مورد نظر داده می شود

بی وقفه بریم سراغ کد نویس ان

در صفحه ی اول این کد را به ایکون مورد نظر می دهیم و یک ایدی در پارامتر tag به ان می دهیم تا بتوانیم در صفحه ی دوم ان را به ویجتی مورد نظر بشناسانیم و انیمیشن را ایجاد کنیم

Hero(
  tag: &quotDemoTag&quot,
  child: Icon(
    Icons.add,
    size: 70.0,
  ),
),

در صفحه ی دوم کافی است به همین شکل عمل کنید

Hero(
  tag: &quotDemoTag&quot,
  child: Icon(
    Icons.add,
    size: 150.0,
  ),
),

و خروجی ان

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

Hero(
    tag: &quotDemoTag&quot,
    child: Icon(
      Icons.add,
      size: 150.0,
    ),
    placeholderBuilder: (context, widget) {
 return Container(
        height: 150.0,
        width: 150.0,
        child: CircularProgressIndicator(),
      );
    },
  ),

با استفاده از placeholderBuilder به راحتی این کار شدنی است شما هر ویجت دیگه ای هم می تونید جایگزینش کنید یک مثال دیگه

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

Hero(
  tag: &quotDemoTag&quot,
  child: Icon(
    Icons.add,
    size: 150.0,
  ),
  flightShuttleBuilder: (flightContext, animation, direction,
      fromContext, toContext) {
 return Icon(FontAwesomeIcons.rocket, size: 150.0,);
  },
),

با استفاده از flightShuttleBuilder به راحتی حرکت بین صفحه را با ویجت مورد نظر میشه مدیریت کرد

خسته که نشدی ؟ وقتی در مورد Hero میخونی خودت هم باید توی زندگی Hero باشی :)

حالا اگر بخواهی مسیر رفت و برگشت را مدیریت کنی فقط کافی است از کد زیر استفاده کنید

if(direction == HeroFlightDirection.push) {
 return Icon(
    FontAwesomeIcons.rocket,
    size: 150.0,
  );
} else if (direction == HeroFlightDirection.pop){
 return Icon(
    FontAwesomeIcons.rocket,
    size: 70.0,
  );
}

زمان رفت از Push و برگشت از Pop

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

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

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

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

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

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

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

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