Flutter UI #100: Fun with Perspective Pageview in Flutter


Flutter UI #100: Fun with Perspective Pageview in Flutter

Tutorial and code of Perspective Pageview in Flutter. Copy and paste the below code as per your requirements.

perspective_pageview: ^0.1.1

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

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter PageView',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        appBar: AppBar(title: const Center(child: Text("Perspective Pageview"),),),
        body: Center(
          child: PerspectivePageView(
            hasShadow: true, // Enable-Disable Shadow
            shadowColor: Colors.black12, // Change Color
            aspectRatio: PVAspectRatio.ONE_ONE, // Add Aspect Ratio
            children: <Widget>[
              GestureDetector(
                onTap: () {
                  debugPrint("Statement One");
                },
                child: Image.network(
                  "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/105947630_1439229316275118_7379310549518040610_n.jpg?stp=c180.0.1080.1080a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=Xe3M6BYPM9MAX99_ear&edm=APU89FABAAAA&ccb=7-4&oh=00_AT_LYk8cjKi3VkEvT2SaldEioXHtsdZhKMFLbRAwXAXdbQ&oe=625CEBFA&_nc_sid=86f79a", width: 250,
                  fit: BoxFit.fill,),
              ),
              GestureDetector(
                onTap: () {
                  debugPrint("Statement Two");
                },
                child: Image.network(
                  "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/268794272_299440832107118_408863640682183643_n.jpg?stp=c296.0.652.652a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=102&_nc_ohc=l6WCVHJ9UvEAX_axs5E&edm=ABfd0MgBAAAA&ccb=7-4&oh=00_AT-hfH3W4AxWCs09NSF3GYZ7brc4ch-aWdKLB1o0pPvILA&oe=6263ACF9&_nc_sid=7bff83", width: 250,
                  fit: BoxFit.fill,),
              ),
              GestureDetector(
                onTap: () {
                  debugPrint("Statement One");
                },
                child: Image.network(
                  "https://instagram.fstv5-1.fna.fbcdn.net/v/t51.2885-15/105947630_1439229316275118_7379310549518040610_n.jpg?stp=c180.0.1080.1080a_dst-jpg_e35_s640x640_sh0.08&_nc_ht=instagram.fstv5-1.fna.fbcdn.net&_nc_cat=110&_nc_ohc=Xe3M6BYPM9MAX99_ear&edm=APU89FABAAAA&ccb=7-4&oh=00_AT_LYk8cjKi3VkEvT2SaldEioXHtsdZhKMFLbRAwXAXdbQ&oe=625CEBFA&_nc_sid=86f79a", width: 250,
                  fit: BoxFit.fill,),
              ),
            ],

          ),
        ),
      ),
    );
  }
}

Leave a Reply

Your email address will not be published.