I am new to Flutter/Firebase/Firestore etc.. so I am struggling a bit. I want to grab the data from the documents in my ‘users’ collection in Firestore and display it in my account information page. I have spent hours messing around with this and I am stuck. If anybody could help me out that would be wonderful!
Here are some samples of what my code, app, and firestore look like.
Code:
signup.dart – this is the page that creates the doc in Firebase on signup
JavaScript
x
268
268
1
class SignUp extends StatefulWidget {2
const SignUp({Key? key}) : super(key: key);3
4
@override5
State<SignUp> createState() => _SignUpState();6
}7
8
class _SignUpState extends State<SignUp> {9
var emailController = TextEditingController();10
var passwordController = TextEditingController();11
/* var docId = FirebaseFirestore.instance.collection('users').doc().id; */12
final TextEditingController _usernameController = TextEditingController();13
final TextEditingController _phoneNumberController = TextEditingController();14
final TextEditingController _companyNameController = TextEditingController();15
final FirebaseAuth auth = FirebaseAuth.instance;16
17
@override18
Widget build(BuildContext context) {19
20
String docId;21
docId = emailController.text;22
23
final User? user = auth.currentUser;24
double w = MediaQuery.of(context).size.width;25
double h = MediaQuery.of(context).size.height;26
return Scaffold(27
resizeToAvoidBottomInset: false,28
backgroundColor: Colors.white,29
body: Column(30
children: [31
Container(32
width: w,33
height: h * 0.27,34
decoration: const BoxDecoration(35
image: DecorationImage(36
image: AssetImage("assets/loginsignupheader.png"),37
fit: BoxFit.fitWidth,38
),39
),40
),41
Container(42
margin: const EdgeInsets.only(left: 30, right: 20),43
width: w,44
child: Column(45
crossAxisAlignment: CrossAxisAlignment.center,46
children: [47
const Text(48
'Sign up for an account',49
style: TextStyle(fontSize: 25, color: Colors.grey),50
),51
const SizedBox(height: 35),52
Container(53
decoration: BoxDecoration(54
color: Colors.white,55
borderRadius: BorderRadius.circular(30),56
boxShadow: [57
BoxShadow(58
blurRadius: 10,59
spreadRadius: 7,60
offset: const Offset(1, 1),61
color: Colors.grey.withOpacity(0.2))62
]),63
child: TextField(64
controller: _usernameController,65
decoration: InputDecoration(66
hintText: 'Username',67
prefixIcon: const Icon(Icons.person),68
focusedBorder: OutlineInputBorder(69
borderRadius: BorderRadius.circular(30),70
borderSide: const BorderSide(71
color: Colors.white, width: 1.0)),72
enabledBorder: OutlineInputBorder(73
borderRadius: BorderRadius.circular(30),74
borderSide: const BorderSide(75
color: Colors.white, width: 1.0)),76
border: OutlineInputBorder(77
borderRadius: BorderRadius.circular(30),78
),79
),80
),81
),82
const SizedBox(height: 35),83
Container(84
decoration: BoxDecoration(85
color: Colors.white,86
borderRadius: BorderRadius.circular(30),87
boxShadow: [88
BoxShadow(89
blurRadius: 10,90
spreadRadius: 7,91
offset: const Offset(1, 1),92
color: Colors.grey.withOpacity(0.2))93
]),94
child: TextField(95
controller: _companyNameController,96
decoration: InputDecoration(97
hintText: 'Company Name',98
prefixIcon: const Icon(Icons.business_center),99
focusedBorder: OutlineInputBorder(100
borderRadius: BorderRadius.circular(30),101
borderSide: const BorderSide(102
color: Colors.white, width: 1.0)),103
enabledBorder: OutlineInputBorder(104
borderRadius: BorderRadius.circular(30),105
borderSide: const BorderSide(106
color: Colors.white, width: 1.0)),107
border: OutlineInputBorder(108
borderRadius: BorderRadius.circular(30),109
),110
),111
),112
),113
const SizedBox(height: 35),114
Container(115
decoration: BoxDecoration(116
color: Colors.white,117
borderRadius: BorderRadius.circular(30),118
boxShadow: [119
BoxShadow(120
blurRadius: 10,121
spreadRadius: 7,122
offset: const Offset(1, 1),123
color: Colors.grey.withOpacity(0.2))124
]),125
child: TextField(126
controller: _phoneNumberController,127
decoration: InputDecoration(128
hintText: 'Phone Number',129
prefixIcon: const Icon(Icons.phone),130
focusedBorder: OutlineInputBorder(131
borderRadius: BorderRadius.circular(30),132
borderSide: const BorderSide(133
color: Colors.white, width: 1.0)),134
enabledBorder: OutlineInputBorder(135
borderRadius: BorderRadius.circular(30),136
borderSide: const BorderSide(137
color: Colors.white, width: 1.0)),138
border: OutlineInputBorder(139
borderRadius: BorderRadius.circular(30),140
),141
),142
),143
),144
const SizedBox(height: 35),145
Container(146
decoration: BoxDecoration(147
color: Colors.white,148
borderRadius: BorderRadius.circular(30),149
boxShadow: [150
BoxShadow(151
blurRadius: 10,152
spreadRadius: 7,153
offset: const Offset(1, 1),154
color: Colors.grey.withOpacity(0.2))155
]),156
child: TextField(157
controller: emailController,158
decoration: InputDecoration(159
hintText: 'Email',160
prefixIcon: const Icon(Icons.email_outlined),161
focusedBorder: OutlineInputBorder(162
borderRadius: BorderRadius.circular(30),163
borderSide: const BorderSide(164
color: Colors.white, width: 1.0)),165
enabledBorder: OutlineInputBorder(166
borderRadius: BorderRadius.circular(30),167
borderSide: const BorderSide(168
color: Colors.white, width: 1.0)),169
border: OutlineInputBorder(170
borderRadius: BorderRadius.circular(30),171
),172
),173
),174
),175
const SizedBox(height: 35),176
Container(177
decoration: BoxDecoration(178
color: Colors.white,179
borderRadius: BorderRadius.circular(30),180
boxShadow: [181
BoxShadow(182
blurRadius: 10,183
spreadRadius: 7,184
offset: const Offset(1, 1),185
color: Colors.grey.withOpacity(0.2))186
]),187
child: TextField(188
controller: passwordController,189
obscureText: true,190
decoration: InputDecoration(191
hintText: 'Password',192
prefixIcon: const Icon(Icons.password),193
focusedBorder: OutlineInputBorder(194
borderRadius: BorderRadius.circular(30),195
borderSide: const BorderSide(196
color: Colors.white, width: 1.0)),197
enabledBorder: OutlineInputBorder(198
borderRadius: BorderRadius.circular(30),199
borderSide: const BorderSide(200
color: Colors.white, width: 1.0)),201
border: OutlineInputBorder(202
borderRadius: BorderRadius.circular(30),203
),204
),205
),206
),207
],208
),209
),210
const SizedBox(211
height: 50,212
),213
GestureDetector(214
onTap: () async {215
AuthController.instance.register(216
emailController.text.trim(), passwordController.text.trim());217
FirebaseFirestore.instance.collection('users').doc(docId).set({218
'username': _usernameController.text,219
'phone': _phoneNumberController.text,220
'company_name': _companyNameController.text,221
'email': emailController.text222
});223
},224
child: Container(225
width: w * .5,226
height: h * .06,227
decoration: BoxDecoration(228
borderRadius: BorderRadius.circular(30),229
image: const DecorationImage(230
image: AssetImage("assets/button.png"),231
fit: BoxFit.cover,232
),233
),234
child: const Center(235
child: Text(236
'Sign Up',237
style: TextStyle(238
fontSize: 30,239
fontWeight: FontWeight.bold,240
color: Colors.white),241
),242
)),243
),244
SizedBox(height: w * 0.1),245
RichText(246
text: TextSpan(247
text: "Already have an account?",248
style: const TextStyle(color: Colors.grey, fontSize: 20),249
children: [250
TextSpan(251
text: " Login",252
style: const TextStyle(253
color: Colors.grey,254
fontSize: 20,255
fontWeight: FontWeight.bold),256
recognizer: TapGestureRecognizer()257
..onTap = () {258
Navigator.push(259
context,260
MaterialPageRoute(261
builder: (context) => const Login()));262
}),263
])),264
],265
),266
);267
}268
}account.dart – this is the page I want to display my Firestore data on
JavaScript
1
143
143
1
class Account extends StatefulWidget {2
const Account({Key? key}) : super(key: key);3
4
@override5
State<Account> createState() => _AccountState();6
}7
8
class _AccountState extends State<Account> {9
10
@override11
Widget build(BuildContext context) {12
return Scaffold(13
backgroundColor: Colors.grey.shade50,14
body: Stack(15
fit: StackFit.expand,16
children: [17
SingleChildScrollView(18
padding: const EdgeInsets.all(16),19
child: Column(20
crossAxisAlignment: CrossAxisAlignment.start,21
children: <Widget>[22
const SizedBox(height: 10),23
const Text(24
'Account Settings & Info',25
style: TextStyle(26
fontSize: 20,27
fontWeight: FontWeight.bold,28
color: Colors.black),29
),30
Card(31
elevation: 2.0,32
margin: const EdgeInsets.fromLTRB(16, 8.0, 16, 16.0),33
shape: RoundedRectangleBorder(34
borderRadius: BorderRadius.circular(10)),35
child: Column(36
children: <Widget>[37
const SizedBox(height: 20),38
Container(39
width: 75,40
height: 75,41
decoration: BoxDecoration(42
color: Colors.grey[200],43
borderRadius: BorderRadius.circular(15),44
image: const DecorationImage(image: AssetImage('assets/tclogotransparent.png'), fit: BoxFit.cover)45
),46
),47
const SizedBox(height: 20),48
const BuildDivider(),49
ListTile(50
leading: const Icon(51
Icons.person,52
color: Colors.black,53
),54
title: Text('Username: $username'),55
trailing: const Icon(Icons.keyboard_arrow_right),56
onTap: () {57
Navigator.push(context, MaterialPageRoute(builder: (context) => const ChangeEmail()));58
},59
),60
const BuildDivider(),61
ListTile(62
leading: const Icon(63
Icons.business_center,64
color: Colors.black,65
),66
title: Text('Company Name: $companyName'),67
trailing: const Icon(Icons.keyboard_arrow_right),68
onTap: () {69
Navigator.push(context, MaterialPageRoute(builder: (context) => const ChangeEmail()));70
},),71
const BuildDivider(),72
ListTile(73
leading: const Icon(74
Icons.phone,75
color: Colors.black,76
),77
title: Text('Phone Number: $phoneNumber'),78
trailing: const Icon(Icons.keyboard_arrow_right),79
onTap: () {80
Navigator.push(context, MaterialPageRoute(builder: (context) => const ChangeEmail()));81
},82
),83
const BuildDivider(),84
ListTile(85
leading: const Icon(86
Icons.email_outlined,87
color: Colors.black,88
),89
title: Text('E-Mail: $emailAddress'),90
trailing: const Icon(Icons.keyboard_arrow_right),91
onTap: () {92
Navigator.push(context, MaterialPageRoute(builder: (context) => const ChangeEmail()));93
},94
),95
const BuildDivider(),96
ListTile(97
leading: const Icon(98
Icons.key,99
color: Colors.black,100
),101
title: const Text('Change Password'),102
trailing: const Icon(Icons.keyboard_arrow_right),103
onTap: () {104
Navigator.push(context, MaterialPageRoute(builder: (context) => const ChangePassword()));105
},106
),107
const BuildDivider(),108
ListTile(109
leading: const Icon(110
Icons.upload,111
color: Colors.black,112
),113
title: const Text('Upload Profile Picture'),114
trailing: const Icon(Icons.keyboard_arrow_right),115
onTap: () {116
117
},118
),119
],120
),121
),122
Card(123
color: Colors.red[50],124
elevation: 2.0,125
shape: RoundedRectangleBorder(126
borderRadius: BorderRadius.circular(10)),127
margin: const EdgeInsets.all(16),128
child: ListTile(129
onTap: () {130
AuthController.instance.signOut();131
},132
title: const Text('Log Out', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.red),),133
leading: const Icon(Icons.logout_outlined, color: Colors.red)134
),135
),136
],137
),138
),139
],140
),141
);142
}143
}Firestore Docs – I want to take this data and display it in the account page shown below
Edit: I have the document ids being set as the users email, I wanted to try an easy way to recall the document per account. If this is wrong please let me know.
https://i.stack.imgur.com/53TOS.png
Account Page – These are the fields I want to fill with the data, they all say N/A because I have a separate temporary file that uses constants to set those values
https://i.stack.imgur.com/eoHUE.png
Edit: Edited account.dart throws a _CastError
https://i.stack.imgur.com/YRRz9.png
Advertisement
Answer
I have figured out the solution to my issue. In the _AccountState class I added the following lines of code and it seemed to work for me.
I added this above the _AccountState class..
JavaScript
1
2
1
final FirebaseAuth _firebaseAuth = FirebaseAuth.instance2
then inside the class I added this code above the build widget..
JavaScript
1
20
20
1
void _getData() async {2
User? user = _firebaseAuth.currentUser;3
FirebaseFirestore.instance.collection('users').doc(user?.email).snapshots().listen((userData) {4
setState(() {5
username = userData.data()!['username'];6
companyName = userData.data()!['company_name'];7
phoneNumber = userData.data()!['phone'];8
emailAddress = userData.data()!['email'];9
});10
});11
}12
13
@override14
15
16
void initState() {17
super.initState();18
_getData();19
}20
After adding that into the state I just declared each variable in the title of my ListTiles and it seemed to work
JavaScript
1
10
10
1
ListTile(2
leading: const Icon(3
Icons.person,4
color: Colors.black,5
),6
title: Text("Username: $username"),7
trailing: const Icon(Icons.keyboard_arrow_right),8
onTap: () {},9
),10