Scribd
Upload
3 views

Mobile_App_Development_Practicals

The document contains two practical Flutter applications demonstrating the use of common widgets and form validation. The first app showcases basic widgets like Text, Image, TextField, and ElevatedButton, while the second app creates an interactive form with email and password validation. Both applications utilize Flutter's Material design framework and include user input handling.

Uploaded by

omkar.a.kadam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
3 views

Mobile_App_Development_Practicals

The document contains two practical Flutter applications demonstrating the use of common widgets and form validation. The first app showcases basic widgets like Text, Image, TextField, and ElevatedButton, while the second app creates an interactive form with email and password validation. Both applications utilize Flutter's Material design framework and include user input handling.

Uploaded by

omkar.a.kadam
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 3

Practical 1: Design Flutter UI by Including Common Widgets

This app demonstrates basic Flutter widgets such as Text, Image, TextField, and ElevatedButton.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Widget Demo',
home: Scaffold(
appBar: AppBar(
title: Text('Common Flutter Widgets'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Text('Hello Flutter!', style: TextStyle(fontSize: 24, fontWeight:
FontWeight.bold)),
SizedBox(height: 16),
Image.network('https://flutter.dev/images/flutter-logo-sharing.png',
height: 100),
SizedBox(height: 16),
TextField(
decoration: InputDecoration(labelText: 'Enter your name', border:
OutlineInputBorder()),
),
SizedBox(height: 16),
ElevatedButton(onPressed: () { print("Button Pressed"); }, child:
Text('Click Me')),
],
),
),
),
);
}
}
Practical 2: Create an Interactive Form using Form Widget
This app creates a form with validation for email and password fields.

import 'package:flutter/material.dart';

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

class FormApp extends StatelessWidget {


@override
Widget build(BuildContext context) {
return MaterialApp(home: FormScreen());
}
}

class FormScreen extends StatefulWidget {


@override
_FormScreenState createState() => _FormScreenState();
}

class _FormScreenState extends State<FormScreen> {


final _formKey = GlobalKey<FormState>();
String email = '';
String password = '';

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Interactive Form')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: Column(
children: [
TextFormField(
decoration: InputDecoration(labelText: 'Email'),
validator: (value) => value == null || !value.contains('@') ? 'Enter a
valid email' : null,
onSaved: (value) => email = value!,
),
SizedBox(height: 16),
TextFormField(
decoration: InputDecoration(labelText: 'Password'),
obscureText: true,
validator: (value) => value!.length < 6 ? 'Password must be at least 6
characters' : null,
onSaved: (value) => password = value!,
),
SizedBox(height: 16),
ElevatedButton(
child: Text('Submit'),
onPressed: () {
if (_formKey.currentState!.validate()) {
_formKey.currentState!.save();
print('Email: $email, Password: $password');
ScaffoldMessenger.of(context).showSnackBar(SnackBar(content:
Text('Form submitted')));
}
},
),
],
),
),
),
);
}
}

You might also like