Page View

Basic PageView Horizontal

import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';

SizedBox(
  height: 240,
  child: PageView(
    children: [
      'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
    ].map((e) {
      return ExtendedImage.network(
        e,
        fit: BoxFit.cover,
      );
    }).toList(),
  ),
),

Basic PageView Vertical

import 'package:flutter/material.dart';
import 'package:extended_image/extended_image.dart';

SizedBox(
  height: 240,
  child: PageView(
    scrollDirection: Axis.vertical,
    children: [
      'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
      'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
    ].map((e) {
      return ExtendedImage.network(
        e,
        fit: BoxFit.cover,
      );
    }).toList(),
  ),
),

Basic PageView Horizontal & Indicator

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

final pageController1 = PageController();

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    SizedBox(
      height: 240,
      child: PageView(
        controller: pageController1,
        children: [
          'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
        ].map((e) {
          return ExtendedImage.network(
            e,
            fit: BoxFit.cover,
          );
        }).toList(),
      ),
    ),
    const Gap(16),
    SmoothPageIndicator(
      controller: pageController1,
      count: 5,
      effect: const WormEffect(dotHeight: 10, dotWidth: 10),
    ),
  ],
),

Basic PageView Vertical & Indicator

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

final pageController2 = PageController();

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    Expanded(
      child: SizedBox(
        height: 240,
        child: PageView(
          controller: pageController2,
          scrollDirection: Axis.vertical,
          children: [
            'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
          ].map((e) {
            return ExtendedImage.network(
              e,
              fit: BoxFit.cover,
            );
          }).toList(),
        ),
      ),
    ),
    const Gap(12),
    SmoothPageIndicator(
      controller: pageController2,
      axisDirection: Axis.vertical,
      count: 5,
      effect: const WormEffect(dotHeight: 10, dotWidth: 10),
    ),
    const Gap(12),
  ],
),

PageView Horizontal With Viewport Fraction

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

final pageController3 = PageController(
  viewportFraction: 0.7,
);

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    SizedBox(
      height: 200,
      child: PageView(
        controller: pageController3,
        physics: const BouncingScrollPhysics(),
        children: [
          'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
          'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
        ].map((e) {
          return Padding(
            padding: const EdgeInsets.symmetric(horizontal: 10),
            child: ClipRRect(
              borderRadius: BorderRadius.circular(20),
              child: ExtendedImage.network(
                e,
                fit: BoxFit.cover,
              ),
            ),
          );
        }).toList(),
      ),
    ),
    const Gap(16),
    SmoothPageIndicator(
      controller: pageController3,
      count: 5,
      effect: const WormEffect(dotHeight: 10, dotWidth: 10),
    ),
  ],
),

PageView Vertical With Viewport Fraction

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';
import 'package:gap/gap.dart';
import 'package:smooth_page_indicator/smooth_page_indicator.dart';

final pageController4 = PageController(
  viewportFraction: 0.7,
);

Row(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    const Gap(16),
    Expanded(
      child: SizedBox(
        height: 300,
        child: PageView(
          controller: pageController4,
          physics: const BouncingScrollPhysics(),
          scrollDirection: Axis.vertical,
          children: [
            'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
            'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
          ].map((e) {
            return Padding(
              padding: const EdgeInsets.symmetric(vertical: 16),
              child: ClipRRect(
                borderRadius: BorderRadius.circular(20),
                child: ExtendedImage.network(
                  e,
                  fit: BoxFit.cover,
                ),
              ),
            );
          }).toList(),
        ),
      ),
    ),
    const Gap(12),
    SmoothPageIndicator(
      controller: pageController4,
      axisDirection: Axis.vertical,
      count: 5,
      effect: const WormEffect(dotHeight: 10, dotWidth: 10),
    ),
    const Gap(12),
  ],
),

PageView Gallery Horizontal

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';

final pageController5 = PageController(initialPage: 0);
int currentPage5 = 0;
final images = [
  'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
];

Column(
  crossAxisAlignment: CrossAxisAlignment.center,
  children: [
    SizedBox(
      height: 240,
      child: PageView(
        controller: pageController5,
        onPageChanged: (value) {
          currentPage5 = value;
          setState(() {});
        },
        physics: const BouncingScrollPhysics(),
        children: images.map((e) {
          return ExtendedImage.network(
            e,
            fit: BoxFit.cover,
          );
        }).toList(),
      ),
    ),
    SizedBox(
      height: 60,
      child: Row(
        children: List.generate(images.length, (index) {
          return Flexible(
            child: GestureDetector(
              onTap: () {
                pageController5.animateToPage(
                  index,
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeIn,
                );
              },
              child: Stack(
                fit: StackFit.expand,
                children: [
                  ExtendedImage.network(
                    images[index],
                    fit: BoxFit.cover,
                  ),
                  if (currentPage5 != index)
                    DecoratedBox(
                      decoration: BoxDecoration(
                        color: Colors.black.withOpacity(0.5),
                      ),
                    ),
                ],
              ),
            ),
          );
        }),
      ),
    ),
  ],
),

PageView Gallery Vertical

import 'package:extended_image/extended_image.dart';
import 'package:flutter/material.dart';

final pageController6 = PageController(initialPage: 0);
int currentPage6 = 0;
final images = [
  'https://images.pexels.com/photos/1271619/pexels-photo-1271619.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/1285625/pexels-photo-1285625.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/307008/pexels-photo-307008.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/38238/maldives-ile-beach-sun-38238.jpeg?auto=compress&cs=tinysrgb&w=600',
  'https://images.pexels.com/photos/2114206/pexels-photo-2114206.jpeg?auto=compress&cs=tinysrgb&w=600',
];

SizedBox(
  height: 240,
  child: Row(
    children: [
      Expanded(
        child: PageView(
          controller: pageController6,
          physics: const BouncingScrollPhysics(),
          scrollDirection: Axis.vertical,
          onPageChanged: (value) {
            currentPage6 = value;
            setState(() {});
          },
          children: images.map((e) {
            return ExtendedImage.network(
              e,
              fit: BoxFit.cover,
            );
          }).toList(),
        ),
      ),
      SizedBox(
        width: 60,
        child: Column(
          children: List.generate(images.length, (index) {
            return Flexible(
              child: GestureDetector(
                onTap: () {
                  pageController6.animateToPage(
                    index,
                    duration: const Duration(milliseconds: 300),
                    curve: Curves.easeIn,
                  );
                },
                child: Stack(
                  fit: StackFit.expand,
                  children: [
                    ExtendedImage.network(
                      images[index],
                      fit: BoxFit.cover,
                    ),
                    if (currentPage6 != index)
                      DecoratedBox(
                        decoration: BoxDecoration(
                          color: Colors.black.withOpacity(0.5),
                        ),
                      ),
                  ],
                ),
              ),
            );
          }),
        ),
      ),
    ],
  ),
),