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









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 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










Flutter Widget 101 Part 4 (Navigation and Drawers)





















 1. Drawer  Official Doc    Material Design has 2 mode of navigation, Tabs or/and Drawer.  Drawer slide in horizontally   Use ListView (Scrollable) or Column as Child   ListTitle for each single row  Details of User can be displayed with DrawerHeader , UserAccountsDrawerHeader    onTap Behaviour can be set   Wrapper: Material App > Scaffold > Drawer > ListView    Drawer: When tapped on row, will change Text in Main Page  void main(){   runApp( new MaterialApp(home: new DrawerTemp()),); }  class DrawerTemp extends StatefulWidget {   @override   _DrawerTempState createState() => _DrawerTempState(); }  class _DrawerTempState extends State<DrawerTemp> {    String TextValue = "Original" ;    @override   Widget build(BuildContext context) {     return Scaffold(       appBar: new AppBar(         title: new Text( "Drawer Test" ),         backgroundColor: Colors. lightBlueAccent ,       ),       drawer: new Drawer(                  child: new ListView(     ...








Read more