flutterx_forms 1.3.9

flutterx_forms: ^1.3.9 copied to clipboard

example/lib/main.dart

import 'package:cross_file/cross_file.dart';
import 'package:flutter/material.dart' hide DialogRoute;
import 'package:flutterx_application/flutterx_application.dart';
import 'package:flutterx_application/flutterx_ui.dart';
import 'package:flutterx_forms/flutterx_forms.dart';

class Labels extends LabelInterface {
  const Labels() : super(locale: const Locale('it', 'IT'));
}

void main() => runApplication(
    name: 'Flutterx Forms Demo',
    initialize: (context) => FormsExample.route,
    locale: () => LocaleData(labels: {const Labels()}, onLabel: (_) {}),
    routes: {FormsExample.route},
    theme: ThemeData(primarySwatch: Colors.green).copyWith(
        outlinedButtonTheme: OutlinedButtonThemeData(
            style: OutlinedButton.styleFrom(
                iconSize: 20, shape: const RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(4))))),
        inputDecorationTheme: InputDecorationTheme(
            border: const OutlineInputBorder(borderRadius: BorderRadius.all(Radius.circular(8))),
            focusedBorder: OutlineInputBorder(
                borderRadius: const BorderRadius.all(Radius.circular(12)),
                borderSide: BorderSide(color: Colors.deepPurple.shade400, width: 3)))));

class FormsExample extends StatefulWidget {
  static final ActivityRoute<void> route =
      ActivityRoute(location: '/index', builder: (context, args) => const FormsExample._());

  const FormsExample._();

  @override
  State<FormsExample> createState() => _FormsExampleState();
}

class _FormsExampleState extends State<FormsExample> with FormController {
  late final XFormField<String> _name = field();
  late final XFormField<String> _surname = field();
  late final XFormField<int?> _age = field();
  late final XFormField<double?> _x = field();
  late final XFormField<XFile> _id = field();
  late final XFormField<List<SampleOption>> _sampleOptions = field();
  late final XFormField<List<String>> _tags = field();
  late final XFormField<DateTime?> _date = field();
  late final XFormField<TimeOfDay?> _time = field();
  bool _densify = false;

