ویجت 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

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