Lightweight Flutter form library

Related tags

UI dart forms flutter
Overview

LoForm

style: lint

🧪 LoForm is still experimental, missing features and bugs are to be expected.

LoForm is a low-code and lightweight Flutter form library, inspired by Formik — the world's most popular form library for React, used in production at Airbnb, Stripe, NASA and more.

Features

  1. No boilerplate: 90% less code compared to bloc + formz.
  2. Informational: provides a lot of useful states (touched, status, error) for each field in the form.
  3. Server-errors friendly: unlike flutter_form_builder which requires external errors to be managed by a separate state.
  4. Reusable and easy validation: uses the builder pattern for building validations.

Simple Usage

This is a simple example, for a more complex one see the RegisterForm widget.

class SimpleForm extends StatelessWidget {

  @override
  Widget build(BuildContext context) {
    // [1] Wrap your form with [LoForm] widget.
    return LoForm(
      // [2] Choose when the submit button is enabled using form status.
      submittableWhen: (status) => status.isValid || status.isSubmitted,
      // [3] Implement what happens when the form is submitted.
      onSubmit: (values) async {
        print('Hi, ${values.get('name')}!');
        return true; // Successful submission
      },
      builder: (form) {
        return Column(
          children: [
            // [4] Use [LoTextField] instead of the normal [TextField].
            LoTextField(
              // [5] This name will be used to get the field's value.
              name: 'name',
              // [6] Provide a validation scheme using [LoValidation].
              validate: LoValidation().required().build(),
            ),
            const SizedBox(height: 32),
            ElevatedButton(
              // [7] Call the [submit] method.
              onPressed: form.submit,
              child: const Text('Submit'),
            ),
          ],
        );
      },
    );
  }

}
Comments
  • Use ValueNotifier and remove provider

    Use ValueNotifier and remove provider

    To improve this package and remove all dependencies that can be, I suggest remove provider dependency and use a ValueNotifier to update widgets states. Maybe this article or this other can be help.

    This this change will can improve:

    • Avoid dependency conflicts when used this package
    • No need update package every time than update provider (like this)
    • Decrease package size (even more!)
    • Don't need use notifyListeners()

    PS: I can work on this, but can't be promise when hehehe

    opened by deandreamatias 5
  • fix: correct fields tab traverse

    fix: correct fields tab traverse

    Connection with issue(s)

    Resolve issue #5

    Testing and Review Notes

    Hello, while developing multi-platform Flutter app with the awesome LoForm I have encountered a problem with UX (especially on desktop). Changing between fields with tab key did not work, because in lo_field.dart Focus was the child of FocusScope which 'traps' the tab traversal to the FocusNodes under given FocusScope. The solution was to remove FocusScope widget and add skipTraversal = true to the Focus widget (TextField already has FocusNode attached, therefore the Focus that we add does not need to be available to be focused (otherwise one tab click removes the Focus from the field and only then the next tab click moves the focus to the next FocusNode.))

    To test this functionality example project can be compiled on any platform and then tab key can be used to change between fields.

    All current unit tests still do pass.

    To Do

    • [x] double check the original issue to confirm it is fully satisfied
    • [x] add testing notes and screenshots in PR description to help guide reviewers
    • [ ] add unit test
    opened by Leviatanus 2
  • Pressing the tab button should move focus to the next field

    Pressing the tab button should move focus to the next field

    Currently, it seems I cannot use the tab key to cycle through the fields in the form. This is a common navigation mechanism on desktop and web. How can I implement this on lo_form?

    opened by point-source 2
  • Validation not called if field content remains unchanged

    Validation not called if field content remains unchanged

    Take the sample RegisterForm that you have provided as the example:

    The Name filed is prepopulated with "yrnnnn". I make no changes and just add password, repeat password fields and the checkbox.

    The "Register" button stays inactive. Only if the name is edited (even if back to "yrnnnn") does the register button become active.

    stale 
    opened by sunilguptasg 1
  • Tab support on web and more

    Tab support on web and more

    I'm unable to get the Tab key to change focus to the next field even with including this code:

    if (kIsWeb) { document.addEventListener('keydown', (event) => {if (event.type == 'tab') event.preventDefault()}); } Can you provide a working code snippet using the sample RegisterForm code which I am using for evaluation?

    Also, there seems to be no way to configure a label. I am able to use a Text field, but this does not have the animation in other packages.

    opened by sunilguptasg 1
  • fix: use a better email regex

    fix: use a better email regex

    Additionally, there appear to be syntax errors in this regex but I'm not sure what the original intent was behind the -/ part. See here: https://regex101.com/r/EJSBcu/1

    opened by point-source 1
  • Update the dependency

    Update the dependency

    Because every version of lo_form depends on provider ^ 5.0.0 and your_app depends on provider ^ 6.0.1, lo_form is forbidden. So, because your_app depends on lo_form any, version solving failed.

    bug 
    opened by wwwhttpru 0
