LAB 11

Activities
List of Experiments
 Creation of a user interface using Flutter widgets.
 Implementation of Selectable Text Widget, stack Widget, Textfeild widget and
alert box.
 Adjustment of padding, spacing, and alignment for better visual appearance.
 Testing the app on different devices and screen sizes to ensure
responsiveness.
 Identifying and debugging issues or errors encountered during testing.

What you will LEARN

 How to design user interfaces using Flutter widgets such as Selectable Text
Widget, stack Widget, Textfeild widget and alert box.
 how to arrange widgets, apply styling, and manage layout to create visually
appealing and functional user interfaces.
 Application testing on different devices.

SelectableText Widget
Many times you need to select or copy some text like when you are on a web browser it allows
us to select or copy any of the text without any issue but on mobile applications, it is not
possible. So at times, you need to manually copy or enter such texts. But in the Flutter, with the
help of the SelectableText Widget, you can copy or select the in-app texts by long pressing on
it. In Flutter the normal way of displaying the text is by using the Text Widget. But these texts
are not selectable. Instead, we can use SelectableText Widget. As the name suggests this
Widget provides us with a feature of selecting the text, which can come in handy to show links
or other texts which need to be copied.
Step 1: Create a Flutter application using the “flutter create app_name” command.
Step 2: Select and open the “main.dart” file.
Step 3: Below the MyApp widget creates a stateless widget.
Step 4: Finally create the scaffold and inside that create SelectableText Widget as shown
below.

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {

const MyApp({Key? key}) : super(key: key);
 // This is the root of your application
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const GFG(),
debugShowCheckedModeBanner: false,
);
}
}

// Creating a Stateless widget

// to display our Scaffold widget
class GFG extends StatelessWidget {
const GFG({Key? key}) : super(key: key);

// Creating the String text to store our text

final String text = "Welcome to GeeksForGeeks!";

@override
Widget build(BuildContext context) {
return Scaffold(
// Widget to center text in the app.
body: Center(
child: SelectableText(
text,
// Providing style to the text
style: TextStyle(fontSize: 30),
),
),
);
}
}
Output

 After long pressing on the GeeksForGeeks part of the text we can select it.
 Stack widget
Everybody knows the meaning of stack, i.e. on top of another. Exactly this widget serves in that
way we can put the widget on top of another.
Note: This is not similar to column widget, in column widget the children are in a column
fashion that is one after another not overlapping to each other, but in the stack widget case we
can see the widgets can be overlapped to each other.

 The first widget in the list of children is the base widget; subsequent
children are overlaid on top of that base widget.
 The stack can not be scrollable.

Example:

import 'package:flutter/material.dart';

class StackExample extends StatelessWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Stack Example - Blup'),
),
body: Center(
child: Stack(
alignment: Alignment.center,
children: [
Container(
color: Colors.blue,
width: 200,
height: 200,
),
Container(
color: Colors.green,
width: 150,
height: 150,
),
Container(
color: Colors.yellow,
width: 100,
height: 100,
 ),
Text(
'Stacked Layout',
style: TextStyle(
color: Colors.white,
fontSize: 20,
fontWeight: FontWeight.bold,
),
),
],
),
),
);
}
}

void main() {
runApp(MaterialApp(
home: StackExample(),
));
}
 TextField widget
TextField in Flutter is the most commonly used text input widget that allows users to collect
inputs from the keyboard into an app. We can use the TextField widget in building forms,
sending messages, creating search experiences, and many more. By default, Flutter decorated the
TextField with an underline. We can also add several attributes with TextField, such as label,
icon, inline hint text, and error text using an InputDecoration as the decoration. If we want to
remove the decoration properties entirely, it is required to set the decoration to null.

 The following code explains a demo example of TextFiled widget in

Flutter:

TextField (
 decoration: InputDecoration(
border: InputBorder.none,
labelText: 'Enter Name',
hintText: 'Enter Your Name'
),

);

o decoration: It is used to show the decoration around TextField.

o border: It is used to create a default rounded rectangle border around TextField.
o labelText: It is used to show the label text on the selection of TextField.
o hintText: It is used to show the hint text inside TextField.
o icon: It is used to add icons directly to the TextField.

We are going to see how to use TextField widget in the Flutter app through the following steps:

Step 1: Create a Flutter project in the IDE you used. Here, I am going to use Android Studio.

Step 2: Open the project in Android Studio and navigate to the lib folder. In this folder, open
the main.dart file and import the material.dart package as given below:

import 'package:flutter/material.dart';

