Forms in Flutter (Validator and UI) 

How to create a form Widget with validators in 3 simple steps





I. C8 Global key in a Stateful Widget



II. Add Validator to TextFormField Widget



III. With Form Key, see Current State and Invoke the validate method



Step I: C8 Global key in a Stateful Widget



class MyCustomFormState extends State<MyCustomForm> {



  final _formKey = GlobalKey<FormState>();



  @override



  Widget build(BuildContext context) {



    return Form(



      key: _formKey,



      child: HomePage());}}






Step II: Add Validator to TextFormField Widget



TextFormField(



  validator: (form_value) {



    if (form_value.isEmpty) {



      return 'Please enter some text'}



    return null; },);






Step III: With Form Key, see Current State and Invoke the validate method



RaisedButton(



  onPressed: () {



    if (_formKey.currentState.validate()) {



      Scaffold.of(context).showSnackBar(SnackBar(content: Text('Do some processing'))); }},



  child: Text('Submit'),);














Other Widget for Forms
Most app would have forms for user to input data.  As such, it is common to come across the following elements.

 Dropdown List/Box (DropdownButton Class)

 Dropdown List/Box is known as Dropdown Button in Flutter.

 Separately outside dropdownButton(), in a Var:
Var _list = ['cat', 'dog'];

items: _list.map((String value) {
  return DropdownMenuItem<String>(
    value: value,
    child: Text(value),
  );
}).toList()

In "item" of dropdownbutton() [Official Doc]: 



child: DropdownButton<String> (
    hint: Text("Type of Task"),
    value: dropdownValue,
    onChanged: (String newValue) {
      setState(() {
        dropdownValue = newValue;
      });
    },
    items: <String>['one','two','three','four'].map<DropdownMenuItem<String>>((String value) {
      return DropdownMenuItem<String>(
        value: value,
        child: Text(value),
      );
    }).toList(),
    ),







Expanded Widget


Make a child fill all available spaces and divide available spaces between multiple children (if any)


























































Comments











Post a Comment























Popular posts from this blog









Flutter Widget 101 Part 1 (Basic of Flutters, Layouts, Rows and Columns)




















Image







 1. What every programme starts with  void main() => runApp( new MyApp());    "=>" is an operator  and it  denotes   { return  expr ; } .  () denotes method  runApp will run MyApp() which is a widget.   Besides running MyApp(), you can also play with runApp() function by doing the following:   new Text(). Do remember to include the TextDirection. Text will appear on the top left hand corner of the screen.    void main() {    runApp(       new Text( 'Hello World' ,textDirection: TextDirection. ltr ,)); }      Make it centralised in the center through the following.      void main() =>   runApp(     new Center(         child: new Text( 'Hello World' ,textDirection: TextDirection. ltr ,)     )   );     2.Declaring App/Widget to be run in runApp()   void main() => runApp(MyApp()); class MyApp extends StatelessWidget{   @override   Widget build(BuildContext context) {     // TODO: implement build     return null ;   }  }     extends is the inheriting of...








Read more










Setting up Terminal in Android Studio for Flutter and Bash Profile (For Mac)





















Does your Commands in Android Studio not worked?   Fret not, all you need to do is the following from Command Prompt:   1. Do you have a Bash Profile?]  Go into your  user folder in finder . The .bash_profile file should be findable there. ->  HD/Users/[USERNAME]  To reveal hidden file, press: Command + Shift + .   nano .bashprofile or nano .bash_profile   2. Paste the correct directory   export PATH=~/ Users/rigmiklos/Documents/ flutter/bin:$PATH   Red Text: Directory contain flutter folder   Hint for Mac User: Double tap on the Flutter.exe in Flutter>Bin>Flutter, and press"Get Info" to get Directory.   3. Ctrl + X to exit (No, this is not for default paste function)   4. Press Y to save changes.   5. To reload  source .bashprofile   Advance Reading for Bash Profile  Official Doc for Setting up   To navigate around Mac Command prompt:  ls: show folders  cd "folder name": to change directory   Solution:  Run Flutter Doctor manually or by Terminal   / Users/...








Read more










Flutter Widget 101 Part 5 (Snackbars, Context, Builder and Key)





















 1. Aim   Through Snackbar, understand Context and how to use builder to access any context of a widget.   2.Snackbar   Code from Codelab  If you use Scaffold.of(context), there will be Context Error    "Scaffold.of() called with a context that does not contain a Scaffold"       import 'package:flutter/material.dart' ;   void main() {   runApp( new MaterialApp(home: new SnackApp())); }  class SnackApp extends StatefulWidget {   @override   _SnackAppState createState() => _SnackAppState(); }  class _SnackAppState extends State<SnackApp> {   @override   Widget build(BuildContext context) {     return new Scaffold(       appBar: new AppBar(         title: new Text( "Snackbar exercise" ),       ),       body:          new Center(           child: new RaisedButton(              onPressed: (){               final snackBar = SnackBar(content: Text( 'Yay! A SnackBar!' ));               Scaffold. of (context).showSnackBar(snackBar);             },   ...








Read more