free geoip
21

Handling User Input in Dart with Android Studio

Handling user input is a crucial part of any interactive application. In Dart, especially when working with Flutter using Android…

Handling user input is a crucial part of any interactive application. In Dart, especially when working with Flutter using Android Studio, capturing and processing user input is both straightforward and efficient. Whether you’re creating a login form, feedback submission, or dynamic UI interaction, Dart provides flexible tools to manage text fields, buttons, and form validation.

Handle User Input in Dart

Handle User Input in Dart

In this guide, you’ll learn how to:

  • Capture user input using TextField
  • Manage input using TextEditingController
  • Validate input fields
  • Respond to form submission

We will build a simple Flutter app that accepts a user’s name and email address, then displays it after submission. Make sure your Flutter and Dart environment is properly set up in Android Studio. If not, check out the official Flutter installation guide.

Step 1: Create a New Flutter Project

In Android Studio:

  1. Go to File > New > New Flutter Project.
  2. Choose Flutter Application, name your project, and click Finish.

Step 2: Main UI Code (main.dart)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import 'package:flutter/material.dart';
import 'user_input_form.dart';
void main() {
runApp(const MyApp());
}
class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'User Input Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const UserInputForm(),
);
}
}
import 'package:flutter/material.dart'; import 'user_input_form.dart'; void main() { runApp(const MyApp()); } class MyApp extends <a href="https://aliendro.id/create-ui-with-statelesswidget-in-dart/">StatelessWidget</a> { const MyApp({super.key}); @override Widget build(BuildContext context) { return MaterialApp( title: 'User Input Demo', theme: ThemeData( primarySwatch: Colors.blue, ), home: const UserInputForm(), ); } }
import 'package:flutter/material.dart';
import 'user_input_form.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'User Input Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const UserInputForm(),
    );
  }
}

Step 3: Create User Input Form Class (user_input_form.dart)

Plain text
Copy to clipboard
Open code in new window
EnlighterJS 3 Syntax Highlighter
import 'package:flutter/material.dart';
class UserInputForm extends <a href="https://aliendro.id/statefulwidget-vs-statelesswidget-in-dart-guide/">StatefulWidget</a> {
const UserInputForm({super.key});
@override
State<UserInputForm> createState() => _UserInputFormState();
}
class _UserInputFormState extends State<UserInputForm> {
final _formKey = GlobalKey<FormState>();
final _nameController = TextEditingController();
final _emailController = TextEditingController();
String _submittedData = '';
void _submitForm() {
if (_formKey.currentState!.validate()) {
setState(() {
_submittedData =
'Name: ${_nameController.text}\nEmail: ${_emailController.text}';
});
}
}
@override
void dispose() {
_nameController.dispose();
_emailController.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Handle User Input'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
controller: _nameController,
decoration: const InputDecoration(labelText: 'Name'),
validator: (value) {
if (value == null || value.isEmpty) {
return 'Please enter your name';
}
return null;
},
),
TextFormField(
controller: _emailController,
decoration: const InputDecoration(labelText: 'Email'),
validator: (value) {
if (value == null ||
value.isEmpty ||
!value.contains('@')) {
return 'Please enter a valid email';
}
return null;
},
),
const SizedBox(height: 20),
ElevatedButton(
onPressed: _submitForm,
child: const Text('Submit'),
),
const SizedBox(height: 20),
Text(
_submittedData,
style: const TextStyle(fontSize: 16),
),
],
),
),
),
);
}
}
import 'package:flutter/material.dart'; class UserInputForm extends <a href="https://aliendro.id/statefulwidget-vs-statelesswidget-in-dart-guide/">StatefulWidget</a> { const UserInputForm({super.key}); @override State<UserInputForm> createState() => _UserInputFormState(); } class _UserInputFormState extends State<UserInputForm> { final _formKey = GlobalKey<FormState>(); final _nameController = TextEditingController(); final _emailController = TextEditingController(); String _submittedData = ''; void _submitForm() { if (_formKey.currentState!.validate()) { setState(() { _submittedData = 'Name: ${_nameController.text}\nEmail: ${_emailController.text}'; }); } } @override void dispose() { _nameController.dispose(); _emailController.dispose(); super.dispose(); } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Handle User Input'), ), body: Padding( padding: const EdgeInsets.all(16.0), child: Form( key: _formKey, child: Column( children: [ TextFormField( controller: _nameController, decoration: const InputDecoration(labelText: 'Name'), validator: (value) { if (value == null || value.isEmpty) { return 'Please enter your name'; } return null; }, ), TextFormField( controller: _emailController, decoration: const InputDecoration(labelText: 'Email'), validator: (value) { if (value == null || value.isEmpty || !value.contains('@')) { return 'Please enter a valid email'; } return null; }, ), const SizedBox(height: 20), ElevatedButton( onPressed: _submitForm, child: const Text('Submit'), ), const SizedBox(height: 20), Text( _submittedData, style: const TextStyle(fontSize: 16), ), ], ), ), ), ); } }
import 'package:flutter/material.dart';

class UserInputForm extends StatefulWidget {
  const UserInputForm({super.key});

  @override
  State<UserInputForm> createState() => _UserInputFormState();
}

class _UserInputFormState extends State<UserInputForm> {
  final _formKey = GlobalKey<FormState>();
  final _nameController = TextEditingController();
  final _emailController = TextEditingController();

  String _submittedData = '';

  void _submitForm() {
    if (_formKey.currentState!.validate()) {
      setState(() {
        _submittedData =
            'Name: ${_nameController.text}\nEmail: ${_emailController.text}';
      });
    }
  }

  @override
  void dispose() {
    _nameController.dispose();
    _emailController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Handle User Input'),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: Column(
            children: [
              TextFormField(
                controller: _nameController,
                decoration: const InputDecoration(labelText: 'Name'),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter your name';
                  }
                  return null;
                },
              ),
              TextFormField(
                controller: _emailController,
                decoration: const InputDecoration(labelText: 'Email'),
                validator: (value) {
                  if (value == null ||
                      value.isEmpty ||
                      !value.contains('@')) {
                    return 'Please enter a valid email';
                  }
                  return null;
                },
              ),
              const SizedBox(height: 20),
              ElevatedButton(
                onPressed: _submitForm,
                child: const Text('Submit'),
              ),
              const SizedBox(height: 20),
              Text(
                _submittedData,
                style: const TextStyle(fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Explanation

  • TextFormField is used to capture user input.
  • TextEditingController allows the app to read and modify the contents of the text fields.
  • Validation is handled through the validator parameter to ensure the fields are not empty.
  • After submission, the result is displayed in a Text widget.

This example demonstrates the basics of handling user input in Dart with Flutter, structured properly for Android Studio projects. You can enhance this by integrating backend APIs, local storage, or more complex form fields.

rysasahrial

Leave a Reply

Your email address will not be published. Required fields are marked *