Skip to content

Instantly share code, notes, and snippets.

@wirasetiawan29
Last active February 21, 2020 10:13
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save wirasetiawan29/47a94e96be8427ae7c8241674c991ef7 to your computer and use it in GitHub Desktop.
Save wirasetiawan29/47a94e96be8427ae7c8241674c991ef7 to your computer and use it in GitHub Desktop.
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Text Field Focus',
home: MyCustomForm(),
);
}
}
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
@override
_MyCustomFormState createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
// Define the focus node. To manage the lifecycle, create the FocusNode in
// the initState method, and clean it up in the dispose method.
FocusNode myFocusNode;
@override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
@override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Text Field Focus'),
),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
Container(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Personal Information',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
// The first text field is focused on as soon as the app starts.
TextFormField(
autofocus: true,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'First Name',
),
),
// The second text field is focused on when a user taps the
// FloatingActionButton.
SizedBox(height: 8),
TextFormField(
focusNode: myFocusNode,
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Last Name',
),
),
SizedBox(height: 8),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Birthdate',
suffixIcon: Icon(Icons.calendar_today),
),
),
SizedBox(height: 20),
Container(
padding: EdgeInsets.symmetric(vertical: 10.0),
child: Align(
alignment: Alignment.centerLeft,
child: Text(
'Company Information',
style: TextStyle(fontWeight: FontWeight.bold),
),
),
),
// The first text field is focused on as soon as the app starts.
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Company Name',
),
),
// The second text field is focused on when a user taps the
// FloatingActionButton.
SizedBox(height: 8),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Department',
),
),
SizedBox(height: 8),
TextFormField(
decoration: InputDecoration(
border: OutlineInputBorder(),
labelText: 'Currency',
suffixIcon: Icon(Icons.keyboard_arrow_down),
),
),
],
),
),
floatingActionButton: FloatingActionButton(
// When the button is pressed,
// give focus to the text field using myFocusNode.
onPressed: () => FocusScope.of(context).requestFocus(myFocusNode),
tooltip: 'Focus Second Text Field',
child: Icon(Icons.edit),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
@wirasetiawan29
Copy link
Author

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment