flutter_custom_form_component 0.0.8

Custom UI components supporting form on a page. The existing components are some text fields that ease users typing bank card number, date and money.

example/lib/main.dart

import 'package:flutter/material.dart';
import 'package:flutter_custom_form_component/widget/field/bankcardnumber/bankcardnumber.dart';
import 'package:flutter_custom_form_component/widget/field/date/224/ddmmyyyy.dart';
import 'package:flutter_custom_form_component/widget/field/date/224/mmddyyyy.dart';
import 'package:flutter_custom_form_component/widget/field/date/422/yyyyddmm.dart';
import 'package:flutter_custom_form_component/widget/field/date/422/yyyymmdd.dart';
import 'package:flutter_custom_form_component/widget/field/money/money.dart';
import 'package:flutter_custom_form_component/widget/field/name/name.dart';
import 'package:flutter_custom_form_component/widget/field/registrationnumber/registrationnumber.dart';
import 'package:flutter_custom_form_component/widget/page.dart';

/// Main example.
void main() {
  runApp(const AppWidget());
}

/// Main app widget.
class AppWidget extends StatelessWidget {
  const AppWidget({Key? key}) : super(key: key);

  @override
  Widget build(final BuildContext context) => MaterialApp(
      home: const OnePageWidget(),
      theme: ThemeData(fontFamily: 'Circular Std'));
}

/// Main page widget.
class OnePageWidget extends StatelessWidget {
  const OnePageWidget({Key? key}) : super(key: key);

  @override
  Widget build(final BuildContext context) => page(Column(children: [
        SizedBox(
          child: MmDdYyyyFieldWidget(

              /// Optional. It has default value.
              hint: 'MM / DD / YYYY',

              /// Optional. For your own validation logic.
              isValid: true,

              /// Optional
              onChanged: (final int? year, final int? month, final int? day) {
                /// You can get the values here.
              },

              /// Optional. It has default value.
              separator: ' / '),

          /// Wrap the height.
          height: 52.0,
        ),
        const SizedBox(height: 20.0),
        SizedBox(
          child: DdMmYyyyFieldWidget(

              /// Optional. It has default value.
              hint: 'DD / MM / YYYY',

              /// Optional. For your own validation logic.
              isValid: true,

              /// Optional
              onChanged: (final int? year, final int? month, final int? day) {
                /// You can get the values here.
              },

              /// Optional. It has default value.
              separator: ' / '),

          /// Wrap the height.
          height: 52.0,
        ),
        const SizedBox(height: 20.0),
        SizedBox(
          child: YyyyMmDdFieldWidget(

              /// Optional. It has default value.
              hint: 'YYYY / MM / DD',

              /// Optional. For your own validation logic.
              isValid: true,

              /// Optional
              onChanged: (final int? year, final int? month, final int? day) {
                /// You can get the values here.
              },

              /// Optional. It has default value.
              separator: ' / '),

          /// Wrap the height.
          height: 52.0,
        ),
        const SizedBox(height: 20.0),
        SizedBox(
          child: YyyyDdMmFieldWidget(

              /// Optional. It has default value.
              hint: 'YYYY / DD / MM',

              /// Optional. For your own validation logic.
              isValid: true,

              /// Optional
              onChanged: (final int? year, final int? month, final int? day) {
                /// You can get the values here.
              },

              /// Optional. It has default value.
              separator: ' / '),

          /// Wrap the height.
          height: 52.0,
        ),
        const SizedBox(height: 20.0),
        SizedBox(
          child: MoneyFieldWidget(

              /// Optional
              hint: '\$ 0.0',

              /// Optional. It has default value.
              isUsingPeriodInThousand: false,

              /// Optional
              onChanged: (final double? value) {
                /// You can get the values here.
              },

              /// Optional
              symbol: '\$ '),

          /// Wrap the height.
          height: 52.0,
        ),
        const SizedBox(height: 20.0),
        SizedBox(
          child: BankCardNumberFieldWidget(

              /// Optional
              hint: '0000 - 0000 - 0000 - 0000',

              /// Optional
              onChanged: (final String value) {
                /// You can get the values here.
              },

              /// Optional. It has default value.
              separator: ' - '),

          /// Wrap the height.
          height: 52.0,
        ),
        const SizedBox(height: 20.0),
        SizedBox(
          child: NameFieldWidget(

              /// Optional
              hint: 'Your name',

              /// Optional
              onChanged: (final String value) {
                /// You can get the values here.
              }),

          /// Wrap the height.
          height: 52.0,
        ),
        const SizedBox(height: 20.0),
        SizedBox(
          child: RegistrationNumberFieldWidget(

              /// Optional
              hint: '12.0000.123-752-86',

              /// Optional
              onChanged: (final String value) {
                /// You can get the values here.
              }),

          /// Wrap the height.
          height: 52.0,
        )
      ]));
}