Flutter Web App Form Accept User Input

Flutter Web App Form :

Flutter web app form, web app is the new feature provided for developers till then flutter provides a interface to code apps for mobile apps on Android and iOS platforms.

But with the release of flutter 2.0 we got the stable web version of web support from flutter using which the same code which was used to develop is also used for web app development.

In our previous tutorial we have seen the introduction on flutter web app and in this tutorial we will see how to design a flutter web app form which works on mobile and web browser as well.

We will design a user interface such that we accept user information such as name, email, password and mobile number and print them once the submit button is pressed.

Flutter Web App Form Video Tutorial :

Go through the below tutorial for more detailed information.

Let’s start coding

main.dart :

Initialize with void main() considering default class MyApp()

void main(){
  runApp(MyApp());
}

MyApp is extending a StatelessWidget and debug banner is disabled

debugShowCheckedModeBanner: false,

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Form(),
    );
  }
}

Form() Class is extending a StatefulWidget so as to refresh the State of the class

class Form extends StatefulWidget {
  @override
  _FormState createState() => _FormState();
}

Define controllers for name, password, email and mobile number

final nameController = TextEditingController();
final passwordController = TextEditingController();
final emailController = TextEditingController();
final mobileNumberController = TextEditingController();

Return a Scaffold using which we can structure our app add a AppBar, body

Scaffold(
  appBar: AppBar(title: Text('Web Form'),),
  body: Container(

    child: 
  ),
);

Design a Text field using which we can accept user input with the help of ListTile widget

leading : Can add a icon to the field

title : can specify the form field here or can provide a default title

controller : used to fetch the data and access the field

ListTile(
  leading: Icon(Icons.account_circle),
  title: TextFormField(
    decoration: InputDecoration(
        hintText: 'username'
    ),
    controller: nameController,
  ),
),

Define the same for remaining fields password, email and mobile number.

Now define a button to tap and fetch the details once entered into the respective fields

TextButton(
    onPressed: (){}, 
    child: Text('Submit')
),

Inside onPressed specify the setState and print the data entered into fields

setState(() {

  print(nameController.text.toString());
  print(passwordController.text.toString());
  print(emailController.text.toString());
  print(mobileNumberController.text.toString());

});

Full Code :

Providing the full code for web integration

import 'package:flutter/material.dart';

void main(){
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Form(),
    );
  }
}

class Form extends StatefulWidget {
  @override
  _FormState createState() => _FormState();
}

class _FormState extends State<Form> {

  final nameController = TextEditingController();
  final passwordController = TextEditingController();
  final emailController = TextEditingController();
  final mobileNumberController = TextEditingController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Web Form'),),
      body: Container(

        child: Column(

          children: [

            ListTile(
              leading: Icon(Icons.account_circle),
              title: TextFormField(
                decoration: InputDecoration(
                    hintText: 'username'
                ),
                controller: nameController,
              ),
            ),

            ListTile(
              leading: Icon(Icons.lock),
              title: TextFormField(
                decoration: InputDecoration(
                    hintText: 'password'
                ),
                controller: passwordController,
              ),
            ),

            ListTile(
              leading: Icon(Icons.email),
              title: TextFormField(
                decoration: InputDecoration(
                    hintText: 'email id'
                ),
                controller: emailController,
              ),
            ),

            ListTile(
              leading: Icon(Icons.phone),
              title: TextFormField(
                decoration: InputDecoration(
                    hintText: 'mobile number'
                ),
                controller: mobileNumberController,
              ),
            ),

            TextButton(onPressed: (){

              setState(() {

                print(nameController.text.toString());
                print(passwordController.text.toString());
                print(emailController.text.toString());
                print(mobileNumberController.text.toString());
              });

            }, child: Text('Submit')),

          ],
        ),
      ),
    );
  }
}

Output :

The screen below depicts the usage of flutter web app form