Forms Quickstart, by Example - Flutter

By pjain      Published May 11, 2020, 3:18 a.m. in blog Programming   

Forms Quickstart

FEEvalTests - in goMDK

  • Code from feapps/lib/formtest.dart

Ex TextForm field

import 'package:flutter/material.dart';
import '../gomdk/ui.dart';

class formtestPage extends StatefulWidget {
  formtestPage({Key key}) : super(key: key);
  @override _formtestPageState createState() => _formtestPageState();
}
class _formtestPageState extends State<formtestPage> {
  TextEditingController _controller;
  void initState() {
    super.initState();
    _controller = TextEditingController();
  }
  void dispose() {
    _controller.dispose();
    super.dispose();
  }
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("My List"),
      ),
      body: Column( 
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("Enter name:"),
            TextField(
              controller: _controller,
              onSubmitted: (info) { simpleDialogInfo(context,info); },
            ),
          ]
      ),
    );
  }
}

Login/Signup Form Example from GoMDK - BPR

In pubspec.yaml uses validators validators: ^2.0.0+1

  • BPR Defines a custom GoFormField as base for brevity in declaration of TextFormField
    • Hint text
    • Display as password
    • Validation custom validator
    • Keyboard simple as email
  • For decorations conformity as per your project

    • Field Fill color and border
  • See FeEvalTests > formtest for detailed code.

Lessons:

  1. You need to wrap Form in a Material widget (maybe for event handling/bubbling), which makes most sense as Scaffold

  2. The Scaffold/Form and Keyboard interact so that when focus on a field the rise in the Keyboard pushes up the form, causing the running out of space - yellow border and black chevrons. To avoid this, set the scaffold property to

    resizeToAvoidBottomPadding: false,

  3. Todo - numeric keyboard, even Wheel driven input

  4. Full SRC: , Github from Mahmud

  5. YouTube Tutorial

0 comments

There are no comments yet

Add new comment

Similar posts

List++ Advanced Application Features

Interview Questions in Flutter

NAV: URL Launcher, Deep Links

NAV: Navigation Drawers