Creating a Form in Flutter

This Article is posted by seven.srikanth at 7/28/2018 1:51:21 PM



Hello Guys,
Today in this post, I'm going to share one of the forms which I designed using flutter.
In this example, I have done things like user input validations, showing a showSnackBar upon form submission and then routing to the next page. Also, I have done validation if a number has been provided for a Phone number TextField, which is important while taking Phones numbers as input. For rest of the fields, if they are empty, they will ask for input. 
Here are the final output and main.dart code. All you need to do is create a default flutter program and copy paste the below content and run it.

import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appTitle = 'Form Validation Demo';
    return MaterialApp(
      title: appTitle,
      home: Scaffold(
        // appBar: AppBar(
        //   title: Text(appTitle),
        // ),
        body: MyCustomForm(),
      ),
    );
  }
}
class MyCustomForm extends StatefulWidget {
  @override
  MyCustomFormState createState() {
    return MyCustomFormState();
  }
}
// Create a corresponding State class. This class will hold the data related to
// the form.
class MyCustomFormState extends State<MyCustomForm> {
  // Create a global key that will uniquely identify the Form widget and allow
  // us to validate the form
  //
  // Note: This is a GlobalKey, not a GlobalKey!
  final _formKey = GlobalKey<FormState>();
  @override
  Widget build(BuildContext context) {
    // Build a Form widget using the _formKey we created above
    return SingleChildScrollView(
      child: Form(
        key: _formKey,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Padding(
              padding:
                  const EdgeInsets.symmetric(horizontal: 8.0, vertical: 19.0),
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 8.0, vertical: 19.0),
                    child: FlutterLogo(
                      size: 40.0,
                    ),
                  ),
                  Text('Join Flutter and have fun'),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: "First Name", labelText: "First Name"),
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Please enter some text';
                      }
                    },
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: "Last Name", labelText: "Last Name"),
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Please enter some text';
                      }
                    },
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: "Phone Number", labelText: "Phone Number"),
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Please enter some text';
                      } else if (!isNumeric(value)) {
                        return 'Please enter a valid Phone number';
                      }
                    },
                  ),
                  TextFormField(
                    decoration: InputDecoration(
                        hintText: "Address", labelText: "Address"),
                    maxLines: 4,
                    validator: (value) {
                      if (value.isEmpty) {
                        return 'Please enter some text';
                      }
                    },
                  ),
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 10.0, vertical: 16.0),
                    child: RaisedButton(
                      onPressed: () {
                        // Validate will return true if the form is valid, or false if
                        // the form is invalid.
                        if (_formKey.currentState.validate()) {
                          // If the form is valid, we want to show a Snackbar
                          Scaffold.of(context)
                              .showSnackBar(SnackBar(
                                content: Text('Processing Data'),
                              ))
                              .closed
                              .then((SnackBarClosedReason reason) {
                            _opennewpage();
                          });
                        }
                      },
                      child: Text('Sign up'),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
  void _opennewpage() {
    Navigator.of(context).push(
      new MaterialPageRoute(
        builder: (BuildContext context) {
          return new Scaffold(
            appBar: new AppBar(
              title: new Text('Success'),
            ),
            body: new Center(
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: const EdgeInsets.symmetric(
                        horizontal: 8.0, vertical: 19.0),
                    child: Column(
                      children: [
                        Padding(
                          padding: const EdgeInsets.symmetric(
                              horizontal: 8.0, vertical: 19.0),
                          child: FlutterLogo(
                            size: 70.0,
                          ),
                        ),
                        Text(
                          'You have Successfully Signed with Flutter',
                          textAlign: TextAlign.center,
                          overflow: TextOverflow.ellipsis,
                          style: new TextStyle(fontWeight: FontWeight.w300),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          );
        },
      ),
    );
  }
}
bool isNumeric(String s) {
  try {
    return double.parse(s) != null;
  } catch (e) {
    return false;
  }
}
Hope this is useful to you.
Thanks,
Srikanth

Tags: Creating a Form in Flutter; Basic user form with validations in Flutter; Phone number validation in Flutter; showSnackBar example in Flutter;








0 Comments
Login to comment.
Recent Comments

Be the first to Comment. You can ask a Query or Share your toughts or Just say thanks.


© 2018 - Fluttercentral | Email to me - seven.srikanth@gmail.com