CSE-4078

MOBILE APPLICATION
DEVELOPMENT
LECTURES – WEEK 13

SARA MASOOD
TEXTFIELD

 TextField is the most commonly used text input widget.

 By default, a TextField is decorated with an underline
 You can add a label, icon, inline hint text, and error text by supplying an InputDecoration as the decoration
property of the TextField
 Create and style a text field | Flutter
TEXTFIELD

TextField(
decoration: InputDecoration(
border: OutlineInputBorder(),
hintText: 'Enter a search term',
),
),
INPUTDECORATION CLASS

decoration: InputDecoration(
icon: Icon(Icons.send),
hintText: 'Hint Text',
helperText: 'Helper Text',
counterText: '0 characters',
border: OutlineInputBorder(),
),

InputDecoration class - material library - Dart API (flutter.dev)

TEXTFORMFIELD

TextFormField(
decoration: const InputDecoration(
border: UnderlineInputBorder(),
labelText: 'Enter your username',
),
),

Create and style a text field | Flutter

HANDLE CHANGES TO A TEXT FIELD

 Supply an onChanged() callback to a TextField or a TextFormField.

 Handle changes to a text field | Flutter
HANDLE CHANGES TO A TEXT FIELD

TextField(
onChanged: (text) {
print('First text field: $text');
},
),
DROPDOWNBUTTON

 A material design button for selecting from a list of items.

PASSING DATA BACK TO PAGES

 Navigator.pop(context, true);
RECEIVING DATA AT MAIN PAGE

result = await Navigator.push(

context,
MaterialPageRoute(
builder: (BuildContext context) => const MyPage(),
),
);