Create Signup Form in Flutter with form_maker

Flutter Package form_maker

orm_maker | Flutter Package

Signup Page UI in Flutter

using Form Maker ( https://pub.dev/packages/form_maker )

It’s a good practice to authenticate users before giving access to websites, mobile apps, and computer applications to prevent unauthorized access to personal information.

In this article, I am going to explain how to build a Signup page user interface. I have used the Form Maker package, for user input as username and password. ElevatedButton widget, to show action. Also, I have used Flutterlogo() to set the logo for the Signup page.

So let’s start,

To begin, we’ll be using the Form Maker Flutter package to create a simple signup page. Assuming you’ve already set up a Flutter project, let’s create a new file named signup_screen.dart in the views folder.

→ lib >> views >> signup_screen.dart

Next, we’ll create a stateless widget within the signup_screen.dart file and name it SignupScreen.

import 'package:flutter/material.dart';

class SignupScreen extends StatelessWidget {
  const SignupScreen({super.key});
  @override
  Widget build(BuildContext context) {
    return const Placeholder();
  }
}

Now, let’s navigate the app from main.dart to our SignupScreen.

import 'package:flutter/material.dart';
import 'package:text_app/views/signup_screen.dart';

void main() {
  runApp(const MyApp());
}
class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Signup Page',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const SignupScreen(),
    );
  }
}

It’s time to utilize the Flutter package “Form Maker” that we discussed at the beginning of this session. To install the package, navigate to the → Form Maker ← website and add it to the dependencies section of your pubspec.yaml file.

dependencies:
  # // ...
  form_maker: ^0.0.2

Alternatively, you can run a command in your root directory to install the package.

flutter pub add form_maker

After adding the Form Maker package to your pubspec.yaml file, run the command flutter pub get in your terminal to install the dependency.

flutter pub get

Next, we’ll return to our signup_screen.dart and add some essential code to style our page initial view.

// replace const Placeholder() with necessary design you want I will
// create a red box with with a logo of flutter and Signup Screen text

return Scaffold(
  backgroundColor: const Color.fromARGB(255, 133, 161, 184),
  body: Container(
    margin: const EdgeInsets.symmetric(horizontal: 20, vertical: 120),
    width: MediaQuery.of(context).size.width,
    decoration: const BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.all(Radius.circular(10)),
    ),
    padding: const EdgeInsets.all(10),
    child: Column(
      children: [
        const SizedBox(height: 20),
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            FlutterLogo(size: 40),
            Text(
              "Signup Screen",
              style: TextStyle(
                fontSize: 30,
                fontWeight: FontWeight.bold,
                color: Colors.blue,
              ),
            ),
          ],
        ),
        const SizedBox(height: 20),
      ],
    ),
  ),
);

Here’s what our page looks like after adding the necessary code for styling in the signup_screen.dart file.

Let’s import the Form Maker package in our signup_screen.dart page.

import 'package:form_maker/form_maker.dart';

Now, underneath the final SizedBox, we can start adding some magic. To make our text fields, we’ll be using the FormElement from the form_maker package.

// add Form Element for whichever field you need
// For Example: 
// For Name
FormElement.name(),
const SizedBox(height: 20),
// FOrm Email
FormElement.email(),
const SizedBox(height: 20),
// For Password
FormElement.password(),
const SizedBox(height: 20),
// Confirm Password
FormElement.confirmPassword(),

Our view now appears as shown in the following image:

Let’s now add a button to our form.

ElevatedButton(
  onPressed: () {},
  style: ElevatedButton.styleFrom(
    backgroundColor: Colors.blue,
    padding: const EdgeInsets.symmetric(
      horizontal: 50,
      vertical: 15,
    ),
  ),
  child: const Text(
    "Signup",
    style: TextStyle(
      color: Colors.white,
      fontSize: 20,
    ),
  ),
),

Congratulations, you have completed creating the basic UI for the signup page using the Form Maker package. Now, you can add your desired functionality to the page and proceed with your project.

If you find my work useful and interesting, please consider giving it a thumbs up. And if you encounter any issues, feel free to let me know. I’m always open to feedback and suggestions to improve my work.

Hope you all like it #peace ✌