Form Creator

A flexible Flutter package for building dynamic surveys and questionnaires with ease. Create interactive forms with various input controls that support both input and display modes.

Features

✨ Rich Control Types

  • Text inputs (short and long)
  • Choice controls (radio buttons and checkboxes)
  • Date and time pickers (single and range selections)
  • File uploads (images and documents)
  • View-only controls (titles and descriptions)

🔄 Dual Modes

  • Input Mode: Interactive forms for data collection
  • Display Mode: Read-only view for showing submitted responses

✅ Built-in Validation

  • Required field validation
  • Custom validators
  • Pattern matching for text inputs
  • File size and type restrictions

🎨 Customizable

  • Custom styles for titles and descriptions
  • Placeholder text support
  • Configurable min/max values
  • Flexible layouts

Usage

Basic Example

import 'package:flutter/material.dart';
import 'package:form_creator/src/text_control/title_control.dart';
import 'package:form_creator/src/text_control/short_text_control.dart';
import 'package:form_creator/src/choice_control/radio_control.dart';
import 'package:form_creator/src/choice_control/choice_option.dart';

class MyForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Survey Form')),
      body: ListView(
        padding: EdgeInsets.all(16),
        children: [
          // Title
          TitleControl(
            id: 'title',
            text: 'Customer Feedback Survey',
          ),

          // Short text input
          ShortTextControl(
            id: 'name',
            title: 'Your Name',
            isRequired: true,
            placeholder: 'Enter your name',
            onChanged: (value) => print('Name: $value'),
          ),

          // Radio buttons
          RadioControl(
            id: 'satisfaction',
            title: 'How satisfied are you?',
            isRequired: true,
            options: [
              ChoiceOption(id: '1', label: 'Very Satisfied', value: '5'),
              ChoiceOption(id: '2', label: 'Satisfied', value: '4'),
              ChoiceOption(id: '3', label: 'Neutral', value: '3'),
              ChoiceOption(id: '4', label: 'Dissatisfied', value: '2'),
              ChoiceOption(id: '5', label: 'Very Dissatisfied', value: '1'),
            ],
            onChanged: (value) => print('Rating: $value'),
          ),
        ],
      ),
    );
  }
}

Display Mode Example

// Switch to display mode to show submitted responses
ShortTextControl(
  id: 'name',
  title: 'Your Name',
  isReadOnly: true,  // Display mode
  value: 'John Doe',
)

Available Controls

View Controls

  • TitleControl: Display form titles
  • DescriptionControl: Show descriptive text

Text Controls

  • ShortTextControl: Single-line text input
  • LongTextControl: Multi-line text input with configurable rows

Choice Controls

  • RadioControl: Single selection from options
  • CheckboxControl: Multiple selections from options
  • ChoiceOption: Model for choice options

DateTime Controls

  • DateControl: Date picker
  • TimeControl: Time picker
  • DateFromToControl: Date range selection
  • TimeFromToControl: Time range selection
  • DateTimeFromToControl: DateTime range selection

File Controls

  • PictureControl: Image file uploads with preview
  • FileUploadControl: Generic file uploads

Control Properties

All controls extend from InputControl and support:

Property Type Description
id String Unique identifier (required)
title String Question or label text (required)
description String? Additional help text
isRequired bool Mark as required field
isReadOnly bool Switch between input/display mode
value dynamic Current value
onChanged Function? Value change callback
validator Function? Custom validation function

Advanced Examples

With Validation

ShortTextControl(
  id: 'email',
  title: 'Email Address',
  isRequired: true,
  keyboardType: TextInputType.emailAddress,
  pattern: RegExp(r'^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$'),
  validator: (value) {
    if (value == null || value.isEmpty) {
      return 'Email is required';
    }
    return null;
  },
)

Checkbox with Multiple Selections

CheckboxControl(
  id: 'interests',
  title: 'Select your interests',
  options: [
    ChoiceOption(id: '1', label: 'Technology'),
    ChoiceOption(id: '2', label: 'Sports'),
    ChoiceOption(id: '3', label: 'Music'),
    ChoiceOption(id: '4', label: 'Travel'),
  ],
  allowOther: true,
  value: ['Technology', 'Music'],
  onChanged: (values) => print('Selected: $values'),
)

File Upload with Restrictions

FileUploadControl(
  id: 'document',
  title: 'Upload Document',
  allowedExtensions: ['pdf', 'doc', 'docx'],
  maxFileSize: 5242880, // 5MB in bytes
  maxFiles: 3,
  isRequired: true,
)

Date Range Picker

DateFromToControl(
  id: 'vacation',
  title: 'Vacation Period',
  minDate: DateTime(2025, 1, 1),
  maxDate: DateTime(2025, 12, 31),
  value: DateTimeRange(
    start: DateTime(2025, 7, 1),
    end: DateTime(2025, 7, 15),
  ),
)

Dependencies

This package requires:

  • intl: For date formatting
  • file_picker: For file selection

Additional information

Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Issues

If you encounter any issues, please file them on the GitHub repository.

License

This project is licensed under the MIT License - see the LICENSE file for details.

Libraries

form_creator