Building a decentralized app with 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.

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>. Slide object need 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.

List<String> imagePath = [

"assets/wallet.flr",

"assets/world.flr",

"assets/rocket.flr",

];

List<String> animation = [

"billetera cargada",

"Notifications",

"rocket",

];

Just in case, depending on your app organization you will may want to add the flare animation inside of a container so you can configure the width and the height of the animation.

Container(

height: 400,

width: 600,

child: FlareActor(

imagePath[widget.index],

fit: BoxFit.fill,

alignment: Alignment.center,

animation: animation[widget.index],

),

),

At the end of the intro slider you will have a button that you can program it to do anything. Inside the widget you will need to configure the button because its only visual in the widget and it doesnt do anything. So the best way to make a visual object interactive is to make an InkWell.

An InkWell will turn any design into some action, like this:

return Container(

height: MediaQuery.of(context).size.height,

width: 100,

color: Colors.black,

child: Stack(

children: <Widget>[

InkWell(

onTap: (){

},

child: Stack(

children: <Widget>[

Positioned(

top: 16,

left: 12,

child: Text(

"LET'S GO!",

style: TextStyle(color: Colors.white),

))

],

),

),

],

),

);

You will add your function inside :

onTap: ()

and THATS IT !