flutter_input 1.1.2

  • Readme
  • Changelog
  • Example
  • Installing
  • 82

Flutter Input Widgets - Standalone or within a Form → flutter_input #

This package provides input widgets (fields) to manipulate data. All input widgets share a common set of parameters. A list of validators (see below) can be attached to any input widget. Each input widget can be used standalone or attached to the InputForm. The InputForm provides methods to enable(), reset(), save() or validate() all fields at once which are attached to the form.

Input Widgets #

The following input widgets are included. See section Development below for building your own input widget.

  • InputCheckbox - Checkbox for data type bool
  • InputCountry - Dropdown to select a country (shows flags)
  • InputDate - Calendar based selection for data type DateTime (date part only)
  • InputDatePicker - A highly customizable date picker with week of year and multiple swipe actions
  • InputDateTime - Wheels for data type DateTime can be customized for date only, time only or both
  • InputDropDown<T> - Dropdown button for data type T
  • InputFavorite - A favorite button with selectable icon for data type bool
  • InputKeyboard - Text input for data type String, int or double
  • InputLanguage - Dropdown to select a language (Locale)
  • InputRadio<T> - Radio button to select one value of type T
  • InputRating - Rating widget with selectable icons and a range slider for data type int
  • InputSlider - Slider for data type double between a minimum and maximum value
  • InputSpinner - Spinner with buttons for data type double to decrease or increase a value between a minimum and maximum
  • InputSwitch - Switch for data type bool

Demo #

For a complete example see example/main.dart.

InputDatePicker

The highly customizable InputDatePicker allows you to choose a date from a calendar page which also shows the week of the year. It provides spinners, swipes and a dropdown to select the month. The year can even be entered as text. All parts can be customized by DatePickerStyles.

Screenshot

Usage #

All input widgets share a common set of parameters. All parameters are named and optional.

  • Key key
  • bool autovalidate = false - automatically validates
  • InputDecoration decoration - e.g. for a label
  • bool enabled - to protect the field against changes. Overrides setting of the Form
  • T initialValue - to set the fields initial value. Overrides using the value from the forms map.
  • ValueSetter
  • ValueSetter
  • String path - to access the form map
  • List

Validators #

The following validators can be given to parameter validators of an input widget. Each validator accepts the optional parameter message to set an individual error message if the validation fails.

  • after(DateTime date) - validates that the field value is after date
  • before(DateTime date) - validates that the field value is before date
  • future - validates that the DateTime field value lies in the future
  • max(num maxVal) - validates that the num field value is not larger than maxVal
  • maxLen(num maxLen) - validates that the length of the String field value is not longer than maxLen
  • min(num minVal) - validates that the num field value is not smaller than minVal
  • minLen(num minLen) - validates that the length of the String field value is not shorter than minLen
  • notNull - validates the the field value is not empty
  • past - validates that the DateTime field value lies in the past

Development #

