flutter_fa_form_builder 0.9.2

An advanced UI wrapper extension package for Flutter FormBuilder components and tailored custom form controls, specifically optimized for the FlutterArtist ecosystem layouts.

example/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_fa_form_builder/flutter_fa_form_builder.dart';
import 'package:flutter_form_builder/flutter_form_builder.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        colorScheme: ColorScheme.fromSeed(seedColor: Colors.deepPurple),
        useMaterial3: true,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({super.key});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
        title: const Text("All Custom Fields"),
      ),
      body: SingleChildScrollView(
        child: Padding(
          padding: const EdgeInsets.all(10),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              const SizedBox(height: 20),
              _buildRowSimpleTextField(),
              const SizedBox(height: 20),
              _buildRowSimpleNumberTextField(),
              const SizedBox(height: 20),
              _buildRowSimpleDropdown(),
              const SizedBox(height: 20),
              _buildRowSimpleGroupedDropdown(),
              const SizedBox(height: 20),
              _buildRowSimpleMultiDropdown(),
              const SizedBox(height: 20),
              _buildRowSimpleCheckbox(),
              //
              //
              const SizedBox(height: 20),
              _buildRowSimpleSwitch(),
              //
              const SizedBox(height: 20),
              _buildRowSimpleSwitchNoDecoration(),
              const SizedBox(height: 20),
              _buildRowSimpleCheckboxGroup(),
              const SizedBox(height: 20),
              _buildRowSimpleRadioGroup(),
              const SizedBox(height: 20),
              _buildRowFormBuilderFilterChip(),
              const SizedBox(height: 20),
              _buildFormBuilderDateTimePicker(),
            ],
          ),
        ),
      ),
    );
  }

  Widget _buildInfo(String info) {
    return Text(info, style: const TextStyle(color: Colors.blue));
  }

  Widget _buildFormBuilderDateTimePicker() {
    return _buildBox(
      info: "SimpleDateTimePicker():",
      fieldWithHint: const FaFormBuilderDateTimePicker.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "DateTimePicker",
        initialValue: null,
      ),
      fieldWithValue: FaFormBuilderDateTimePicker.topLabel(
        name: 'name2',
        labelText: "DateTimePicker",
        initialValue: DateTime.now(),
      ),
    );
  }

  Widget _buildRowFormBuilderFilterChip() {
    return _buildBox(
      info: "SimpleFilterChip():",
      fieldWithHint: const FaFormBuilderFilterChips<String>.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "FilterChip",
        initialValue: null,
        options: [
          FormBuilderChipOption(value: 'Option 1', child: Text("Option 1")),
          FormBuilderChipOption(value: 'Option 2', child: Text("Option 2")),
        ],
      ),
      fieldWithValue: const FaFormBuilderFilterChips<String>.topLabel(
        name: 'name2',
        labelText: "FilterChip",
        initialValue: ['Option 1'],
        options: [
          FormBuilderChipOption(value: 'Option 1', child: Text("Option 1")),
          FormBuilderChipOption(value: 'Option 2', child: Text("Option 2")),
        ],
      ),
    );
  }

  Widget _buildRowSimpleCheckboxGroup() {
    return _buildBox(
      info: "SimpleCheckboxGroup():",
      fieldWithHint: FaFormBuilderCheckboxGroup<String>.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "CheckboxGroup",
        initialValue: null,
        options: const ['Option 1', 'Option 2'],
        getItemText: (String item) {
          return item;
        },
      ),
      fieldWithValue: FaFormBuilderCheckboxGroup<String>.topLabel(
        name: 'name2',
        labelText: "CheckboxGroup",
        options: const ['Option 1', 'Option 2'],
        getItemText: (String item) {
          return item;
        },
      ),
    );
  }

  Widget _buildRowSimpleRadioGroup() {
    return _buildBox(
      info: "SimpleRadioGroup():",
      fieldWithHint: FaFormBuilderRadioGroup<String>.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "RadioGroup",
        initialValue: null,
        options: const ['Option 1', 'Option 2'],
        getItemText: (String item) {
          return item;
        },
      ),
      fieldWithValue: FaFormBuilderRadioGroup<String>.topLabel(
        name: 'name2',
        labelText: "RadioGroup",
        options: const ['Option 1', 'Option 2'],
        getItemText: (String item) {
          return item;
        },
      ),
    );
  }

  Widget _buildRowSimpleSwitch() {
    return _buildBox(
      info: "SimpleSwitch():",
      fieldWithHint: const FaFormBuilderScalableSwitch.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "Switch",
        title: Text("Title"),
        initialValue: null,
      ),
      fieldWithValue: const FaFormBuilderScalableSwitch.topLabel(
        name: 'name2',
        title: Text("Title"),
        labelText: "Switch",
        initialValue: true,
      ),
    );
  }

  Widget _buildRowSimpleSwitchNoDecoration() {
    return _buildBox(
      info: "SimpleSwitch.withoutDecoration():",
      fieldWithHint: const FaFormBuilderScalableSwitch.withoutDecoration(
        name: 'name1',
        title: Text("Title"),
        initialValue: null,
      ),
      fieldWithValue: const FaFormBuilderScalableSwitch.withoutDecoration(
        name: 'name2',
        title: Text("Title"),
        initialValue: true,
      ),
    );
  }

  Widget _buildRowSimpleCheckbox() {
    return _buildBox(
      info: "SimpleCheckbox():",
      fieldWithHint: const FaFormBuilderCheckbox.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "Checkbox",
        title: Text("Title"),
        initialValue: null,
      ),
      fieldWithValue: const FaFormBuilderCheckbox.topLabel(
        name: 'name2',
        title: Text("Title"),
        labelText: "Checkbox",
        initialValue: true,
      ),
    );
  }

  Widget _buildRowSimpleDropdown() {
    return _buildBox(
      info: "SimpleDropdown():",
      fieldWithHint: FaFormBuilderDropdown<String>.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "Dropdown",
        items: const [],
        getItemText: (String item) {
          return item;
        },
      ),
      fieldWithValue: FaFormBuilderDropdown<String>.topLabel(
        name: 'name2',
        labelText: "Dropdown",
        initialValue: "Test",
        getItemText: (String item) {
          return item;
        },
        items: const ["Test", "Test 2"],
      ),
    );
  }

  Widget _buildRowSimpleGroupedDropdown() {
    return _buildBox(
      info: "SimpleGroupedDropdown():",
      fieldWithHint: FaFormBuilderGroupedDropdown<String>.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "GroupedDropdown",
        // emptyItem: "",
        groups: const [],
        getItemText: (String item) {
          return item;
        },
      ),
      fieldWithValue: FaFormBuilderGroupedDropdown<String>.topLabel(
        name: 'name2',
        labelText: "GroupedDropdown",
        initialValue: "Item 1.1",
        getItemText: (String item) {
          return item;
        },
        // emptyItem: "",
        groups: [
          CustomDropdownMenuGroup(
            title: 'Group 1',
            items: ["Item 1.1", "Item 1.2"],
          ),
          CustomDropdownMenuGroup(
            title: 'Group 2',
            items: ["Item 2.1", "Item 2.2"],
          ),
        ],
      ),
    );
  }

  Widget _buildRowSimpleMultiDropdown() {
    return _buildBox(
      info: "SimpleMultiDropdown():",
      fieldWithHint: FaFormBuilderMultiDropdown<String>.topLabel(
        name: 'name1',
        hintText: 'Hint Text',
        labelText: "MultiDropdown",
        dropdownTitle: 'Dropdown Title',
        items: const [],
        getItemText: (String item) {
          return item;
        },
      ),
      fieldWithValue: FaFormBuilderMultiDropdown<String>.topLabel(
        name: 'name2',
        labelText: "MultiDropdown",
        dropdownTitle: 'Dropdown Title',
        getItemText: (String item) {
          return item;
        },
        items: const [
          "This is Option 1",
          "This is very very very very long Option 2",
          "This is Option 3",
          "This is  very very very very long Option 4",
          "This is Option 5",
          "This is Option 6",
          "This is Option 7",
          "This is Option 8",
        ],
      ),
    );
  }

  Widget _buildRowSimpleNumberTextField() {
    return _buildBox(
      info: "SimpleNumberTextField():",
      fieldWithHint: const FaFormBuilderNumberTextField.topLabel(
        name: '_test',
        hintText: 'Hint Text',
        labelText: "NumberTextField",
      ),
      fieldWithValue: const FaFormBuilderNumberTextField.topLabel(
        name: '_test',
        hintText: 'Hint Text',
        labelText: "NumberTextField",
        initialValue: 1234567,
      ),
    );
  }

  Widget _buildRowSimpleTextField() {
    return _buildBox(
      info: "SimpleTextField():",
      fieldWithHint: const FaFormBuilderTextField.topLabel(
        name: '_test',
        hintText: 'Hint Text',
        labelText: "TextField",
      ),
      fieldWithValue: FaFormBuilderTextField.topLabel(
        name: '_test',
        hintText: 'Hint Text',
        labelText: "TextField",
        initialValue: "This is a Text",
      ),
    );
  }

  Widget _buildBox({
    required String info,
    required Widget fieldWithHint,
    required Widget fieldWithValue,
  }) {
    return Container(
      padding: const EdgeInsets.all(10),
      decoration: BoxDecoration(
        color: Colors.indigo.withAlpha(20),
        borderRadius: BorderRadius.circular(4),
        border: Border.all(color: Colors.indigo.withAlpha(30)),
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          _buildInfo(info),
          const SizedBox(height: 10),
          Row(
            crossAxisAlignment: CrossAxisAlignment.end,
            children: [
              const Expanded(child: FaFormBuilderTextField(name: '_test')),
              const SizedBox(width: 10),
              Expanded(child: fieldWithHint),
              const SizedBox(width: 10),
              Expanded(child: fieldWithValue),
            ],
          ),
        ],
      ),
    );
  }
}