Flutter Onboarding Screen – Flutter Liquid Swipe

by | Sep 5, 2022 | Flutter, Flutter Login App, Flutter UI / UX, UI UX | 0 comments

In this flutter tutorial, we will create Flutter Onboarding Screen using Flutter Liquid Swipe animation. The onboarding screen is a list of pages we use to explain the basics of an app. It only appears for the first time. So, to create an onboarding screen in Flutter, we will follow the steps below.

  1. Design the Flutter Onboarding UI with the help of Flutter Liquid Swipe and Smooth Page Indicator Packages.
  2. Add Logic using Flutter Stateful widgets
  3. Separate Logic and Design using GetX State Management.

Worthwhile Links

This is the tutorial of our Flutter Login App Series.

Watch Youtube tutorial

 

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

@override
Widget build(BuildContext context) {
final obController = OnBoardingController();
return Scaffold(
body: Stack(
alignment: Alignment.center,
children: [
LiquidSwipe(
pages: obController.pages,
enableSideReveal: true,
liquidController: obController.controller,
onPageChangeCallback: obController.onPageChangedCallback,
slideIconWidget: const Icon(Icons.arrow_back_ios),
waveType: WaveType.circularReveal,
),
Positioned(
bottom: 60.0,
child: OutlinedButton(
onPressed: () => obController.animateToNextSlide(),
style: ElevatedButton.styleFrom(
side: const BorderSide(color: Colors.black26),
shape: const CircleBorder(),
padding: const EdgeInsets.all(20),
onPrimary: Colors.white,
),
child: Container(
padding: const EdgeInsets.all(20.0),
decoration: const BoxDecoration(
color: tDarkColor, shape: BoxShape.circle),
child: const Icon(Icons.arrow_forward_ios),
),
),
),
Positioned(
top: 50,
right: 20,
child: TextButton(
onPressed: () => obController.skip(),
child: const Text("Skip", style: TextStyle(color: Colors.grey)),
),
),
Obx(
() => Positioned(
bottom: 10,
child: AnimatedSmoothIndicator(
count: 3,
activeIndex: obController.currentPage.value,
effect: const ExpandingDotsEffect(
activeDotColor: Color(0xff272727),
),
),
),
),
],
),
);
}

}

class OnBoardingController extends GetxController{

final controller = LiquidController();
RxInt currentPage = 0.obs;

final pages = [
OnBoardingPageWidget(
model: OnBoardingModel(
image: tOnBoardingImage1,
title: tOnBoardingTitle1,
subTitle: tOnBoardingSubTitle1,
counterText: tOnBoardingCounter1,
bgColor: tOnBoardingPage1Color,
),
),
OnBoardingPageWidget(
model: OnBoardingModel(
image: tOnBoardingImage2,
title: tOnBoardingTitle2,
subTitle: tOnBoardingSubTitle2,
counterText: tOnBoardingCounter2,
bgColor: tOnBoardingPage2Color,
),
),
OnBoardingPageWidget(
model: OnBoardingModel(
image: tOnBoardingImage3,
title: tOnBoardingTitle3,
subTitle: tOnBoardingSubTitle3,
counterText: tOnBoardingCounter3,
bgColor: tOnBoardingPage3Color,
),
),
];

skip() => controller.jumpToPage(page: 2);
animateToNextSlide() {
int nextPage = controller.currentPage + 1;
controller.animateToPage(page: nextPage);
}
onPageChangedCallback(int activePageIndex) => currentPage.value = activePageIndex;
}

class OnBoardingPageWidget extends StatelessWidget {
const OnBoardingPageWidget({
Key? key,
required this.model,
}) : super(key: key);

final OnBoardingModel model;

@override
Widget build(BuildContext context) {
final size = MediaQuery.of(context).size;
return Container(
padding: const EdgeInsets.all(tDefaultSize),
color: model.bgColor,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Image(
image: AssetImage(model.image),
height: size.height * 0.45,
),
Column(
children: [
Text(
model.title,
style: Theme.of(context).textTheme.headline3,
),
Text(
model.subTitle,
textAlign: TextAlign.center,
),
],
),
Text(
model.counterText,
style: Theme.of(context).textTheme.headline6,
),
const SizedBox(
height: 80.0,
)
],
),
);
}
}

CODING with T

🚀 Supercharge your Flutter skills! Subscribe to my YouTube channel now for mind-blowing coding insights, expert tips, and exclusive content. Don’t miss out!

COURSES

Flutter E Commerce App Modern and latest
Flutter Login App UI Source Code - Flutter Complete App - Flutter App Design - Flutter App 2023 - Complete Flutter App 2023
Learn flutter from scratch in 4 hours - Flutter Crash Course - Coding with T

Latest Tutorial

How to create a Custom Appbar in flutter. Custom Appbar Design. Flutter App Design
How to create a Custom Shape in Flutter. Flutter E Commerce app Design. Ecommerce app design Flutter. Flutter clippath tutorial
Bottom Navigation bar in Flutter. Flutter Material 3 bottom navigation bar. How to design background color of Flutter bottom navigation bar. Flutter ecommerce app design