ویجت 7 (PageView در فلاتر)

خوب دوستان عزیز بریم سراغ یکی از ویجت های جذاااااب فلاتر یعنی PageViewخوب 3 راه مختلف برای ایجاد این ویجت وجود داردحالت PageView.Builder که برای ساخت این ویجت به صورت داینامیک استفاده میشه ( دارای تعداد دلخواه صفحه ) به کد زیر دقت کنیدimport 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title:&quotAndroidmonks&quot, home: Scaffold( body: PageView.builder( itemBuilder: (context, position) { }, itemCount: 10, ), ), )); } حالت PageView.Customبرای ایجاد انیمیشن و حرکات سفارشی در این ویجت استفاده میشه import 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title:&quotAndroidmonks&quot, home: Scaffold( body: PageView.custom( childrenDelegate: SliverChildListDelegate([ ListTile() ])), ), )); }اما بریم سراغ حالت عمومی که استفاده میشه به کد زیر توجه کنیدimport 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title:&quotAndroidmonks&quot, home: Scaffold( body: PageView( children: <Widget>[ Container( child: Center(child:Text(&quotPage 1&quot)), color: Colors.red, ), Container( child: Center(child:Text(&quotPage 2&quot)), color: Colors.blueAccent, ) ], scrollDirection: Axis.vertical, ), ), )); }که scrollDirection جهت اسکرول عمودی و افقی را مشخص میکنه به خروجی این کد دقت کنیدبا استفاده از pageSnapping میشه حرکت ان را برای کاربر احساسی تر کرد که کاربر این پیمایش را به طور کامل انجام دهد به کد و خروجی زیر توجه کنیدimport 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title:&quotAndroidmonks&quot, home: Scaffold( body: PageView( children: <Widget>[ Container( child: Center(child:Text(&quotPage 1&quot)), color: Colors.red, ), Container( child: Center(child:Text(&quotPage 2&quot)), color: Colors.blueAccent, ) ], pageSnapping: false, ), ), )); }برای دادن انیمشن های پیش فرض ان به این ویجت میشه از کد زیر استفاده کردimport 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title:&quotAndroidmonks&quot, home: Scaffold( body: PageView( children: <Widget>[ Container( child: Center(child:Text(&quotPage 1&quot)), color: Colors.red, ), Container( child: Center(child:Text(&quotPage 2&quot)), color: Colors.blueAccent, ), Container( child: Center(child:Text(&quotPage 3&quot)), color: Colors.redAccent, ), Container( child: Center(child:Text(&quotPage 4&quot)), color: Colors.blueAccent, ) ], pageSnapping: false, scrollDirection: Axis.vertical, physics: BouncingScrollPhysics(), ), ), )); }از ClampingScrollPhysics هم میشه استفاده کرد برای بدست اوردن پیج مورد نظر (پیجی که کاربر در ان است پیمایش کرده است )نیز میتوان از کد زیر بهره بردimport 'package:flutter/material.dart'; void main() { runApp(MaterialApp( title:&quotAndroidmonks&quot, home: Scaffold( body: PageView( children: <Widget>[ Container( child: Center(child:Text(&quotPage 1&quot)), color: Colors.red, ), Container( child: Center(child:Text(&quotPage 2&quot)), color: Colors.blueAccent, ), Container( child: Center(child:Text(&quotPage 3&quot)), color: Colors.redAccent, ), Container( child: Center(child:Text(&quotPage 4&quot)), color: Colors.blueAccent, ) ], Changed: (num){ print(&quotCurrent page number is &quot+num.toString()); }, physics: ClampingScrollPhysics(), ), ), )); }به وسیله controller هم میتوان کاربر را به پیج مورد نظر هدایت کنیمimport 'package:flutter/material.dart'; void main() { PageController controller = PageController(); runApp(MaterialApp( title:&quotAndroidmonks&quot, home: Scaffold( body: PageView( children: <Widget>[ Container( child: Center(child:Text(&quotPage 1&quot)), color: Colors.red, ), Container( child: Center(child:Text(&quotPage 2&quot)), color: Colors.blueAccent, ), Container( child: Center(child:Text(&quotPage 3&quot)), color: Colors.redAccent, ), Container( child: Center(child:Text(&quotPage 4&quot)), color: Colors.blueAccent, ) ], controller: controller, Changed: (num){ controller.jumpToPage(2); print(&quotChange:&quot+controller.position.toString()); }, physics: ClampingScrollPhysics(), ), ), )); }به همین سادگی به همین خوشمزگی.اگر مطلب براتون مفید بوده لینک ان را برای دوستانتان در شبکه های اجتماعی بفرستید تا ان ها هم بتوانند استفاده کنند و به دوستداران فلاتر روز به روز افزوده شود?ایدی کانال برای دسترسی به تمام اموزش ها @Learnpgلینک کانال https://t.me/joinchat/AAAAAFDR-mppe-ciC6X1Qgایدی تلگرام بنده @pejmanprogrammerروز های زیبا و جذاااااااااااااااااابی داشته باشید قلب یادتون نره :)