Form Input Widget on Flutter Android - Text, Slider, Switch, Date Picker, Buttons & Check Box

 Learn how you can use the different Form Input Widget on Flutter Android - Text, Slider, Switch, Date Picker, Buttons & Check Box

This Application will give a basic idea like how you can create different widgets for the form panel designing.

Video Tutorial

import 'package:flutter/material.dart';
import 'package:intl/intl.dart' as intl;

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

  @override
  State createState() => _FormWidgetsDemoState();
}

class _FormWidgetsDemoState extends State {
  final _formKey = GlobalKey();
  DateTime date = DateTime.now();
  double maxValue = 0;
  bool? checkBoxFeature = false;
  bool sliderFeature = false;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Hakeem Innovation Technology'),
      ),
      body: Form(
        key: _formKey,
        child: Scrollbar(
          child: Align(
            alignment: Alignment.topCenter,
            child: Card(
              child: SingleChildScrollView(
                padding: const EdgeInsets.all(16),
                child: ConstrainedBox(
                  constraints: const BoxConstraints(maxWidth: 400),
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: [
                      ...[
                        TextFormField(
                            decoration: const InputDecoration(
                          border: OutlineInputBorder(),
                          filled: true,
                          hintText: 'Text Field',
                          labelText: 'Title',
                        )),
                        TextFormField(
                          decoration: const InputDecoration(
                            border: OutlineInputBorder(),
                            filled: true,
                            hintText: 'Text Field Multi line...',
                            labelText: 'Description',
                          ),
                          maxLines: 3,
                        ),
                        _FormDatePicker(
                          date: date,
                          onChanged: (value) {
                            setState(() {
                              date = value;
                            });
                          },
                        ),
                        Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              children: [
                                Text(
                                  'Slider ',
                                  style: Theme.of(context).textTheme.bodyLarge,
                                ),
                              ],
                            ),
                            Text(
                              maxValue.toStringAsFixed(0),
                              style: Theme.of(context).textTheme.titleMedium,
                            ),
                            Slider(
                              min: 0,
                              max: 100,
                              divisions: 50,
                              value: maxValue,
                              onChanged: (value) {
                                setState(() {
                                  maxValue = value;
                                });
                              },
                            ),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.start,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Checkbox(
                              value: checkBoxFeature,
                              onChanged: (checked) {
                                setState(() {
                                  checkBoxFeature = checked;
                                });
                              },
                            ),
                            Text('CheckBox',
                                style: Theme.of(context).textTheme.titleMedium),
                          ],
                        ),
                        Row(
                          mainAxisAlignment: MainAxisAlignment.spaceBetween,
                          crossAxisAlignment: CrossAxisAlignment.center,
                          children: [
                            Text('Switch',
                                style: Theme.of(context).textTheme.bodyLarge),
                            Switch(
                              value: sliderFeature,
                              onChanged: (enabled) {
                                setState(() {
                                  sliderFeature = enabled;
                                });
                              },
                            ),
                          ],
                        ),
                      ].expand(
                        (widget) => [
                          widget,
                          const SizedBox(
                            height: 15,
                          )
                        ],
                      ),
                      ElevatedButton(
                          onPressed: () {},
                          child: const Text('Elevated Button')),
                      ElevatedButton.icon(
                          icon: const Icon(Icons.email),
                          onPressed: () {},
                          label: const Text('Elevated Button Icon')),
                      IconButton(
                        onPressed: () {},
                        icon: const Icon(Icons.email),
                      ),
                      TextButton(
                          onPressed: () {}, child: const Text('Text Button')),
                    ],
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}

class _FormDatePicker extends StatefulWidget {
  final DateTime date;
  final ValueChanged onChanged;

  const _FormDatePicker({
    required this.date,
    required this.onChanged,
  });

  @override
  State<_formdatepicker> createState() => _FormDatePickerState();
}

class _FormDatePickerState extends State<_formdatepicker> {
  @override
  Widget build(BuildContext context) {
    return Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      children: [
        Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          mainAxisAlignment: MainAxisAlignment.spaceAround,
          children: [
            Text(
              'Date',
              style: Theme.of(context).textTheme.bodyLarge,
            ),
            Text(
              intl.DateFormat.yMd().format(widget.date),
              style: Theme.of(context).textTheme.titleMedium,
            ),
          ],
        ),
        TextButton(
          child: const Text('Edit'),
          onPressed: () async {
            var newDate = await showDatePicker(
              context: context,
              initialDate: widget.date,
              firstDate: DateTime(1900),
              lastDate: DateTime(2100),
            );

            // Don't change the date if the date picker returns null.
            if (newDate == null) {
              return;
            }

            widget.onChanged(newDate);
          },
        )
      ],
    );
  }
}