60 Days of Flutter : Day 9–11 : Creating Awesome Register Screen in Flutter

6 min readAug 23, 2019

In today’s post we’re going to build a Register Screen. We’re also going to use Gradients and Animations to make it look a lil funky. Before we start, let’s take a look at what we’re going to build.

Looks pretty clean. Let’s get started.

Structure

What we have is two pages. First page has the App Logo with a Google Sign In Button. The second page has the inputs for user’s profile picture, age and username. We also have a PageIndicator at the bottom.

First Page

The first page contains the app icon, the name and a Google Sign In button. Pretty minimal. Clicking the Google Sign In button , for now will take the user to the second page where he has to fill out his profile details. We’ll implement Google Auth here in future parts of the series.

Second Page

The second page is where things get interesting. Let’s start with the code first.

We’re using a Column at the top level and nesting all the widgets and rows inside it. The crossAxisAlignment is set to CrossAxisAlignment.center , so that all its children are centered horizontally.

For the age field we’re going to use NumberPicker. At the time of writing this article, the package does not have option to supply custom styles for text. I have raised an issue for that. For the time being and for this series we’ll fork the code from the above package and change the TextStyle to our need.

The username field uses a InputDecoration. The code for it is pretty self explanatory.

The Gradient Background

In case if you haven’t noticed already we have a subtle gradient background which shifts based on the scroll of the PageView .

The gradient is done by creating a BoxDecoration with LinearGradient and varying the start and end alignments for the gradient based on the scroll of the PageView. We do this by adding a listener to our PageView’s PageController .

BoxDecoration(
    gradient: LinearGradient(begin: begin, end: end, colors: [
  Palette.gradientStartColor,
  Palette.gradientEndColor
]))pageController.addListener(() {
  setState(() {
    begin = Alignment(pageController.page, pageController.page);
    end = Alignment(1 - pageController.page, 1 - pageController.page);
  });
});

The Circular Page Indicator

The CircularIndicator is basically an AnimatedContainer which changes it’s size and color based on whether it’s active or not. We have two of them for each page and we use the comparison with currentPage variable to determine which one is active.

The Issues

Before you go ahead and say

“Alright, all these stuff sound too easy, What did you waste your 3 days in?”

I have an explanation.

I was stuck with this weird issue of the username TextField not getting pushed up when the on-screen keyboard is displayed. This is a behavior which I, as a android developer was used to of seeing by default. Unfortunately in Flutter it doesn’t. I tried a few different things, but none of them seemed to work with a PageView.

So I ended up using a solution which reduces the space between the widgets above the TextField when the keyboard is shown and goes back to the original position when the keyboard is dismissed. Check the above linked answer or the Code Changes section to understand how I did it.

We need to disable the swipe gestures in the PageView. I used NeverScrollableScrollPhysics to do that. We also need to make sure that when the user presses back, the app goes to the first page. This can be achieved using WillPopScope .

Future<bool> onWillPop() {
  if (currentPage == 1) {
    //go to first page if currently on second page
    pageController.previousPage(
      duration: Duration(milliseconds: 300),
      curve: Curves.easeOut,
    );
    return Future.value(false);
  }
  return Future.value(true);
}

The Final Result

After doing all this, our RegisterPage looks something like this.

And the final result.

Code Changes

#11 Register UI

How Can You Contribute?

Open issues with suggestion of better approaches or ideas for the app.
Connect with me on Twitter or Linkedin or Instagram.
Star the Github repository.
Share the series on Twitter.
Follow me on Github.

Posts In This Series

Show Your Support

Press the clap button below if you liked reading this post. The more you clap the more it motivates me to write better!