Make an onboarding Liquid Swipe Effect In Flutter

In this tutorial, I'm going to show you how to Make a cool onboarding page with a cool liquid swipe effect using Flutter, so without further ado let's start. for this course, we are not going to focus on the UI of the app, but we will focus on how to implement the liquid swipe effect, and how to create the screen for each slide. the final result will look like this

Okay, first let's start by adding the dependencies for this tutorial, we are going to use the the " gooey_carousel " packages

visit this link:  gooey_carousel package

inside the pubspec.yaml file add this dependency

gooey_carousel: ^0.1.2

now create a simple stateful widget with a scaffold and add the gooey carousel widget inside the body of the Scaffold

return Scaffold(

      body: GooeyCarousel(

        children: [

          boardPage("assets/page1.png", "Create your own notes", Colors.green),

          boardPage(

              "assets/page2.png", "Share your notes with friends", Colors.blue),

          boardPage(

              "assets/page3.png",

              "Protect your data with our authentication system",

              Colors.purple[200]),

        ],

      ),

    );

now create a new file called boardpage, in which we will create a our custom widget boardPage().

for the images assets, I added a folder called assets and add 3 images inside it

boardpage.dart

import 'package:flutter/material.dart';

Widget boardPage(String imgUrl, String description, Color color) {

  return Container(

    color: color,

    child: Padding(

      padding: const EdgeInsets.symmetric(horizontal: 24.0),

      child: Column(

        mainAxisAlignment: MainAxisAlignment.center,

        crossAxisAlignment: CrossAxisAlignment.center,

        children: [

          Image.asset(imgUrl),

          Text(

            description,

            textAlign: TextAlign.center,

            style: TextStyle(

              fontSize: 35.0,

              color: Colors.white,

            ),

          ),

        ],

      ),

    ),

  );

}

and that's it.

this is the full code of the main.dart file

import 'package:flutter/material.dart';

import 'package:gooey_carousel/gooey_carrousel.dart';

import 'package:liquid_swipe/boardpage.dart';

void main() {

  runApp(MaterialApp(

    debugShowCheckedModeBanner: false,

    home: MyApp(),

  ));

}

class MyApp extends StatefulWidget {

  @override

  _MyAppState createState() => _MyAppState();

}

class _MyAppState extends State<MyApp> {

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      body: GooeyCarousel(

        children: [

          boardPage("assets/page1.png", "Create your own notes", Colors.green),

          boardPage(

              "assets/page2.png", "Share your notes with friends", Colors.blue),

          boardPage(

              "assets/page3.png",

              "Protect your data with our authentication system",

              Colors.purple[200]),

        ],

      ),

    );

  }

}