liquid_swipe_upgrade 0.0.1

A Flutter package that provides an upgraded version of the liquid_swipe package.

example/lib/main.dart

import 'dart:math';

import 'package:flutter/material.dart';
import 'package:liquid_swipe_upgrade/Helpers/Helpers.dart';
import 'package:liquid_swipe_upgrade/PageHelpers/LiquidController.dart';
import 'package:liquid_swipe_upgrade/liquid_swipe.dart';

void main() {
  /// Comment or uncomment to run both examples
  runApp(
    WithBuilder(),
    // WithPages()
  );
}

///Class to hold data for itembuilder in Withbuilder app.
class ItemData {
  final Color color;
  final String image;
  final String text1;
  final String text2;
  final String text3;

  ItemData(this.color, this.image, this.text1, this.text2, this.text3);
}

/// Example of LiquidSwipe with itemBuilder
class WithBuilder extends StatefulWidget {
  @override
  _WithBuilder createState() => _WithBuilder();
}

class _WithBuilder extends State<WithBuilder> {
  int page = 0;
  late LiquidController liquidController;
  late UpdateType updateType;

  List<ItemData> data = [
    ItemData(Colors.blue, "assets/1.png", "Hi", "It's Me", "Sahdeep"),
    ItemData(
      Colors.deepPurpleAccent,
      "assets/1.png",
      "Take a",
      "Look At",
      "Liquid Swipe",
    ),
    ItemData(Colors.green, "assets/1.png", "Liked?", "Fork!", "Give Star!"),
    ItemData(
      Colors.yellow,
      "assets/1.png",
      "Can be",
      "Used for",
      "Onboarding design",
    ),
    ItemData(
      Colors.pink,
      "assets/1.png",
      "Example",
      "of a page",
      "with Gesture",
    ),
    ItemData(Colors.red, "assets/1.png", "Do", "try it", "Thank you"),
  ];

