sample

genie.frag

// this file should be inside "shaders" folder

/*
MIT License

Copyright (c) 2023, Altaha Ansari

Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
*/


#version 460 core

precision mediump float;

#include <flutter/runtime_effect.glsl>

uniform vec2 iResolution;
uniform float progress;
uniform float end;
uniform sampler2D iChannel0;

vec2 remap(vec2 uv, vec2 inputLow, vec2 inputHigh, vec2 outputLow, vec2 outputHigh){
    vec2 t = (uv - inputLow)/(inputHigh - inputLow);
    vec2 final = mix(outputLow,outputHigh,t);
    return final;
}

out vec4 fragColor;

void main() {
    vec2 fragCoord = FlutterFragCoord();
    vec2 uv = fragCoord / iResolution.xy;

    float t = uv.y;
    float bias = sin(t * 3.14) * -0.2;
    bias = pow(bias, .9);

    // Adjust these values to target the bottom right corner
    float BOTTOM_POS = end; // Adjusted for bottom right positioning
    float BOTTOM_THICKNESS = 0.2;
    float MINI_FRAME_THICKNESS = 0.2;
    vec2 MINI_FRAME_POS = vec2(0.4, 0.1); // Adjusted for bottom right positioning

    // Adjust calculations for bottom right positioning
    float min_x_curve = mix((BOTTOM_POS - BOTTOM_THICKNESS / 1.5) + bias, 0.0, t);
    float max_x_curve = mix((BOTTOM_POS + BOTTOM_THICKNESS / 1.5) - bias, 1.0, t);
    float min_x = mix(min_x_curve, MINI_FRAME_POS.x, progress);
    float max_x = mix(max_x_curve, MINI_FRAME_POS.x + MINI_FRAME_THICKNESS, progress);
    float min_y = mix(0.0, MINI_FRAME_POS.y, progress);
    float max_y = mix(1.0, MINI_FRAME_POS.y + MINI_FRAME_THICKNESS, progress);

    vec2 modUV = remap(uv, vec2(min_x, min_y), vec2(max_x, max_y), vec2(0.0), vec2(1.0));
    vec2 finalUV = mix(uv, modUV, progress);

    vec3 tex = texture(iChannel0, finalUV).rgb;
    // Check if the finalUV coordinates are outside the 0.0 to 1.0 range
    bool outside = finalUV.x > 1.0 || finalUV.x < 0.0 || finalUV.y > 1.0 || finalUV.y < 0.0;
    // Use the outside condition to set the alpha value
    float alpha = outside ? 0.0 : 1.0;

    // Set the final color, using the alpha value to make the background transparent
    fragColor = vec4(outside ? vec3(0, 0, 0) : tex, alpha);
}

main.dart

import 'dart:async';
import 'dart:math';
import 'dart:ui';

import 'package:audioplayers/audioplayers.dart';
import 'package:device_frame/device_frame.dart';
import 'package:flutter/material.dart';
import 'package:flutter_shaders/flutter_shaders.dart';

void main() {
  runApp(MyApp());
}

class MobileFrame extends StatelessWidget {
  const MobileFrame({super.key, required this.child});
  final Widget child;

  @override
  Widget build(BuildContext context) {
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Stack(
        children: [
          Center(
            child: DeviceFrame(
              device: Devices.ios.iPhone12ProMax,
              isFrameVisible: true,
              orientation: Orientation.portrait,
              screen: child,
            ),
          ),
        ],
      ),
    );
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    var screenSize = MediaQuery.of(context).size;
    bool shouldDisplayFrame = screenSize.width > 800;

    return MaterialApp(
      title: 'Riveo Page Curl',
      theme: ThemeData(
        colorScheme: const ColorScheme.dark(),
        useMaterial3: true,
      ),
      home: shouldDisplayFrame
          ? MobileFrame(child: ImageGalleryPage())
          : ImageGalleryPage(),
    );
    //   return MaterialApp(
    //     theme: ThemeData.dark(
    //       useMaterial3: true,
    //     ),
    //     home: ImageGalleryPage(),
    //   );
    // }
  }
}

