Flutter: Toggle View Between UI Login and Register

2 min readFeb 25, 2021

In this first article, I will share a tutorial on how to build a login and register view that can switch quickly and well instead of using navigator. Okay, just get on with it.

Get Started

The purpose of this article is to teach you how to create a toggle button that switches quickly from the login menu to the register menu. Without taking back the entire view on every UI that has been made. So we can switch as much as we want.

Step 1 : Folder Structure

In this case, we don’t need any additional packages. So we won’t change pubspec.yaml. Before getting into step one, I’ll provide a folder structure that I’ll be using. Here is the arrangement:

For constants.dart and size_config.dart are the main files everytime I create a project on flutter. Constants for storing color values and size_config for storing size values on the screen of our phone.

Step 2: Code for Main File

We do it first for the color values. In constants.dart we can enter the following code:

Then for the screen size value. In size_config.dart we enter the following code:

And the last one is the main.dart file. Here is the code:

Step 3: Code For Screen File

In the screen folder there are 3 files, namely auth.dart, register.dart and sign_in.dart. First we create a UI to register and sign in / login first. I’ve also created a nice-looking UI, so we can see the difference using toogle view. Here is the code we’ll use for sign_in.dart:

Then we will create a UI for register.dart. Here is the code:

And the last one is auth.dart. It is in this file that we will create a toggle to move us from the login menu to the register menu as many times as we want without reloading the entire UI in use without creating a stack of files. Here is the code: