آموزش استفاده از ویجت PageView در فلاتر

یکی از روش های جا به جایی بین صفحات در طراحی اپلیکیشن با استفاده از فلاتر, PageView می باشد.

این جا به جایی از طریق کشیدن انگشت ها بروی صفحه نمایش اتفاق میافتد.

درباره جا به جایی در بین صفحات بصورت عادی قبلا صحبت کرده بودیم که میتونید از لینک زیر آن را مشاهده کنید.

مسیریابی در فلاتر

ویجت PageView در فلاتر چیست؟

ویجت PageView در فلاتر یک ویجت اسکرول افقی است که به شما این امکان را می دهد که بین چندین صفحه مختلف پیمایش کنید.

کاربردهای ویجت PageView:

• نمایش اسلایدشو: می توانید از PageView برای نمایش اسلایدشو تصاویر یا متن استفاده کنید.
  
• نمایش لیست آیتم ها: می توانید از PageView برای نمایش لیست آیتم ها به صورت افقی استفاده کنید.
  
• نمایش صفحات مختلف: می توانید از PageView برای نمایش صفحات مختلف اپلیکیشن خود مانند صفحه اصلی، صفحه تنظیمات و غیره استفاده کنید.

نحوه استفاده از ویجت PageView:

• برای استفاده از ویجت PageView، باید یک لیست از ویجت ها را به عنوان فرزند به آن بدهید.
  
• می توانید از PageViewController برای کنترل پیمایش بین صفحات استفاده کنید.

نکات:

• می توانید از انیمیشن برای پیمایش بین صفحات استفاده کنید.
  
• می توانید از PageIndicator برای نمایش شماره صفحه فعلی استفاده کنید.
  
• می توانید از GestureDetector برای اضافه کردن حرکات لمسی به PageView استفاده کنید.

برای پیاده سازی این کار شما نیاز به PageViewController و یک PageView دارید.

پیاده سازیPageViewController

PageViewController را داخل یک ویجت StateFul قرار دهید و آن را مقدار دهی کنید.

برای این کار میتونید به شکل زیر عمل کنید.

PageController _controller = PageController(
    initialPage: 0,
);

میتونید درون متد init هم آن را مقدار دهی کنید.

در کد بالا مقدار initialPage را برابر صفر قرار دادیم که صفحه ابتدایی را مشخص می کند.

هر وقت خواستید PageViewController را غیر فعال کنید مثل اکثر مواقع میتونید به شکل زیر عمل کنید.

@override
void dispose() {
  _controller.dispose();
  super.dispose();
}

ویجت PageView

بعد از انجام تمام کارها باید controller و داخل PageView قرار بدیم و چندتا ویجت به عنوان فرزند برای نمایش دادن انتخاب کنیم.

PageView(
  controller: _controller,
  children: [
    MyPage1Widget(),
    MyPage2Widget(),
    MyPage3Widget(),
  ],
)

کد کامل تر صفحه ما چیزی شبیه به این باید باشه.

class PageViewDemo extends StatefulWidget {

  @override
  _PageViewDemoState createState() => _PageViewDemoState();
}

class _PageViewDemoState extends State<pageviewdemo> {
  PageController _controller = PageController(
    initialPage: 0,
  );

  @override
  void dispose() {
    _controller.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return PageView(
      controller: _controller,
      children: [
        MyPage1Widget(),
        MyPage2Widget(),
        MyPage3Widget(),
      ],
    );
  }
}
)

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

آشنایی با الگوهای طراحی در برنامه نویسی

PageView(
  controller: _controller,
  scrollDirection: Axis.vertical,
  children: [
    MyPage1Widget(),
    MyPage2Widget(),
    MyPage3Widget(),
  ],
)

Viewport fraction

اگر در کنترلر مقدار viewportFraction را کمتر از 1 قرار دهید میتونید صفحه های مجاور خودتون و مشاده کنید.

در واقع با این کار کمی سرعت جا به جایی را پایین می آورید و کاربر متوجه این جا به جایی می شود.

 PageController _controller = PageController(
  initialPage: 0,
  viewportFraction: 0.8
);

برای پیاده سازی PageView  کتابخانه های مختلفی هم وجود دارند که بنابر نیاز میتونید از آنها استفاده کنید.

یکی از این کتابخانه ها Liquid swipe هست.