آموزش ویجت Hero در فلاتر

ویجت Hero در فلاتر برای انجام انیمیشن‌های ترنزیشن بین دو صفحه مختلف استفاده می‌شود. با استفاده از این ویجت، می‌توانید یک عنصر در صفحه اول را به عنوان مبدأ ترنزیشن تعریف کنید و در صفحه دوم، همان عنصر را به عنوان مقصد ترنزیشن تعریف کنید. فلاتر به صورت خودکار مابین دو صفحه ترنزیشن انجام می‌دهد.

برای استفاده از Hero باید ابتدا یک Hero در صفحه مبدأ و یک Hero با نام یکسان در صفحه مقصد تعریف کنید. نام Hero در دو ویجت باید یکسان باشد. سپس باید عنصری که می‌خواهید بین دو صفحه ترنزیشن داشته باشید را در Hero در هر دو صفحه قرار دهید.

مثال زیر نحوه استفاده از Hero را نشان می‌دهد:

class FirstPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('First Page'),
      ),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            width: 100,
            height: 100,
            color: Colors.blue,
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.push(
            context,
            MaterialPageRoute(
              builder: (context) => SecondPage(),
            ),
          );
        },
        child: Icon(Icons.arrow_forward),
      ),
    );
  }
}

class SecondPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Second Page'),
      ),
      body: Center(
        child: Hero(
          tag: 'hero-tag',
          child: Container(
            width: 200,
            height: 200,
            color: Colors.red,
          ),
        ),
      ),
    );
  }
}


در این مثال، یک مربع با رنگ آبی در صفحه اول قرار دارد که درون ویجت Hero قرار گرفته است. در صفحه دوم نیز همان مربع با رنگ قرمز و درون ویجت Hero با همان نام hero-tag وجود دارد. وقتی کاربر از صفحه اول به صفحه دوم منتقل می‌شود، فلاتر به صورت خودکار مابین دو صفحه ترنزیشن انجام می‌دهد و مربع آبی در صفحه اول به صورت انیمیشنی به اندازه و موقعیت مربع قرمز در صفحه دوم تغییر می‌کند.

در مثال بالا، tag ویجت Hero در هر دو صفحه با نام یکسان hero-tag تعریف شده است. این برچسب، فلاتر را قادر می‌سازد تا عنصر در دو صفحه را به یکدیگر مرتبط کند و ترنزیشن مناسبی بین دو صفحه ایجاد کند.

شما می‌توانید از ویژگی‌های مختلف Hero مانند flightShuttleBuilder یا placeholderBuilder استفاده کنید تا انیمیشن ترنزیشن شما بیشتر شخصی شود. به عنوان یک نکته، اگر می‌خواهید از Hero در اپلیکیشن خود استفاده کنید

به یاد داشته باشید که عناصری که می‌خواهید بین صفحات ترنزیشن داشته باشید باید در هر دو صفحه وجود داشته باشند. اگر عنصر مربوطه در صفحه مبدأ یا صفحه مقصد وجود نداشته باشد، Hero نمی‌تواند ترنزیشن را به درستی انجام دهد. با استفاده از Hero، می‌توانید انیمیشن‌های ترنزیشن جالبی را در اپلیکیشن خود ایجاد کنید و تجربه کاربری بهتری را برای کاربران فراهم کنید.