Form Submission Page in Flutter

There are many ways to submit user input data in Flutter. the most used way is using TestFileds.Textfiles input different types of numbers, strings, etc. Test Fields require a controller of every text field. Form in Flutter does not use a text controller to store data of Mobile application.

let's take one example of submit data and retry data on the text fields


Step-by-Step Implementation

Step 1: Create a New Project in Android Studio (File >new flutter project)

Step 2: Adding material package

Import method the runApp method in the main function call first while run the application.

 import 'package:flutter/material.dart';

 void main() {

     runApp(RunMyApp());

 }

Step 3: Creating a stateless widget  

We can create a stateless widget that contains MaterialApp widget,AppBar,etc.

 class RunMyApp extends StatelessWidget {

     const RunMyApp({super.key});  

    @override

    Widget build(BuildContext context) {

    return MaterialApp(home);

     }

 }

Step 4: Final code 
 import 'package:flutter/material.dart';

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

class HomeScreen extends StatefulWidget {
@override
_MyAppState createState() => _MyAppState();
}

class _MyAppState extends State<HomeScreen> {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: "FormValidation",
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {
@override
_MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
final GlobalKey<FormState> _formKey = GlobalKey();
String email = "";
String password = "";

void _submit() {
print('Name: $email'); // Print the name
print('Email: $password');
}

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(" Login " ),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
Form(
key: _formKey,
child: Column(
children: <Widget>[
TextFormField(
decoration: InputDecoration(labelText: 'E-Mail'),
keyboardType: TextInputType.emailAddress,
onChanged: (value) {
setState(() {
email = value!;
});

print("email$email");

},
validator: (value) {
if (value!.isEmpty || !value.contains('@')) {
return 'Invalid email!';
}
return null;
},
),
TextFormField(
decoration: InputDecoration(labelText: 'password'),
keyboardType: TextInputType.visiblePassword,
obscureText: true,
validator: (value) {
if (value!.isEmpty && value.length < 7) {
return 'Invalid password!';
}
return null;
},
onChanged: (value) {
setState(() {
password = value!;
});

print(password);

},
),
ElevatedButton(
onPressed: _submit,
child: Text("submit"),
),
],
),
),

SizedBox(
height: 20,
),
Column(
children: <Widget>[
email.isEmpty ? Text("No data") : Text(email),
SizedBox(
height: 10,
),
password.isEmpty ? Text("No Data") : Text(password),
],
)
],
),
),
);
}
}

 

Step 5: Output of above example 


Happy coding!

365Bloggy June 3, 2024
Share this post
Tags
SUBSCRIBE THIS FORM


Archive