class ImageGalleryPage extends StatefulWidget {
  @override
  State<ImageGalleryPage> createState() => _ImageGalleryPageState();
}

class _ImageGalleryPageState extends State<ImageGalleryPage> {
  // List to hold images for the top horizontal list
  List<String> topImages = [];

  // Sample images for the PageView (replace with your own images)
  final List<String> pageViewImages = [
    for (int i = 0; i < 100; i++) ...[
      'https://storage.googleapis.com/pai-images/9db5c5e79ebc4a3eacf38bc8d07b3a74.jpeg',
      'https://storage.googleapis.com/pai-images/ade94e1383334617b3a6bf2398eb00ac.jpeg',
      'https://storage.googleapis.com/pai-images/86efbf5e8c50477dae6314af0932d707.jpeg',
      'https://storage.googleapis.com/pai-images/7c22717157a24f49ad112247935bd29a.jpeg',
      'https://storage.googleapis.com/pai-images/ac34247d3d9a4bafb987b1b0fd3f30c8.jpeg',
      'https://storage.googleapis.com/pai-images/9ef82e1ef091484ba5af2e60ff8d0a18.jpeg',
      'https://storage.googleapis.com/pai-images/05d18a2204a64dabb4056f97db554acc.jpeg',
      'https://storage.googleapis.com/pai-images/eaa930de64ef44d0bfe6fa375a12a67b.jpeg',
    ],
  ];

  final PageController _pageController = PageController();
  double currentPageValue = 0.0;
  bool _isAutoPlayEnabled = false;
  Timer? _autoPlayTimer;

  @override
  void initState() {
    super.initState();
    _pageController.addListener(() {
      setState(() {
        currentPageValue = _pageController.page ?? 0.0;
      });
    });
  }

  void _toggleAutoPlay() {
    setState(() {
      _isAutoPlayEnabled = !_isAutoPlayEnabled;
    });
    if (_isAutoPlayEnabled) {
      _autoPlayTimer = Timer.periodic(Duration(milliseconds: 900), (timer) {
        if (_pageController.page! < pageViewImages.length - 1) {
          _pageController.nextPage(
              duration: Duration(milliseconds: 900),
              curve: Curves.easeInOutCubic);
        } else {
          _pageController.animateToPage(0,
              duration: Duration(milliseconds: 900),
              curve: Curves.easeInOutCubic);
        }
      });
    } else {
      _autoPlayTimer?.cancel();
    }
  }

  @override
  void dispose() {
    _pageController.dispose();
    _autoPlayTimer?.cancel();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Image Gallery'),
        actions: <Widget>[
          IconButton(
            icon: Icon(_isAutoPlayEnabled ? Icons.pause : Icons.play_arrow),
            onPressed: _toggleAutoPlay,
          ),
        ],
      ),
      backgroundColor: Theme.of(context).appBarTheme.foregroundColor,
      body: Column(
        children: <Widget>[
          Expanded(
            child: PageView.builder(
              // reverse: true,
              scrollDirection: Axis.vertical,
              itemCount: pageViewImages.length,
              controller: _pageController,
              itemBuilder: (context, index) {
                double progress0 = currentPageValue - index;
                double progress = progress0;
                progress = progress < 0
                    ? -progress
                    : progress; // Make the progress positive
                return Stack(
                  children: [
                    SizedBox.expand(
                      child: _Page(
                        pageViewImages: pageViewImages,
                        index: index,
                        progress: progress,
                        isCurrentlyVisible: progress0 > 0.5,
                      ),
                    ),
                  ],
                );
              },
            ),
          ),
        ],
      ),
    );
  }
}

class _Page extends StatefulWidget {
  const _Page({
    required this.pageViewImages,
    required this.progress,
    required this.index,
    required this.isCurrentlyVisible,
  });

  final int index;
  final double progress;
  final List<String> pageViewImages;
  final bool isCurrentlyVisible;

  @override
  State<_Page> createState() => _PageState();
}

