Building a decentralized app with Flutter | Creating a Register page in Flutter

We are going to focus on coding the full sign up process which includes a sign-up form and an intro slider to explain what the app does.

So before we start I’m going to leave down below what we are building

So we are combining the best feature of flutter like flare and create this awesome new signup form. It's low weighted, fast to interact, and very attractive.

For the signup form, I created 4 parameters that are username, email, password, and confirm password. I’ve also c created some rules before the user can continue just in case the username already exists, email is taken, the password doesn't match.

BUT before I continuo and you are just bored or reading you can watch the full video down below

For the intro slider, there is an incredible widget you can use for your flutter app.

https://pub.dev/packages/intro_slider

Step 1: Add this line to your pubspec.yaml
dependencies:

 flutter:
 sdk: flutter
 intro_slider: [latest_version]

Remember always install the latest version for the best support, for this build I am using the following version intro_slider 2.2.9.

Then click Packages get at top right IDE or type flutter packages get in terminal to get the new plugin.

Step 2: Import this line at where you want to use this widget

import 'package:intro_slider/intro_slider.dart';

Step 3: Layout of the screen

At build function, just need to return IntroSlider widget is enough.
It requires only List. Slide object needs some attributes like this:

title: title of current tab

description: description to describe your app feature

pathImage: the path to your local images

backgroundColor: the background color for current tab, it should be type int, like Color(0xfff5a456)

Then pass list slide object to IntroSlider widget.

For more custom, please check out README file.

Once you are finish you have built something incredible. If you want to include your flare animations to this intro slider you only need to create an array that includes the names of the animations and instead of showing the image change it to the following

FlareActor(

  imagePath[widget.index],
  fit: BoxFit.fill,
  alignment: Alignment.center,
  animation: animation[widget.index],


),

My array is call imagePath[], and the animation[] array includes all the names of my flare animations so when you change screen it will animate the other animation.