  @override
  Widget build(BuildContext context) => Scaffold(
      appBar: AppBar(title: const Text('Forms example')),
      body: ResponsiveScreenContent(
          child: Card(
              child: SingleChildScrollView(
                  padding: const EdgeInsets.all(m12),
                  child: buildForm(children: [
                    ElevatedButton(
                        onPressed: () => setState(() => _densify = !_densify), child: Text('Densify: $_densify')),
                    const SizedBox(height: m24),
                    SizedBox.square(
                        dimension: 92,
                        child: CustomContentInputDecorator(
                            backgroundColor: Theme.of(context).colorScheme.surfaceContainerLow,
                            decoration: InputDecoration(labelText: 'Picture', isDense: _densify),
                            child:
                                SizedBox.expand(child: InkWell(onTap: () {}, child: const Icon(Icons.add, size: 32))))),
                    const SizedBox(height: m12),
                    XTextFormField(
                        field: _name,
                        validator: nonEmpty(() => 'Field should not be empty'),
                        textInputAction: TextInputAction.next,
                        initialValue: 'Paolo',
                        keyboardType: TextInputType.text,
                        textCapitalization: TextCapitalization.words,
                        style: const TextStyle(fontSize: 16),
                        decoration: InputDecoration(isDense: _densify, labelText: 'Nome', hintText: 'Giuseppe')),
                    const SizedBox(height: m12),
                    XTextFormField(
                        field: _surname,
                        initialValue: 'Bitta',
                        validator: nonEmpty(() => 'Field should not be empty'),
                        textInputAction: TextInputAction.done,
                        keyboardType: TextInputType.text,
                        textCapitalization: TextCapitalization.words,
                        style: const TextStyle(fontSize: 16),
                        decoration: InputDecoration(isDense: _densify, labelText: 'Surname', hintText: 'Simone')),
                    const SizedBox(height: m12),
                    XIntFormField(
                        field: _age,
                        initialValue: 34,
                        validator: validateFirst([
                          nonNull(() => 'Field should not be null'),
                          gte(18, () => 'Field must ve >=18'),
                        ]),
                        textInputAction: TextInputAction.next,
                        decoration: InputDecoration(isDense: _densify, labelText: 'Età', hintText: '18')),
                    const SizedBox(height: m12),
                    XDoubleFormField(
                        field: _x,
                        min: -2.24,
                        max: 56,
                        initialValue: 56,
                        validator: validateFirst([
                          nonNull(() => 'Field should not be null'),
                          gte(3, () => 'Field must ve >=3'),
                        ]),
                        textInputAction: TextInputAction.done,
                        arrows: const NumberFieldArrows(step: .5),
                        decoration: InputDecoration(isDense: _densify, labelText: 'xyz', hintText: '0.4')),
                    const SizedBox(height: m12),
                    XSetFormField<SampleOption>(
                        field: _sampleOptions,
                        items: SampleOption.values,
                        decoration: const InputDecoration(labelText: 'Options'),
                        initialValue: const {SampleOption.option2},
                        validator: (value) => (value?.length ?? 0) < 2 ? 'Min 2 elements' : null,
                        itemInitialValue: (items, _) => items.first,
                        itemBuilder: (state, field, initialValue, index, items) => XDropdownMenuFormField<SampleOption>(
                            field: field,
                            items: items,
                            initialValue: initialValue,
                            decoration: InputDecoration(
                                labelText: 'Options ${index + 1}', suffixIcon: const Icon(Icons.arrow_drop_down)),
                            validator: (item) {
                              final expected = SampleOption.values[index];
                              return item == expected ? null : 'Option $expected is only valid answer';
                            },
                            menuEntryBuilder: menuEntryByLabel((item) => item.name))),
                    const SizedBox(height: m12),
                    XTextListFormField(
                        field: _tags,
                        decoration: InputDecoration(isDense: _densify, labelText: 'Tags'),
                        validator: listUnique(() => 'Contains duplicate')),
                    const SizedBox(height: m12),
                    XDateTimeFormField(
                        field: _date,
                        initialValue: DateTime.now(),
                        selectableDayPredicate: (date) => date.day.isEven,
                        decoration: InputDecoration(isDense: _densify, labelText: 'Date'),
                        validator: validateFirst([
                          nonNull(() => 'Date required'),
                          (date) => date!.day % 5 == 0 ? null : 'Must be multiple of 5'
                        ])),
                    const SizedBox(height: m12),
                    XTimeFormField(
                        field: _time,
                        decoration: InputDecoration(isDense: _densify, labelText: 'Hour'),
                        validator: validateFirst([
                          nonNull(() => 'Hour required'),
                        ])),
                    const SizedBox(height: m12),
                    // FileUploadFormField(
                    //     key: _id.fieldKey,
                    //     focusNode: _id.focusNode,
                    //     validator: nonNull(message: 'Field id required').validator,
                    //     decoration: const InputDecoration(
                    //         isDense: _densify,
                    //         labelText: 'Id',
                    //         hintText: 'Upload',
                    //         suffixIconConstraints:
                    //             BoxConstraints(minHeight: 52, minWidth: kMinInteractiveDimension * 2)),
                    //     autovalidateMode: AutovalidateMode.onUserInteraction),
                    const SizedBox(height: 500),
                  ])))),
      floatingActionButton: FloatingActionButton(onPressed: submitForm, child: const Icon(Icons.add)));

  @override
  void onFormSubmit() {
    DialogRoute(
        location: '/result',
        builder: (context, args) => AlertDialog(
              actions: const [AlertDialogAction.positive()],
              content: Text('Result: \n'
                  '    name: ${_name.value}\n'
                  '    surname: ${_surname.value}\n'
                  '    options: ${_sampleOptions.value}\n'
                  '    age: ${_age.valueOrNull}\n'
                  '    id: ${_id.valueOrNull?.name}\n'),
            )).open(context);
  }
}

enum SampleOption { option1, option2, option3 }