1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
// Copyright 2014 The Flutter Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// Flutter code sample for [AutofillGroup].
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
static const String _title = 'Flutter Code Sample';
@override
Widget build(BuildContext context) {
return MaterialApp(
title: _title,
home: Scaffold(
appBar: AppBar(title: const Text(_title)),
body: const MyStatefulWidget(),
),
);
}
}
class MyStatefulWidget extends StatefulWidget {
const MyStatefulWidget({super.key});
@override
State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}
class _MyStatefulWidgetState extends State<MyStatefulWidget> {
bool isSameAddress = true;
final TextEditingController shippingAddress1 = TextEditingController();
final TextEditingController shippingAddress2 = TextEditingController();
final TextEditingController billingAddress1 = TextEditingController();
final TextEditingController billingAddress2 = TextEditingController();
final TextEditingController creditCardNumber = TextEditingController();
final TextEditingController creditCardSecurityCode = TextEditingController();
final TextEditingController phoneNumber = TextEditingController();
@override
Widget build(BuildContext context) {
return ListView(
children: <Widget>[
const Text('Shipping address'),
// The address fields are grouped together as some platforms are
// capable of autofilling all of these fields in one go.
AutofillGroup(
child: Column(
children: <Widget>[
TextField(
controller: shippingAddress1,
autofillHints: const <String>[AutofillHints.streetAddressLine1],
),
TextField(
controller: shippingAddress2,
autofillHints: const <String>[AutofillHints.streetAddressLine2],
),
],
),
),
const Text('Billing address'),
Checkbox(
value: isSameAddress,
onChanged: (bool? newValue) {
if (newValue != null) {
setState(() {
isSameAddress = newValue;
});
}
},
),
// Again the address fields are grouped together for the same reason.
if (!isSameAddress)
AutofillGroup(
child: Column(
children: <Widget>[
TextField(
controller: billingAddress1,
autofillHints: const <String>[
AutofillHints.streetAddressLine1,
],
),
TextField(
controller: billingAddress2,
autofillHints: const <String>[
AutofillHints.streetAddressLine2,
],
),
],
),
),
const Text('Credit Card Information'),
// The credit card number and the security code are grouped together
// as some platforms are capable of autofilling both fields.
AutofillGroup(
child: Column(
children: <Widget>[
TextField(
controller: creditCardNumber,
autofillHints: const <String>[AutofillHints.creditCardNumber],
),
TextField(
controller: creditCardSecurityCode,
autofillHints: const <String>[
AutofillHints.creditCardSecurityCode,
],
),
],
),
),
const Text('Contact Phone Number'),
// The phone number field can still be autofilled despite lacking an
// `AutofillScope`.
TextField(
controller: phoneNumber,
autofillHints: const <String>[AutofillHints.telephoneNumber],
),
],
);
}
}