Handle Form in dialog or bottomsheet

[Fanom2813]

Hello , i would like to get some help how can i handle form inside bottom sheet on my side it is failing here is my code :

class ManageFarmForm extends NyFormData {
  ManageFarmForm({String? name}) : super(name ?? "manage_farm");

  @override
  fields() => [
        Field.capitalizeWords("farm_name",
            style: "compact", validate: FormValidator().notEmpty()),
        Field.text("contact_info",
            style: "compact", validate: FormValidator().notEmpty()),
        Field.textArea("location",
            style: "compact", validate: FormValidator().notEmpty()),
      ];
}

class ManageFormSheet extends StatefulWidget {
  const ManageFormSheet({super.key});

  @override
  createState() => _ManageFormSheetState();

  static void show(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return ManageFormSheet();
      },
    );
  }
}

class _ManageFormSheetState extends NyState<ManageFormSheet> {
  @override
  LoadingStyle get loadingStyle => LoadingStyle.skeletonizer();

  Farmer? farmer;

  @override
  get init => () async {
        api<LaravelApiService>((request) async {
          if (authData()['id'] != null) {
            var data = await request.search<Farmer>(
                Farmer.key,
                LomkitSearchRequest(limit: 1, selects: [
                  Select(field: "farm_name"),
                ], filters: [
                  Filter(field: "user_id", value: authData()['id'])
                ]));
          }
        });
      };

  ManageFarmForm form = ManageFarmForm();

  Future<void> submit(data) async {
    return await api<LaravelApiService>((request) => request.mutate(
        Farmer.key,
        LomkitMutateRequest(
          mutate: [
            MutateOperation(
              attributes: data,
            )
          ],
        )));
  }

  @override
  Widget view(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: EdgeInsets.symmetric(
            horizontal: Spacings.medium, vertical: Spacings.medium),
        children: [
          Text(
            "Register My Farm",
          ).titleLarge(),
          Text(
            "Fill in the form below to add your farm to HarvestHub",
          ),
          Spacings.large.gap,
          NyForm(
            headerSpacing: Spacings.medium,
            form: form,
          ),
          Spacings.large.gap,
          Button.primary(text: "Save", submitForm: (form, (data) {}))
        ],
      ),
    );
  }
}

when i start typing on the form in the bottomsheet i get an exception

what i am i doing wrong thanks

[agordn52]

Hi @Fanom2813,

I'd need to see the full code (including the dialog) to understand the issue better.
Thanks, Anthony

[Fanom2813]

i have a static method to launch the dialog

static void show(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return ManageFormSheet();
      },
    );
  }

this is the full code

Hello , i would like to get some help how can i handle form inside bottom sheet on my side it is failing here is my code :

class ManageFarmForm extends NyFormData {
  ManageFarmForm({String? name}) : super(name ?? "manage_farm");

  @override
  fields() => [
        Field.capitalizeWords("farm_name",
            style: "compact", validate: FormValidator().notEmpty()),
        Field.text("contact_info",
            style: "compact", validate: FormValidator().notEmpty()),
        Field.textArea("location",
            style: "compact", validate: FormValidator().notEmpty()),
      ];
}

class ManageFormSheet extends StatefulWidget {
  const ManageFormSheet({super.key});

  @override
  createState() => _ManageFormSheetState();

  static void show(BuildContext context) {
    showDialog(
      context: context,
      builder: (context) {
        return ManageFormSheet();
      },
    );
  }
}

class _ManageFormSheetState extends NyState<ManageFormSheet> {
  @override
  LoadingStyle get loadingStyle => LoadingStyle.skeletonizer();

  Farmer? farmer;

  @override
  get init => () async {
        api<LaravelApiService>((request) async {
          if (authData()['id'] != null) {
            var data = await request.search<Farmer>(
                Farmer.key,
                LomkitSearchRequest(limit: 1, selects: [
                  Select(field: "farm_name"),
                ], filters: [
                  Filter(field: "user_id", value: authData()['id'])
                ]));
          }
        });
      };

  ManageFarmForm form = ManageFarmForm();

  Future<void> submit(data) async {
    return await api<LaravelApiService>((request) => request.mutate(
        Farmer.key,
        LomkitMutateRequest(
          mutate: [
            MutateOperation(
              attributes: data,
            )
          ],
        )));
  }

  @override
  Widget view(BuildContext context) {
    return Scaffold(
      body: ListView(
        padding: EdgeInsets.symmetric(
            horizontal: Spacings.medium, vertical: Spacings.medium),
        children: [
          Text(
            "Register My Farm",
          ).titleLarge(),
          Text(
            "Fill in the form below to add your farm to HarvestHub",
          ),
          Spacings.large.gap,
          NyForm(
            headerSpacing: Spacings.medium,
            form: form,
          ),
          Spacings.large.gap,
          Button.primary(text: "Save", submitForm: (form, (data) {}))
        ],
      ),
    );
  }
}

when i start typing on the form in the bottomsheet i get an exception

what i am i doing wrong thanks

[Fanom2813]

I/flutter (12335): 𖢥 == Error Details == 𖢥
I/flutter (12335): Bad state: Cannot add new events after calling close
I/flutter (12335): File: (package:nylo_support/widgets/form/form_item.dart:66:16)
I/flutter (12335): Google: (https://www.google.com/search?q=Bad+state%3A+Cannot+add+new+events+after+calling+close+flutter)
I/flutter (12335): Stack: #0 _BroadcastStreamController.add (dart:async/broadcast_stream_controller.dart:256:24)
I/flutter (12335): #1 NyFormItem.build. (package:nylo_support/widgets/form/form_item.dart:66:16)
I/flutter (12335): #2 NyFormItem.build. (package:nylo_support/widgets/form/form_item.dart:402:20)
I/flutter (12335): #3 _NyTextFieldState.build. (package:nylo_support/widgets/ny_text_field.dart:1023:25)

[agordn52]

@Fanom2813 taking a look into this now 👍

[agordn52]

Hi @Fanom2813,

This is now fixed in nylo_framework: ^6.6.3
You can update your pubspec.yaml dependency 👍