class _PageState extends State<_Page> with SingleTickerProviderStateMixin {
  late final AudioPlayer _audioPlayer;
  bool _isPlaying = false;

  late double rnd;

  @override
  void didUpdateWidget(covariant _Page oldWidget) {
    // TODO: implement didUpdateWidget
    super.didUpdateWidget(oldWidget);
    if (widget.isCurrentlyVisible) {
      _playPauseAudio();
    }
  }

  @override
  void initState() {
    super.initState();
    rnd = Random().nextDouble();
    rnd = 0.5;
    _audioPlayer = AudioPlayer();
    if (widget.isCurrentlyVisible) {
      _playPauseAudio();
    }
  }

  Future<void> _playPauseAudio() async {
    print("Hi");
    if (!_isPlaying) {
      await _audioPlayer.seek(Duration(milliseconds: 0));
      await _audioPlayer.play(AssetSource("whoosh-1.mp3"));
      setState(() => _isPlaying = true);
    }
  }

  Future<void> _stopAudioAndReset() async {
    await _audioPlayer.stop();
    setState(() => _isPlaying = false);
  }

  @override
  Widget build(BuildContext context) {
    return ShaderBuilder((context, shader, child) {
      return AnimatedSampler(
        (image, size, canvas) {
          shader.setFloatUniforms((uniforms) => uniforms
            ..setSize(size)
            ..setFloat(widget.progress)
            ..setFloat(rnd));

          shader.setImageSampler(0, image);

          canvas.drawRect(
            Rect.fromLTWH(0, 0, size.width, size.height),
            Paint()..shader = shader,
          );
        },
        child: Image.network(
          widget.pageViewImages[widget.index],
          fit: BoxFit.cover,
        ),
      );
    }, assetKey: 'shaders/genie.frag');
  }
}

pubspec.yaml

name: mac_genie_effect
description: "A new Flutter project."
# The following line prevents the package from being accidentally published to
# pub.dev using `flutter pub publish`. This is preferred for private packages.
publish_to: 'none' # Remove this line if you wish to publish to pub.dev

# The following defines the version and build number for your application.
# A version number is three numbers separated by dots, like 1.2.43
# followed by an optional build number separated by a +.
# Both the version and the builder number may be overridden in flutter
# build by specifying --build-name and --build-number, respectively.
# In Android, build-name is used as versionName while build-number used as versionCode.
# Read more about Android versioning at https://developer.android.com/studio/publish/versioning
# In iOS, build-name is used as CFBundleShortVersionString while build-number is used as CFBundleVersion.
# Read more about iOS versioning at
# https://developer.apple.com/library/archive/documentation/General/Reference/InfoPlistKeyReference/Articles/CoreFoundationKeys.html
# In Windows, build-name is used as the major, minor, and patch parts
# of the product and file versions while build-number is used as the build suffix.
version: 1.0.0+1

environment:
  sdk: '>=3.2.3 <4.0.0'

# Dependencies specify other packages that your package needs in order to work.
# To automatically upgrade your package dependencies to the latest versions
# consider running `flutter pub upgrade --major-versions`. Alternatively,
# dependencies can be manually updated by changing the version numbers below to
# the latest version available on pub.dev. To see which dependencies have newer
# versions available, run `flutter pub outdated`.
dependencies:
  flutter:
    sdk: flutter


  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^1.0.2
  flutter_shaders: 0.1.2
  audioplayers: 5.2.0
  flutter_svg: 2.0.8
  flutter_animate: 4.2.0+1
  device_frame: 1.1.0
  url_launcher: 6.2.1
dev_dependencies:
  flutter_test:
    sdk: flutter

  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^2.0.0
# For information on the generic Dart part of this file, see the
# following page: https://dart.dev/tools/pub/pubspec

# The following section is specific to Flutter packages.
flutter:

  # The following line ensures that the Material Icons font is
  # included with your application, so that you can use the icons in
  # the material Icons class.
  uses-material-design: true
  shaders:
    - shaders/genie.frag
  assets:
    - assets/