Flutter Easy Multi-Step Form

A Flutter package designed to streamline the creation of multi-step forms with built-in validation, customizable UI components, and seamless navigation.

---

Features

✅ Simple and intuitive multi-step form implementation
✅ Integrated form validation for a seamless user experience
✅ Fully customizable UI components
✅ Step-by-step navigation with real-time progress tracking

---

Installation

Add the package to your pubspec.yaml file:

dependencies:
  flutter_easy_multi_step_form: ^1.0.5

Run the following command to install the package:

flutter pub get

---

Usage

import 'package:flutter_easy_multi_step_form/flutter_easy_multi_step_form.dart';

final form = MultiStepFormWidget(
  // Required callback
  onSubmit: () {
    if (_formKey.currentState!.validate()) {
      print('Form submitted successfully');
    }
  },
  
  // Define form steps
  steps: [
    // Step 1
    FormStep(
      title: 'Personal Information',
      fields: [
        EasyTextFormField(
          controller: firstNameController,
          label: 'First Name',
          validator: (value) => value!.isEmpty ? 'First name is required' : null,
        ),
        TextFormField(
          decoration: InputDecoration(labelText: 'Last Name'),
        ),
      ],
    ),
    
    // Step 2
    FormStep(
      title: 'Contact Details',
      fields: [
        EasyTextFormField(
          controller: emailController,
          label: 'Email',
          validator: (value) => value!.isEmpty ? 'Email is required' : null,
        ),
        TextFormField(
          decoration: InputDecoration(labelText: 'Username'),
        ),
      ],
    ),
  ],
  
  // Customizable button styles
  nextButtonColor: const Color(0xFF2196F3),
  prevButtonColor: const Color(0xFF424242),
  submitButtonColor: const Color(0xFF4CAF50),
  nextButtonTextColor: Colors.white,
  prevButtonTextColor: Colors.white,
  submitButtonTextColor: Colors.white,
  stepIndicatorActiveColor: const Color(0xFF2196F3),
  stepIndicatorDefaultColor: const Color(0xFF757575),
);

---

Live Demo

Light Mode

🔗 Watch Demo

Dark Mode

🔗 Watch Demo

---

Additional Resources

For detailed documentation and more examples, visit our official GitHub Repository.

Stay updated with the latest features and improvements by following our project.

---