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:

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.