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

Flow یک ویجت ارائه شده در فلاتر است که به شما اجازه می‌دهد تا ویجت‌های خود را در یک جریان (flow) قرار دهید. این ویجت از Stack متمایز است، زیرا ویجت‌ها در Flow با استفاده از یک نقطه مرجع مشترک قرار گرفته و در جریانی خطی (linear flow) قرار دارند. این ویژگی Flow را برای طراحی صفحات کاربری پویا و چند رسانه‌ای بسیار مناسب می‌کند.

برای استفاده از Flow، ابتدا یک List<Widget> از ویجت‌های مورد نظر خود را ایجاد کنید. سپس Flow را با استفاده از ویجتی به نام Flow و با انتصاب آن List به children، ایجاد کنید. سپس با استفاده از delegate، می‌توانید نوع جریان خود را مشخص کنید.

در اینجا مثالی از چگونگی استفاده از Flow با یک Wrap delegate خواهیم داشت:

Flow(
  delegate: FlowWrapDelegate(spacing: 20.0),
  children: [
    Container(
      width: 80.0,
      height: 80.0,
      color: Colors.red,
    ),
    Container(
      width: 80.0,
      height: 80.0,
      color: Colors.blue,
    ),
    Container(
      width: 80.0,
      height: 80.0,
      color: Colors.green,
    ),
    Container(
      width: 80.0,
      height: 80.0,
      color: Colors.yellow,
    ),
    Container(
      width: 80.0,
      height: 80.0,
      color: Colors.orange,
    ),
  ],
)

در این مثال، یک Flow با یک FlowWrapDelegate به نام spacing با مقدار 20.0 ایجاد شده است. با استفاده از children، چندین Container با اندازه و رنگ مختلف به عنوان محتویات Flow اضافه شده است.

FlowWrapDelegate برای قرار دادن ویجت‌ها در Flow با یک الگوی جریان wrap کاربرد دارد. با استفاده از spacing می‌توانید فاصله بین ویجت‌ها را تنظیم کنید.

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

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

class MyFlowDelegate extends FlowDelegate {
  double margin = 20.0;

  @override
  void paintChildren(FlowPaintingContext context) {
    double x = margin;
    double y = margin;

    for (int i = 0; i < context.childCount; i++) {
      double w = context.getChildSize(i).width + margin * 2;
      double h = context.getChildSize(i).height + margin * 2;

      if (x + w > context.size.width) {
        x = margin;
        y += h;
      }

      context.paintChild(i, transform: Matrix4.translationValues(x, y, 0.0));

      x += w;
    }
  }

  @override
  bool shouldRepaint(FlowDelegate oldDelegate) => true;
}

در این مثال، کلاس MyFlowDelegate از FlowDelegate گسترش یافته است و دو متغیر margin و paintChildren تعریف شده‌اند. paintChildren برای نقاشی ویجت‌ها در جریان شخصی‌سازی شده استفاده می‌شود. در اینجا، ما ویجت‌های جریان را در یک دو بعدی قرار داده‌ایم، به طوری که اگر مجموع ارتفاع و عرض ویجت‌ها به عرض جریان بیشتر از context.size.width شود، ویجت‌ها به خط بعدی منتقل می‌شوند. shouldRepaint همواره true را برمی‌گرداند، چرا که همیشه باید جریان را مجدداً رسم کنیم.

برای استفاده از MyFlowDelegate، می‌توانید این کد را استفاده کنید:

Flow(
  delegate: MyFlowDelegate(),
 children: [
Container(width: 80, height: 80, color: Colors.red),
Container(width: 80, height: 80, color: Colors.green),
Container(width: 80, height: 80, color: Colors.blue),
Container(width: 80, height: 80, color: Colors.yellow),
Container(width: 80, height: 80, color: Colors.orange),
Container(width: 80, height: 80, color: Colors.purple),
Container(width: 80, height: 80, color: Colors.teal),
Container(width: 80, height: 80, color: Colors.pink),
Container(width: 80, height: 80, color: Colors.grey),
],
)

در این مثال، ما از MyFlowDelegate به عنوان delegate در Flow استفاده کرده‌ایم و چند ویجت Container درون جریان قرار داده‌ایم.

این فقط یک نمونه کوچک از امکاناتی است که Flow با استفاده از FlowDelegate ارائه می‌دهد. شما می‌توانید با تغییر روش‌های FlowDelegate خود، جریان‌های شخصی‌سازی شده و پویا را ایجاد کنید.