Last active
February 21, 2020 10:13
-
-
Save wirasetiawan29/47a94e96be8427ae7c8241674c991ef7 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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. | |
); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
https://dartpad.dev/47a94e96be8427ae7c8241674c991ef7