Step 3: Next, call the main MyApp class using void main run app function and then create your
main widget class named as MyApp extends with StatefulWidget:

void main() => runApp( MyApp() );

class MyApp extends StatefulWidget { }

Step 4: Next, we need to create the Scaffold widget -> Column widget in the class widget build
area as given below:

class MyApp extends StatefulWidget {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
 ),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget> [

]
)
)
)
);
}
}

Step 5: Finally, create the TextField widget as the below code.

child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),

),

 Replace the following code in the main.dart file and see the output.

import 'package:flutter/material.dart';
void main() {
runApp(MaterialApp( home: MyApp(),));
}

class MyApp extends StatefulWidget {

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

class _State extends State<MyApp> {

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: EdgeInsets.all(15),
child: Column(
children: <Widget>[
Padding(
padding: EdgeInsets.all(15),
child: TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'User Name',
hintText: 'Enter Your Name',
),
),
),
Padding(
padding: EdgeInsets.all(15),
child: TextField(
obscureText: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Password',
hintText: 'Enter Password',
),
),
),
ElevatedButton(

child: Text('Sign In'),

onPressed: (){},
)
],
)
)
);
}
}

Output
 When we run the application in android emulator, we should get UI similar to the following
screenshot:
 If we click inside the text box, we can see that a keyboard has appeared from the bottom
of the screen, the label goes into the top left corner of the border, and the hint text shown
into the field. The below screenshot explains it more clearly:
How to retrieve the value of a TextField?
We know that Flutter does not have an ID like in Android for the TextField widget. Flutter
allows the user to retrieve the text in mainly two ways: First is the onChanged method, and
another is the controller method. Both are discussed below:

1. OnChanged method: It is the easiest way to retrieve the text field value. This method store
the current value in a simple variable and then use it in the TextField widget. Below is the
sample example:

String value = "";

TextField(
onChanged: (text) {
 value = text;
},
)

2. Controller method: It is a popular method to retrieve text field value

using TextEditingController. It will be attached to the TextField widget and then listen to
change and control the widget's text value. Below is the sample code:

TextEditingController mycontroller = TextEditingController();

TextField(
controller: mycontroller,
)

 Sample code for listening to the changes.

controller.addListener(() {
// Do something here
});

 Sample code to get or set the value.

print(controller.text); // Print current value

controller.text = "Demo Text"; // Set new value

Let us see the second way in detail to retrieve the text field value in Flutter application with the
help of following steps:

1. Create a TextEditingController.
2. Attach the TextEditingController to a TextField using controller property.
3. Retrieve the value of the TextField by using the text() method provided by the
TextEditingController.

Replace the below code in the main.dart file. In this example, we are going to display the alert
dialog with the current value of the text field when the user taps on a button.
import 'package:flutter/material.dart';

void main() {
runApp(MyApp());
}
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: MyHomePage(),
);
}
}

class MyHomePage extends StatefulWidget {

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

class _MyHomePageState extends State<MyHomePage> {

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

@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Flutter TextField Example'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: <Widget>[
TextField(
controller: nameController,
decoration: InputDecoration(
labelText: 'Enter your name',
hintText: 'John Doe',
prefixIcon: Icon(Icons.person),
border: OutlineInputBorder(),
),
),
SizedBox(height: 20),
TextField(
controller: passwordController,
obscureText: true, // This makes the text obscure for password
fields
decoration: InputDecoration(
labelText: 'Enter your password',
hintText: 'Password',
prefixIcon: Icon(Icons.lock),
border: OutlineInputBorder(),
),
),
SizedBox(height: 20),
ElevatedButton(
child: Text('Sign In'),
onPressed: () {
showDialog(
context: context,
builder: (context) {
 return AlertDialog(
title: Text("Alert Message"),
content: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text('Name: ${nameController.text}'),
Text('Password: ${passwordController.text}'),
],
),
actions: <Widget>[
TextButton(
child: Text('OK'),
onPressed: () {
Navigator.of(context).pop();
},
)
],
);
},
);
},
),
],
),
),
);
}

@override
void dispose() {
nameController.dispose();
passwordController.dispose();
super.dispose();
}
}

Output:
 When we run the application in android emulator, we should get UI similar to the
following screenshot:
Click inside the text box and add values, as shown in the field. When we press the sign-in
button, an alert dialog box appeared containing the text that the user has entered into the field. If
we click on the OK button, the alert dialog will disappear. Look into the below screenshot:
 Lab Task
1. Create a login, Signup, and forget password screen by using Flutter Widgets.
2. Create a dialog box while clicking on the button and show data in the dialog box
accordingly.