Owner
Youssef Raafat
Coding like Vincent Van Gogh.
Youssef Raafat
An app built using Flutter that holds buttons in form of xylophone which plays as instrument when clicked.

xylophone_flutter A new Flutter application. Getting Started This project is a starting point for a Flutter application. A few resources to get you st

dev_allauddin 3 Feb 3, 2022
This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

This Dart package offers developers a streamlined library of Flutter widgets, useful for expanding widgets and text views, when users interact with them.

Jesús Rodríguez 44 Dec 6, 2022
Toast Library for Flutter

A Powerful Toast Library for Flutter. Easily create toast messages in single line of code with leading image options.

Sanket Vekariya 8 Apr 25, 2022
A small library for creating snapping lists.

snaplist A small cozy library that allows you to make snappable list views. Issues and Pull Requests are really appreciated! Snaplist supports differe

David Leibovych 420 Jan 3, 2023
Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Movies App UI in Flutter using Simple Widgets without Using API's in Flutter.

Habib ullah 3 May 15, 2022
A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

A flutter plugin for Easily make Flutter apps responsive. Automatically adapt UI to different screen sizes. Responsiveness made simple.

Urmish Patel 191 Dec 29, 2022
The Coolicons icon pack for Flutter with over 400 icons available for your flutter project.

coolicons This flutter package allows you to use the Coolicons icon pack. Made from Coolicons. ?? Installation In the dependencies: section of your pu

Stephen Joel 1 May 24, 2022
Foody - Flutter project to display foods to clients and display charts and has a lot of features , two flutter apps : Android and Web

Foody Flutter project to display foods to the clients and use charts and use a lot of features to complete the process (HUGE APP) There two apps: Andr

ABDULKARIMALBAIK 1 Feb 7, 2022
Flutter-business-card-app - Flutter + Dart business card mobile app

Dart + Flutter Business Card Mobile Application

Mark Hellner 1 Nov 8, 2022
A Flutter project that gives basic flutter design to implement a login UI

Login UI Design A Flutter project that gives basic flutter design to implement a

CABREX 9 Nov 8, 2022
Flutter Complete E-Commerce app (UI by - 'The Flutter Way')

NOT COMPLETED YET! e_commerce A new Flutter project. Getting Started This project is a starting point for a Flutter application. A few resources to ge

null 1 Mar 8, 2022
Flutter Shop UI - an e-commerce app using Flutter

If you are planning to create an e-commerce app using Flutter then this Shop UI Kit would be the perfect choice for you to make a gorgeous app for both Android & iOS.

Trần Văn Nguyên 21 Nov 21, 2022
A Flutter staggered grid view

flutter_staggered_grid_view A Flutter staggered grid view which supports multiple columns with rows of varying sizes. Features Configurable cross-axis

Romain Rastel 2.7k Dec 30, 2022
A simple animated radial menu widget for Flutter.

flutter_radial_menu A radial menu widget for Flutter. . Installation Install the latest version from pub. Quick Start Import the package, create a Rad

Victor Choueiri 434 Jan 7, 2023
Tinder like cards swipe effect with Flutter.

Tinder cards Hi! After showcasing Focus for Reddit, the app I am working on, people asked me how did I do the tinder like cards swipe (posts media are

Ivascu Adrian 733 Jan 7, 2023
The app to demo animation with Flutter by implement Facebook reactions

Facebook Reactions Animation Description The app to demo animation with Flutter by implement Facebook reactions. Watch the demo video for more clarity

Duy Tran 318 Jan 8, 2023
Custom widget for Flutter

Flushbar Use this package if you need more customization when notifying your user. For Android developers, it is made to substitute toasts and snackba

Andre Haueisen 899 Dec 30, 2022
flutter stepper_touch widget

stepper_touch the concept of the widget inspired from Nikolay Kuchkarov. i extended the functionality to be more useful in real world applications Tha

Raouf Rahiche 271 Dec 30, 2022
A TypeAhead widget for Flutter, where you can show suggestions to users as they type

Flutter TypeAhead A TypeAhead (autocomplete) widget for Flutter, where you can show suggestions to users as they type Features Shows suggestions in an

null 661 Jan 5, 2023