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.

![](https://www.fluttercentral.com/Uploads/64d40c7e-06e7-44f3-bdef-6df56cbace39.gifwidth="50%height="auto](

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.

color: #dcdcaa;](runApp(color: #4ec9b0;](MyApp());

color: #569cd6;](class color: #4ec9b0;](MyApp color: #569cd6;](extends color: #4ec9b0;](StatelessWidget { color: #569cd6;](@override

color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #569cd6;](final appTitle = color: #ce9178;]('Form Validation Demo'; color: #c586c0;](return color: #4ec9b0;](MaterialApp( title: appTitle, home: color: #4ec9b0;](Scaffold( color: #6a9955;](// appBar: AppBar(

    color: #6a9955;](//   title: Text(appTitle),
color: #6a9955;](// ),

body: color: #4ec9b0;](MyCustomForm(),

),
);

} }

color: #569cd6;](class color: #4ec9b0;](MyCustomForm color: #569cd6;](extends color: #4ec9b0;](StatefulWidget { color: #569cd6;](@override

color: #4ec9b0;](MyCustomFormState color: #dcdcaa;](createState() }

color: #6a9955;](// Create a corresponding State class. This class will hold the data related to

color: #6a9955;](// the form.

color: #569cd6;](class color: #4ec9b0;](MyCustomFormState color: #569cd6;](extends color: #4ec9b0;](State { color: #6a9955;](// Create a global key that will uniquely identify the Form widget and allow

color: #6a9955;](// us to validate the form

color: #6a9955;](//

color: #6a9955;](// Note: This is a GlobalKey, not a GlobalKey!

color: #569cd6;](final _formKey = color: #4ec9b0;](GlobalKey(); color: #569cd6;](@override

color: #4ec9b0;](Widget color: #dcdcaa;](build(color: #4ec9b0;](BuildContext context) { color: #6a9955;](// Build a Form widget using the _formKey we created above

color: #c586c0;](return color: #4ec9b0;](SingleChildScrollView(
child: color: #4ec9b0;](Form(
key: _formKey,
child: color: #4ec9b0;](Column(
crossAxisAlignment: color: #4ec9b0;](CrossAxisAlignment.start,
children: [
color: #4ec9b0;](Padding(
padding:
color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0),
child: color: #4ec9b0;](Column(
children: [
color: #4ec9b0;](Padding(
padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(
horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0),
child: color: #4ec9b0;](FlutterLogo(
size: color: #b5cea8;](40.0,
),
),
color: #4ec9b0;](Text(color: #ce9178;]('Join Flutter and have fun'),
color: #4ec9b0;](TextFormField(
decoration: color: #4ec9b0;](InputDecoration(
hintText: color: #ce9178;]("First Name", labelText: color: #ce9178;]("First Name"),
validator: (value) {
color: #c586c0;](if (value.isEmpty) {
color: #c586c0;](return color: #ce9178;]('Please enter some text';
}
},
),
color: #4ec9b0;](TextFormField(
decoration: color: #4ec9b0;](InputDecoration(
hintText: color: #ce9178;]("Last Name", labelText: color: #ce9178;]("Last Name"),
validator: (value) {
color: #c586c0;](if (value.isEmpty) {
color: #c586c0;](return color: #ce9178;]('Please enter some text';
}
},
),
color: #4ec9b0;](TextFormField(
decoration: color: #4ec9b0;](InputDecoration(
hintText: color: #ce9178;]("Phone Number", labelText: color: #ce9178;]("Phone Number"),
validator: (value) {
color: #c586c0;](if (value.isEmpty) {
color: #c586c0;](return color: #ce9178;]('Please enter some text';
} color: #c586c0;](else color: #c586c0;](if (!color: #dcdcaa;](isNumeric(value)) {
color: #c586c0;](return color: #ce9178;]('Please enter a valid Phone number';
}
},
),
color: #4ec9b0;](TextFormField(
decoration: color: #4ec9b0;](InputDecoration(
hintText: color: #ce9178;]("Address", labelText: color: #ce9178;]("Address"),
maxLines: color: #b5cea8;](4,
validator: (value) {
color: #c586c0;](if (value.isEmpty) {
color: #c586c0;](return color: #ce9178;]('Please enter some text';
}
},
),
color: #4ec9b0;](Padding(
padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric(
horizontal: color: #b5cea8;](10.0, vertical: color: #b5cea8;](16.0),
child: color: #4ec9b0;](RaisedButton(
onPressed: () {
color: #6a9955;](// Validate will return true if the form is valid, or false if
                color: #6a9955;](// the form is invalid.

                color: #c586c0;](if (_formKey.currentState.color: #dcdcaa;](validate()) {
                  color: #6a9955;](// If the form is valid, we want to show a Snackbar

                  color: #4ec9b0;](Scaffold.color: #dcdcaa;](of(context)
                      .color: #dcdcaa;](showSnackBar(color: #4ec9b0;](SnackBar(
                        content: color: #4ec9b0;](Text(color: #ce9178;]('Processing Data'),
                      ))
                      .closed
                      .color: #dcdcaa;](then((color: #4ec9b0;](SnackBarClosedReason reason) {
                    color: #dcdcaa;](_opennewpage();
                  });
                }
              },
              child: color: #4ec9b0;](Text(color: #ce9178;]('Sign up'),
            ),
          ),
        ],
      ),
    ),
  ],
),

),
);

} color: #569cd6;](void color: #dcdcaa;](_opennewpage() { color: #4ec9b0;](Navigator.color: #dcdcaa;](of(context).color: #dcdcaa;](push( color: #c586c0;](new color: #4ec9b0;](MaterialPageRoute( builder: (color: #4ec9b0;](BuildContext context) { color: #c586c0;](return color: #c586c0;](new color: #4ec9b0;](Scaffold( appBar: color: #c586c0;](new color: #4ec9b0;](AppBar( title: color: #c586c0;](new color: #4ec9b0;](Text(color: #ce9178;]('Success'), ), body: color: #c586c0;](new color: #4ec9b0;](Center( child: color: #c586c0;](new color: #4ec9b0;](Column( mainAxisAlignment: color: #4ec9b0;](MainAxisAlignment.center, children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric( horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](Column( children: [ color: #4ec9b0;](Padding( padding: color: #569cd6;](const color: #4ec9b0;](EdgeInsets.color: #dcdcaa;](symmetric( horizontal: color: #b5cea8;](8.0, vertical: color: #b5cea8;](19.0), child: color: #4ec9b0;](FlutterLogo( size: color: #b5cea8;](70.0, ), ), color: #4ec9b0;](Text( color: #ce9178;]('You have Successfully Signed with Flutter', textAlign: color: #4ec9b0;](TextAlign.center, overflow: color: #4ec9b0;](TextOverflow.ellipsis, style: color: #c586c0;](new color: #4ec9b0;](TextStyle(fontWeight: color: #4ec9b0;](FontWeight.w300), ), ], ), ), ], ), ), ); }, ), ); } }

color: #4ec9b0;](bool color: #dcdcaa;](isNumeric(color: #4ec9b0;](String s) { color: #c586c0;](try { color: #c586c0;](return color: #4ec9b0;](double.color: #dcdcaa;](parse(s) != color: #569cd6;](null; } color: #c586c0;](catch (e) }

` 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