  @override
  void initState() {
    liquidController = LiquidController();
    super.initState();
  }

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(0.0, 1.0 - ((page) - index).abs()),
    );
    double zoom = 1.0 + (2.0 - 1.0) * selectedness;
    return new Container(
      width: 25.0,
      child: new Center(
        child: new Material(
          color: Colors.white,
          type: MaterialType.circle,
          child: new Container(width: 8.0 * zoom, height: 8.0 * zoom),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            LiquidSwipe.builder(
              itemCount: data.length,
              itemBuilder: (context, index) {
                return Container(
                  width: double.infinity,
                  color: data[index].color,
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.center,
                    mainAxisSize: MainAxisSize.max,
                    mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                    children: <Widget>[
                      Image.asset(
                        data[index].image,
                        height: 300,
                        fit: BoxFit.contain,
                      ),
                      Padding(padding: EdgeInsets.all(index != 4 ? 24.0 : 0)),
                      index == 4
                          ? Padding(
                            padding: const EdgeInsets.symmetric(
                              horizontal: 70.0,
                            ),
                            child: ExampleSlider(),
                          )
                          : SizedBox.shrink(),
                      Column(
                        children: <Widget>[
                          Text(data[index].text1, style: WithPages.style),
                          Text(data[index].text2, style: WithPages.style),
                          Text(data[index].text3, style: WithPages.style),
                        ],
                      ),
                    ],
                  ),
                );
              },
              positionSlideIcon: 0.8,
              slideIconWidget: Icon(Icons.arrow_back_ios),
              onPageChangeCallback: pageChangeCallback,
              waveType: WaveType.liquidReveal,
              liquidController: liquidController,
              fullTransitionValue: 880,
              enableSideReveal: true,
              preferDragFromRevealedArea: true,
              enableLoop: true,
              ignoreUserGestureWhileAnimating: true,
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  Expanded(child: SizedBox()),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List<Widget>.generate(data.length, _buildDot),
                  ),
                ],
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.all(25.0),
                child: TextButton(
                  onPressed: () {
                    liquidController.animateToPage(
                      page: data.length - 1,
                      duration: 700,
                    );
                  },
                  child: Text("Skip to End"),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.white.withOpacity(0.01),
                    foregroundColor: Colors.black,
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Padding(
                padding: const EdgeInsets.all(25.0),
                child: TextButton(
                  onPressed: () {
                    liquidController.jumpToPage(
                      page:
                          liquidController.currentPage + 1 > data.length - 1
                              ? 0
                              : liquidController.currentPage + 1,
                    );
                  },
                  child: Text("Next"),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.white.withOpacity(0.01),
                    foregroundColor: Colors.black,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  pageChangeCallback(int lpage) {
    setState(() {
      page = lpage;
    });
  }
}

///Example of App with LiquidSwipe by providing list of widgets
class WithPages extends StatefulWidget {
  static final style = TextStyle(
    fontSize: 30,
    fontFamily: "Billy",
    fontWeight: FontWeight.w600,
  );

  @override
  _WithPages createState() => _WithPages();
}

class _WithPages extends State<WithPages> {
  int page = 0;
  late LiquidController liquidController;
  late UpdateType updateType;
  final pages = [
    Container(
      color: Colors.blue,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset('assets/1.png', fit: BoxFit.cover),
          Padding(padding: EdgeInsets.all(24.0)),
          Column(
            children: <Widget>[
              Text("Hi", style: WithPages.style),
              Text("It's Me", style: WithPages.style),
              Text("Sahdeep", style: WithPages.style),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.deepPurpleAccent,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset('assets/1.png', fit: BoxFit.cover),
          Padding(padding: EdgeInsets.all(24.0)),
          Column(
            children: <Widget>[
              Text("Take a", style: WithPages.style),
              Text("look at", style: WithPages.style),
              Text("Liquid Swipe", style: WithPages.style),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.green,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset('assets/1.png', fit: BoxFit.cover),
          Padding(padding: EdgeInsets.all(24.0)),
          Column(
            children: <Widget>[
              Text("Liked?", style: WithPages.style),
              Text("Fork!", style: WithPages.style),
              Text("Give Star!", style: WithPages.style),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.yellow,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset('assets/1.png', fit: BoxFit.cover),
          Padding(padding: EdgeInsets.all(24.0)),
          Column(
            children: <Widget>[
              Text("Can be", style: WithPages.style),
              Text("Used for", style: WithPages.style),
              Text("Onboarding Design", style: WithPages.style),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.pink,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset('assets/1.png', fit: BoxFit.cover),
          Padding(
            padding: const EdgeInsets.symmetric(horizontal: 70.0),
            child: ExampleSlider(),
          ),
          Column(
            children: <Widget>[
              Text("Example", style: WithPages.style),
              Text("of a page", style: WithPages.style),
              Text("with Gesture", style: WithPages.style),
            ],
          ),
        ],
      ),
    ),
    Container(
      color: Colors.red,
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        mainAxisSize: MainAxisSize.max,
        mainAxisAlignment: MainAxisAlignment.spaceEvenly,
        children: <Widget>[
          Image.asset('assets/1.png', fit: BoxFit.cover),
          Padding(padding: EdgeInsets.all(24.0)),
          Column(
            children: <Widget>[
              Text("Do", style: WithPages.style),
              Text("Try it", style: WithPages.style),
              Text("Thank You", style: WithPages.style),
            ],
          ),
        ],
      ),
    ),
  ];

  @override
  void initState() {
    liquidController = LiquidController();
    super.initState();
  }

  Widget _buildDot(int index) {
    double selectedness = Curves.easeOut.transform(
      max(0.0, 1.0 - ((page) - index).abs()),
    );
    double zoom = 1.0 + (2.0 - 1.0) * selectedness;
    return new Container(
      width: 25.0,
      child: new Center(
        child: new Material(
          color: Colors.white,
          type: MaterialType.circle,
          child: new Container(width: 8.0 * zoom, height: 8.0 * zoom),
        ),
      ),
    );
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Stack(
          children: <Widget>[
            LiquidSwipe(
              pages: pages,
              positionSlideIcon: 0.8,
              fullTransitionValue: 880,
              slideIconWidget: Icon(Icons.arrow_back_ios),
              onPageChangeCallback: pageChangeCallback,
              waveType: WaveType.liquidReveal,
              liquidController: liquidController,
              preferDragFromRevealedArea: true,
              enableSideReveal: true,
              ignoreUserGestureWhileAnimating: true,
              enableLoop: true,
            ),
            Padding(
              padding: EdgeInsets.all(20),
              child: Column(
                children: <Widget>[
                  Expanded(child: SizedBox()),
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: List<Widget>.generate(pages.length, _buildDot),
                  ),
                ],
              ),
            ),
            Align(
              alignment: Alignment.bottomRight,
              child: Padding(
                padding: const EdgeInsets.all(25.0),
                child: TextButton(
                  onPressed: () {
                    liquidController.animateToPage(
                      page: pages.length - 1,
                      duration: 700,
                    );
                  },
                  child: Text("Skip to End"),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.white.withOpacity(0.01),
                    foregroundColor: Colors.black,
                  ),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomLeft,
              child: Padding(
                padding: const EdgeInsets.all(25.0),
                child: TextButton(
                  onPressed: () {
                    liquidController.jumpToPage(
                      page:
                          liquidController.currentPage + 1 > pages.length - 1
                              ? 0
                              : liquidController.currentPage + 1,
                    );
                  },
                  child: Text("Next"),
                  style: TextButton.styleFrom(
                    backgroundColor: Colors.white.withOpacity(0.01),
                    foregroundColor: Colors.black,
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  pageChangeCallback(int lpage) {
    setState(() {
      page = lpage;
    });
  }
}

class ExampleSlider extends StatefulWidget {
  const ExampleSlider({Key? key}) : super(key: key);

  @override
  State<ExampleSlider> createState() => _ExampleSliderState();
}

class _ExampleSliderState extends State<ExampleSlider> {
  double sliderVal = 0;

  @override
  Widget build(BuildContext context) {
    return Slider(
      value: sliderVal,
      activeColor: Colors.white,
      inactiveColor: Colors.red,
      onChanged: (val) {
        setState(() {
          sliderVal = val;
        });
      },
    );
  }
}