To create a new input field for data type T follow these steps:

  1. Copy one of the included class files.
  2. Rename the class widget and its state to your new one.
  3. Replace T with the value type of your new input field.
  4. Adapt parameters and leave the call to super() with all the common parameters.
  5. Adapt method build( BuildContext context) in the state class. It must end with return super.buildInputField( context, ... where ... is the code to display your new field widget.

Utilities #

This package also contains some utilities.

  • InputUtils.convertToType() converts a value to a given target type.
  • InputUtils.readFromJson() reads a value from a nested map.
  • InputUtils.writeToJson() writes a value into a nested map.
  • See date_helper.dart for extensions on DateTime for weekOfYear, julianDay and more.

To Do #

  • [X] create a customizable calendar picker with week numbers
  • [X] create a text input field for int and double
  • [ ] create an input widget for a calendar with events
  • [ ] create an input widget to select multiple choices like a multi-select list
  • [ ] add some images to this documentation
  • [X] internationalize the whole package
  • [X] create an input widget to change the language within the app

1.1.2 #

  • Moved flag images to lib/assets

1.1.1 #

  • Fixed flutter version problem: The getter 'floatingLabelBehavior' isn't defined for the class 'InputDecoration'
  • Fixed pub.dev analysis problem with class local instance variable.

1.1.0 #

  • Localized widgets by using a combination of Flutter localization and package i18n_extension.
  • Added Country. Contains list of countries based on ISO-3166 and flag images.
  • Added InputCountry to select a country from a (filterable) list. The list is automatically sorted by localized country name. Flag of country is shown.
  • Added InputLanguage to select a language from a list of available languages.
  • Default field decoration now is without underline for non-text fields.
  • Bugfix: properly nested decoration from Default -> Theme -> Form -> Field.
  • Bugfix: editing some fields within a form, then abort editing wrongly displayed the edited value.

1.0.3 #

  • renamed InputCalendar to InputDatePicker because we are working on a calendar widget containing events. Sorry for any inconvenience.
  • added first animated gif. Shows the date picker.

1.0.2 #

  • InputSpinner now accepts a generic of type int or double.
  • Date utility methods (e.g. weekOfYear or julianDay) changed to Dart extensions. Can now be used on all DateTime objects.
  • Bugfix: closing InputCalendar with [X] did set value to null

1.0.1 #

  • Breaking change: all validator functions are now lowerCamelCase

1.0.0 #

  • Added new widget InputKeyboard. Generic type <String>, <int> or <double> automatically sets appropriate keyboard. Replaces deprecated InputText.
  • Added new widget InputCalendar which is a highly customizable date picker. It shows weeks of year. Month selection by dragging the whole calendar sheet left or right or using the month dropdown. Year can be directly set as it is a text input field.
  • Added DateHelper with methods getJulianDay(), getWeekOfYear(), isSameDay(), isBetween() and more.
  • All fields are included in the example project.
  • Made better documentation.

0.2.0 #

  • Added new widget InputSlider
  • Added new widget InputSpinner
  • Added some reusable validators: NotNull, Min, MinLength, Max, MaxLength
  • Validators can have individual error messages with named parameter message

0.1.0 #

  • Initial version

example/lib/main.dart

// Copyright 2020 Hajo.Lemcke@gmail.com
// Please see the LICENSE file for details.

import 'package:flutter/material.dart';
import 'package:flutter/rendering.dart';
import 'package:flutter_input/flutter_input.dart';
import 'package:flutter_localizations/flutter_localizations.dart';
import 'package:i18n_extension/i18n_widget.dart';

import 'form_page.dart';
import 'main.i18n.dart';

/// Sample map with nested values
Map<String, dynamic> sampleData = {
  'id': 666,
  'author': true,
  'amount': 123.45,
  'birthday': '1977-02-17',
  'name': 'Isaac Asimov',
  'rateCount': 4711,
  'rateValue': 71,
  // Nested map. Access with dotted path
  'myRating': {
    'favorite': true, // path = 'myRating.favorite'
    'value': 87, // path = 'myRating.value'
  },
};

/// Drawer sample usable in all pages
Drawer buildDrawer(BuildContext context) {
  _MyAppState state = context.findAncestorStateOfType<_MyAppState>();
  return Drawer(
    child: ListView(
      children: <Widget>[
        ListTile(
          leading: Icon(Icons.language),
          title: InputLanguage(
            initialValue: state.thisAppsLocale,
            onChanged: (v) => state.setState(() {
              I18n.of(context).locale = v;
            }),
            supportedLocales: supportedLocales,
          ),
        ),
        AboutListTile(
          icon: Icon(Icons.info),
          applicationLegalese: 'Free to Use',
          applicationName: 'flutter_input',
          applicationVersion: 'v1.1.2',
          aboutBoxChildren: <Widget>[
            Text('Thanks for using flutter_input!'.i18n),
          ],
        ),
      ],
    ),
  );
}

/// Supported locales. 0 is default.
List<Locale> supportedLocales = [
  Locale('en', 'US'),
  Locale('de', 'DE'),
];

void main() {
  debugPaintSizeEnabled = false; // true does not work in web
  runApp(MyApp());
}

/// Flutter code sample for package `flutter_input`
///
/// This app shows all input widgets provided in this package.
class MyApp extends StatefulWidget {
  @override
  State<StatefulWidget> createState() => _MyAppState();

  /// Called from anywhere in the application to change apps locale
  static bool setThisAppsLocale(BuildContext context, Locale newLocale) {
    _MyAppState state = context.findAncestorStateOfType<_MyAppState>();
    if (state.thisAppsLocale == newLocale) {
      return false;
    }
    state.setState(() {
      print('${state.thisAppsLocale} -> $newLocale');
      state.thisAppsLocale = newLocale;
    });
    return true;
  }
}

class _MyAppState extends State<MyApp> {
  /// The locale used by the whole app
  Locale thisAppsLocale;

  @override
  void initState() {
    thisAppsLocale ??= WidgetsBinding.instance.window.locale;
    super.initState();
    I18n.observeLocale = ({Locale oldLocale, Locale newLocale}) {
//      print('Changing from $oldLocale to $newLocale.');
      if (thisAppsLocale != newLocale) {
        setState(() {
          thisAppsLocale = newLocale;
        });
      }
    };
  }

  @override
  Widget build(BuildContext context) {
    return I18n(
      initialLocale: thisAppsLocale,
      child: MaterialApp(
        title: 'flutter_input',
        home: SampleFormPage(),
        locale: thisAppsLocale,
/*        localeResolutionCallback: (deviceLocale, supportedLocales) {
          if (thisAppsLocale != deviceLocale) {
            print('thisA=$thisAppsLocale, devLoc=$deviceLocale');
            thisAppsLocale = deviceLocale;
          }
          return thisAppsLocale;
        },
  */
        localizationsDelegates: [
          // ... app-specific localization delegate[s] here
          GlobalMaterialLocalizations.delegate,
          GlobalWidgetsLocalizations.delegate,
          GlobalCupertinoLocalizations.delegate,
        ],
        supportedLocales: supportedLocales,
      ),
    );
  }
}

Use this package as a library

1. Depend on it

Add this to your package's pubspec.yaml file:


dependencies:
  flutter_input: ^1.1.2

2. Install it

You can install packages from the command line:

with Flutter:


$ flutter pub get

Alternatively, your editor might support flutter pub get. Check the docs for your editor to learn more.

3. Import it

Now in your Dart code, you can use:


import 'package:flutter_input/flutter_input.dart';
  
Popularity:
Describes how popular the package is relative to other packages. [more]
63
Health:
Code health derived from static analysis. [more]
100
Maintenance:
Reflects how tidy and up-to-date the package is. [more]
100
Overall:
Weighted score of the above. [more]
82
Learn more about scoring.

We analyzed this package on Mar 27, 2020, and provided a score, details, and suggestions below. Analysis was completed with status completed using:

  • Dart: 2.7.1
  • pana: 0.13.6
  • Flutter: 1.12.13+hotfix.8

Dependencies

Package Constraint Resolved Available
Direct dependencies
Dart SDK >=2.7.0 <3.0.0
flutter 0.0.0
i18n_extension ^1.3.2 1.3.4
intl ^0.16.1 0.16.1
pedantic ^1.8.0 1.9.0
Transitive dependencies
collection 1.14.11 1.14.12
meta 1.1.8
path 1.6.4
sky_engine 0.0.99
sprintf 4.0.2
typed_data 1.1.6
vector_math 2.0.8
Dev dependencies
dartdoc >=0.30.0
test >=1.12.0