flutter and firestore : change price and size dynamicly - firebase

hello iam using flutter and firebase in my project , i have a product and evert product have a price , every product have a list of sizes , i want the product to change its price when the size changes .
here is my product document :
i know that i have to change the prices into list but how to link them together in firebase or flutter .
this is my code :
Column(
children: <Widget>[
Padding(
padding: const EdgeInsets.all(0),
child: Row(
children: <Widget>[
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: CustomText(
text: "Select a Size",
color: Colors.white,
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: DropdownButton<String>(
value: _size,
style: TextStyle(color: Colors.white),
items: widget.product.sizes
.map<DropdownMenuItem<String>>(
(value) => DropdownMenuItem(
value: value,
child: CustomText(
text: value,
color: Colors.red,
)))
.toList(),
onChanged: (value) {
setState(() {
_size = value;
});
}),
)
],
),
),
Expanded(
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"${widget.product.description}",
style: TextStyle(color: Colors.white)),
),
),
Padding(
padding: const EdgeInsets.all(9),
child: Material(
borderRadius: BorderRadius.circular(15.0),
color: Colors.white,
elevation: 0.0,
child: MaterialButton(
onPressed: () async {
appProvider.changeIsLoading();
bool success = await userProvider.addToCart(
product: widget.product,
size: _size);
if (success) {
toast("Added to Cart!");
userProvider.reloadUserModel();
appProvider.changeIsLoading();
return;
} else {
toast("Not added to Cart!");
appProvider.changeIsLoading();
return;
}
},
minWidth: MediaQuery.of(context).size.width,
child: appProvider.isLoading
? Loading()
: Text(
"Add to cart",
textAlign: TextAlign.center,
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold,
fontSize: 20.0),
),
)),
),
SizedBox(
height: 20,
)
],
),
),
)
],

There is trigger for widget :
onChanged: (value) {
setState(() {
_size = value;
reference.setData({quantity : value}, merge: true)
});
}),
Just change the reference to document path.

Related

How to retrive a doc from firestore with its ID with flutter

I have a collection of user_profile in my app console. I want to retrieve a doc (a particular user profile with its user id [click to check][1]).
I know that FirebaseAuth.instance.currentUser; would give me the current login user ID but that is not what I want. I want to show the details of the clicked user, not the logged_in user, can't seem to find any answer here that was helpful. Please help guys
This is the method that gets the collection
Future<DocumentSnapshot> getUserData() {
var firebaseUser = FirebaseAuth.instance.currentUser;
_firestoreInstance
.collection('user_profile')
.doc(firebaseUser.uid)
.get()
.then((value) {
print(value.data());
return value.data();
});
}
and here is my future builder
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: getUserData(),
// ignore: missing_return
builder: (context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.hasError) {
return Text('Error fetching user profile');
}
if (snapshot.connectionState == ConnectionState.done) {
Map<String, dynamic> userData = snapshot.data.data();
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.only(top: 10),
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: IconButton(
onPressed: () {
// Navigator.pushNamed(context, Homepage.id);
},
icon: Icon(
Icons.arrow_back,
color: Colors.white,
size: 30,
),
),
),
GestureDetector(
onTap: () {},
child: Stack(
children: [
CircleAvatar(
radius: 70,
backgroundColor: Colors.transparent,
child: ClipOval(
child: Image.asset('assets/avatar_profile.jpg'),
),
),
Positioned(
bottom: 0,
right: 0,
child: CircleAvatar(
backgroundColor: Colors.white60,
radius: 25,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.edit, color: Colors.blueGrey),
),
),
)
],
),
),
SizedBox(
height: 10,
),
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"${userData['nickname']}",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.w900),
),
VerticalDivider(
thickness: 3,
width: 20,
color: Colors.white,
),
Text(
// '7',
"{$userData['age]}",
style: TextStyle(
color: Colors.white,
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Card(
child: Column(
children: [
ListTile(
leading: Icon(
Icons.person,
size: 40,
),
title: Text("About me"),
isThreeLine: false,
dense: true,
subtitle: Text("${userData['aboutMe']}"),
trailing: Icon(Icons.arrow_right),
)
],
),
),
),
Expanded(
child: Container(
width: 400,
child: ListView(
children: [
ProfileListTile(
leading: Icons.phone_in_talk,
title: 'Phone Number',
subtitle: "${userData['mobile']}",
),
ProfileListTile(
leading: Icons.add_location,
title: 'Current Location',
subtitle: "${userData['location']}",
),
ProfileListTile(
leading: FontAwesomeIcons.heartbeat,
title: 'Relationship Status',
subtitle: "${userData['maritalStatus']}",
),
ProfileListTile(
leading: Icons.people,
title: 'Gender',
subtitle: 'Male',
),
ProfileListTile(
leading: Icons.looks,
title: 'Interested In',
subtitle: "${userData['InterestedIn']}",
),
],
),
),
),
],
),
),
));
}
},
);
}
}
Your code is currently not returning anything from getUserData yet. The only return you have is inside the then function, and doesn't escape to the higher level.
The simplest way to fix it is by using await:
Future<DocumentSnapshot> getUserData() async {
var firebaseUser = FirebaseAuth.instance.currentUser;
var doc = await _firestoreInstance
.collection('user_profile')
.doc(firebaseUser.uid)
.get()
return doc.data();
}
It sounds like you would like your app's users to see other people's profile.
To do that, you would first have to accept the uid of the user to display the profile. Then you can pass the uid to the future like the following example:
class ProfilePage extends StatelessWidget {
const ProfilePage({
Key key,
#required this.uid, // Here you are receiving the uid of the currently viewd user's uid
}) : super(key: key);
final String uid;
#override
Widget build(BuildContext context) {
return FutureBuilder<Map<String, dynamic>>(builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(child: CircularProgressIndicator());
} else if (snapshot.hasError) {
return Center(child: Text('Error fetching user profile'));
}
final userProfile = snapshot.data;
return Column(
children: [
// Here you would paste the contents of your user profile widget
],
);
});
}
Future<Map<String, dynamic>> getUserData() async {
final snap =
await _firestoreInstance.collection('user_profile').doc(uid).get();
return snap.data();
}
}
I was able to solve this easily by just passing from usersCard to UserProfile (my bad, lolx), since I already have this data on list users screen, there was no need to fetching them again with FutureBuilder
class UsersCard extends StatelessWidget {
final Users usersDetails;
const UsersCard({Key key, #required this.usersDetails}) : super(key: key);
#override
Widget build(BuildContext context) {
return InkWell(
onTap: () {
Navigator.push(context, MaterialPageRoute(builder: (_) =>
UserProfile(userDetails: usersDetails))); //im passing the data here
},
child: Stack(
children: [
Card(
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Image.network(
'https://placeimg.com/170/170/any',
fit: BoxFit.contain,
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
elevation: 5,
),
Positioned(
left: 20,
bottom: 20,
child: IntrinsicHeight(
child: Row(
children: [
Text(
'${usersDetails.nickname}',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w900),
),
VerticalDivider(
thickness: 2,
width: 20,
color: Colors.white,
),
Text(
'${usersDetails.age}',
style: TextStyle(
color: Colors.white,
fontSize: 16,
fontWeight: FontWeight.w900),
),
],
),
),
),
],
),
);
}
}
Here is my UsersProfile Screen
class UserProfile extends StatelessWidget {
final Users userDetails;
UserProfile({#required this.userDetails});
#override
Widget build(BuildContext context) {
return Scaffold(
body: SafeArea(
child: Container(
padding: EdgeInsets.only(top: 10),
child: Column(
children: [
Align(
alignment: Alignment.centerLeft,
child: IconButton(
onPressed: () {
// Navigator.pushNamed(context, Homepage.id);
},
icon: Icon(
Icons.arrow_back,
color: Colors.white,
size: 30,
),
),
),
GestureDetector(
onTap: () {},
child: Stack(
children: [
CircleAvatar(
radius: 70,
backgroundColor: Colors.transparent,
child: ClipOval(
child: Image.asset('assets/avatar_profile.jpg'),
),
),
Positioned(
bottom: 0,
right: 0,
child: CircleAvatar(
backgroundColor: Colors.white60,
radius: 25,
child: IconButton(
onPressed: () {},
icon: Icon(Icons.edit, color: Colors.blueGrey),
),
),
)
],
),
),
SizedBox(
height: 10,
),
IntrinsicHeight(
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
"${userDetails.nickname}",
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.w900),
),
VerticalDivider(
thickness: 3,
width: 20,
color: Colors.white,
),
Text(
// '7',
"{$userDetails.age}",
style: TextStyle(
color: Colors.white,
),
),
],
),
),
Padding(
padding: const EdgeInsets.all(20.0),
child: Card(
child: Column(
children: [
ListTile(
leading: Icon(
Icons.person,
size: 40,
),
title: Text("About me"),
isThreeLine: false,
dense: true,
subtitle: Text("${userDetails.aboutMe}"),
trailing: Icon(Icons.arrow_right),
)
],
),
),
),
Expanded(
child: Container(
width: 400,
child: ListView(
children: [
ProfileListTile(
leading: Icons.phone_in_talk,
title: 'Phone Number',
subtitle: "${userDetails.mobile}",
),
ProfileListTile(
leading: Icons.add_location,
title: 'Current Location',
subtitle: "${userDetails.location}",
),
ProfileListTile(
leading: FontAwesomeIcons.heartbeat,
title: 'Relationship Status',
subtitle: "${userDetails.maritalStatus}",
),
ProfileListTile(
leading: Icons.people,
title: 'Gender',
subtitle: 'Male',
),
ProfileListTile(
leading: Icons.looks,
title: 'Interested In',
subtitle: "${userDetails.interestedIn}",
),
],
),
),
),
],
),
),
),
);
}
}

Closure call with mismatched arguments: function '[]' in flutter

** I am getting this error**
Closure call with mismatched arguments: function '[]'
Receiver: Closure: (dynamic) => dynamic from Function 'get':.
Tried calling: []("url")
Found: [](dynamic) => dynamic
my code where I am receiving the data from firestore is this..
import 'package:flutter/material.dart';
import 'package:riyazat_quiz/services/database.dart';
import 'package:riyazat_quiz/views/create_quiz.dart';
import 'package:riyazat_quiz/widgets/widgets.dart';
class Home extends StatefulWidget {
#override
_HomeState createState() => _HomeState();
}
class _HomeState extends State<Home> {
Stream quizStream;
DatabaseService databaseService = DatabaseService(); // this is to call the getQuizData() async{
return await FirebaseFirestore.instance.collection("Quiz").snapshots();
}
Widget quizList(){
return Container(
child: StreamBuilder(
stream:quizStream ,
builder: (context,snapshort){
return snapshort.data == null ? CircularProgressIndicator(): ListView.builder(
scrollDirection: Axis.vertical,
shrinkWrap: true,
itemCount : snapshort.data.documents.length ,
itemBuilder : (context,index){ return QuizTile(url:snapshort.data.documents[index].get['url'],
title:snapshort.data.documents[index].get['title'] ,
desc: snapshort.data.documents[index].get['desc'],);}
);
}
),
);
}
#override
void initState() {
databaseService.getQuizData().then((val){
setState(() {
quizStream =val;
});
});
super.initState();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Center(
child: appBar(context),
),
backgroundColor: Colors.transparent,
elevation: 0.0,
brightness: Brightness.light,
),
body:
Column(
children: [
quizList(),
FloatingActionButton(
child: Icon(Icons.add),
onPressed: () {
Navigator.push(context,
MaterialPageRoute(builder: (context) => CreateQuiz()));
},
),
],
),
);
}
}
class QuizTile extends StatelessWidget {
final String url,title,desc;
QuizTile({#required this.url,#required this.title,#required this.desc});
#override
Widget build(BuildContext context) {
return Container(
child: Stack(
children: [
Image.network(url),
Container(
child: Column(
children: [
Text(title),
Text(desc),
],
),
)
],
),
);
}
}
can someone tell me where I am going wrong
ps: this is a quiz app where I am getting the data from the firestore,
using streams.
data saved on the firestore has three fields, "url", "title" "desc".
I want to retrieve them in the below widget and want to display them in a stack, but this error got me stuck in-between.
You need to do the following:
itemCount : snapshort.data.docs.length ,
itemBuilder : (context,index){
return QuizTile(url:snapshort.data.docs[index].data()['url'],
title:snapshort.data.docs[index].data()['title'] ,
desc: snapshort.data.docs[index].data()['desc'],
);
}
);
Since you are reference a collection, then you need to use docs which will retrieve a list of documents inside that collection:
https://github.com/FirebaseExtended/flutterfire/blob/master/packages/cloud_firestore/cloud_firestore/lib/src/query_snapshot.dart#L18
Then to access each field in the document, you need to call data()
The answer by #Peter Haddad is correct. Just to highlight the difference with an example from my own code:
The previous version of code which created the same error:
snapshot.data.docs[index].data["chatRoomID"]
Updated version of code which solved the error:
snapshot.data.docs[index].data()["chatRoomID"]
Updated Version:
snapshot.data[i]['Email'],
Future getRequests() async {
QuerySnapshot snapshot = await FirebaseFirestore.instance.collection("Buyer Requests").get();
return snapshot.docs;
}
body: FutureBuilder(
initialData: [],
future: getRequests(),
builder: (BuildContext context, AsyncSnapshot<dynamic> snapshot) {
indexLength = snapshot.data.length;
if (snapshot.hasData)
return SizedBox(
child: PageView.builder(
itemCount: indexLength,
controller: PageController(viewportFraction: 1.0),
onPageChanged: (int index) => setState(() => _index = index),
itemBuilder: (_, i) {
return SingleChildScrollView(
child: Card(
margin: EdgeInsets.all(10),
child: Wrap(
children: <Widget>[
ListTile(
leading: CircleAvatar(
backgroundImage: AssetImage(
'assets/images/shafiqueimg.jpeg'),
),
title: Text(
snapshot.data[i]['Email'],
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.w700,
color: Colors.black.withOpacity(0.7),
),
),
subtitle: Text(
snapshot.data[i]['Time'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Container(
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(5)),
color: Colors.grey[200],
),
padding: EdgeInsets.all(10),
child: Text(
snapshot.data[i]['Description'],
style: TextStyle(
color: Colors.black.withOpacity(0.6)),
),
),
SizedBox(
height: 8,
),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
border: Border.all(
color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.category_outlined),
title: Text(
'Category : ${snapshot.data[i]['Category']}',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
border: Border.all(
color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.location_pin),
title: Text(
snapshot.data[i]['Location'],
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
border: Border.all(
color: Colors.grey[300])),
child: ListTile(
leading: Icon(
Icons.attach_money,
color: kGreenColor,
),
title: Text(
'Rs.${snapshot.data[i]['Budget']}',
style: TextStyle(
fontSize: 14,
color: kGreenColor,
),
),
),
),
SizedBox(height: 8),
Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.all(
Radius.circular(5)),
border: Border.all(
color: Colors.grey[300])),
child: ListTile(
leading: Icon(Icons.timer),
title: Text(
'Duration : ${snapshot.data[i]['Duration']}',
style: TextStyle(
fontSize: 14,
color: Colors.grey,
),
),
),
),
SizedBox(
height: 35,
),
RaisedButton(
padding: EdgeInsets.symmetric(vertical: 10),
child: Text('Send Offer'),
textColor: Colors.white,
color: Colors.green,
onPressed: () {
// Respond to button press
},
),
SizedBox(
height: 15,
),
Center(
child: Text(
"${i + 1}/$indexLength",
style: TextStyle(fontSize: 13),
),
),
],
),
),
],
),
),
);
},
),
);
else
return Center(
child: Text("Null"),
);
},
),
Given that you are referencing a collection, you must use docs to acquire a list of the documents included in that collection:
https://github.com/FirebaseExtended/flutterfire/blob/master/packages/cloud firestore/cloud firestore/lib/src/query snapshot.dart#L18
then you must call data() in order to access each field in the document.

View FIrestore Data as a Table in Flutter

I am currently working on a project in which I need to retrieve some firestore and view them as a table
I have tried datatable but cells are overflowing
There are seven fixed columns & n no of rows.
Can someone help me with this?
My whole code
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'dart:async';
import 'package:intl/intl.dart';
class view extends StatefulWidget {
#override
_view createState() => _view();
}
class _view extends State<view> {
Future getPosts() async{
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection('data').getDocuments();
return qn.documents;
}
DateTime Date = DateTime.now();
var i = 0;
Future<void> _Date(BuildContext context) async {
final DateTime picked = await showDatePicker(
context: context,
initialDate: Date,
firstDate: DateTime(2015, 8),
lastDate: DateTime(2101));
if (picked != null && picked != Date)
setState(() {
Date = picked;
});
}
String dropdownValue = '';
#override
Widget build(BuildContext context) {
return MaterialApp(
theme: ThemeData.light(),
home: Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Color(0xFF11249F),
title: new Text("VIEW DATA",
style: new TextStyle(color: Colors.white),),
),
body: SingleChildScrollView(
child: Column(
children: <Widget>[
SizedBox(
height: 20,
),
Row(
children: <Widget>[
SizedBox(width: 10,),
Container(
child: Text ('Select Factory',style: TextStyle(
fontSize: 14.5,
fontFamily: "Quando",
fontWeight: FontWeight.bold,
color: Colors.deepPurple
),
),
),
Container(
margin: EdgeInsets.symmetric(horizontal: 20),
padding: EdgeInsets.symmetric(vertical: 10, horizontal: 20),
height: 50,
width: 200,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(25),
border: Border.all(
color: Color(0xFFE5E5E5),
),
),
child:Row(
children: <Widget>[
SizedBox(width: 20),
Expanded(
child: DropdownButton(value: dropdownValue,
isExpanded: true,
icon: Icon(Icons.arrow_downward),
style: TextStyle(fontSize: 13,
fontFamily: "Quando",
fontWeight: FontWeight.w500,
color: Colors.deepPurple),
onChanged: (String newValue) {
setState(() {
dropdownValue = newValue;
});
},
items: <String>['','Vapi', 'Masat']
.map<DropdownMenuItem<String>>((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
),
),
]
),
),
]
),
SizedBox(
height: 30,
),
Column(
children: <Widget>[
Row(
children: <Widget>[
SizedBox(width: 10,),
Container(
child: Text('Date',style: TextStyle(
fontSize: 14.5,
fontFamily: "Quando",
fontWeight: FontWeight.bold,
color: Colors.deepPurple
),
),
),
SizedBox(width: 80,),
Text("${Date.toLocal()}".split(' ')[0],style: TextStyle(
fontSize: 14.5,
fontFamily: "Quando",
fontWeight: FontWeight.bold,
color: Colors.deepPurple
),),
SizedBox(width: 20.0,),
RaisedButton(
onPressed: () => _Date(context),
textColor: Colors.white,
padding: const EdgeInsets.all(0.0),
child:Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
colors: <Color>[
Color(0xFF0D47A1),
Color(0xFF1976D2),
Color(0xFF42A5F5),
]
)
),
padding: const EdgeInsets.all(10.0),
child:
const Text('Select Date', style: TextStyle(fontSize: 14)),
) ,
),
],
),
SizedBox(height: 30,),
Container(
child: FutureBuilder(
future: getPosts(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: Text('Loading...',style: TextStyle(
fontSize: 14.5,
fontFamily: "Quando",
fontWeight: FontWeight.bold,
color: Colors.deepPurple
),),
);
}
else {
String formattedDate = DateFormat('yyyy-MM-dd').format(Date);
return new SizedBox(
height: 1000,
child :GridView.builder(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: (Orientation == Orientation.landscape) ? 7 : 7),
itemCount: snapshot.data.length,
itemBuilder: (context, index) {
if (snapshot.data[index].data['Date'] ==
formattedDate &&
snapshot.data[index].data['Plant'] ==
dropdownValue) {
i++;
return DataTable(
columns: [
DataColumn(
label: Text(
"Work Centre",style: TextStyle(
fontStyle:FontStyle.italic
),
)
),
DataColumn(
label: Text(
"Work Centre",style: TextStyle(
fontStyle:FontStyle.italic
),
)
),
DataColumn(
label: Text(
"Work Centre",style: TextStyle(
fontStyle:FontStyle.italic
),
)
),
DataColumn(
label: Text(
"Work Centre",style: TextStyle(
fontStyle:FontStyle.italic
),
)
),
DataColumn(
label: Text(
"Work Centre",style: TextStyle(
fontStyle:FontStyle.italic
),
)
),
DataColumn(
label: Text(
"Work Centre",style: TextStyle(
fontStyle:FontStyle.italic
),
)
),
DataColumn(
label: Text(
"Work Centre",style: TextStyle(
fontStyle:FontStyle.italic
),
)
),
],
rows: [
DataRow(
cells: <DataCell>[
DataCell(Text('Sarah')),
DataCell(Text('19')),
DataCell(Text('Student')),
DataCell(Text('Sarah')),
DataCell(Text('Sarah')),
DataCell(Text('Sarah')),
DataCell(Text('Sarah')),
],
)
],
);
}
else {
return Container();
}
}
));
}
} )
)
]
)
]
)
)
));
}
}
Problem : Screenshot
PS: Data written in row is temporary I will change it later to get data from firestore, I need 7 cols & n no of rows just like excel sheet
There are two ways to overcome this problem:
make your app responsive: display a specific number of columns in mobile mode, and another in tablet mode.
you can overcome the overflow problem by make you table horizontally & vertically scrollable like this:
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
body: SingleChildScrollView(
child: SizedBox(
width: double.infinity,
height: MediaQuery.of(context).size.height,
child: SingleChildScrollView(
scrollDirection: Axis.horizontal,
child: DataTable(
columns: [
DataColumn(label: Text('RollNo')),
DataColumn(label: Text('Name')),
DataColumn(label: Text('Class')),
DataColumn(label: Text('Hello')),
DataColumn(label: Text('World')),
],
rows: [
DataRow(cells: [
DataCell(Text('1')),
DataCell(Text('Arya')),
DataCell(Text('6')),
DataCell(Text('Arya')),
DataCell(Text('6')),
]),
DataRow(cells: [
DataCell(Text('12')),
DataCell(Text('John')),
DataCell(Text('9')),
DataCell(Text('Arya')),
DataCell(Text('6')),
]),
DataRow(cells: [
DataCell(Text('42')),
DataCell(Text('Tony')),
DataCell(Text('8')),
DataCell(Text('Arya')),
DataCell(Text('6')),
]),
],
),
),
),
),
);
}

How to save login Credential with Firebase

I'm having an interface where we should log in by providing the email and password.
Below is my login page.
the interface is designed using dart with flutter.
What I want is to save the email and password when the user (checks the remember me box and then)login to the account.
When the user comes back again to the same page, the page should automatically fill the username and password for the user.
For now, it saves the credentials in the firebase authentication.
Below is my code for Remember me checkbox and login.
Widget _RememberMeCheckbox() {
return Container(
height: 20.0,
child: Row(
children: <Widget>[
Theme(
data: ThemeData(unselectedWidgetColor: Colors.white),
child: Checkbox(
value: _rememberMe,
checkColor: Colors.green,
activeColor: Colors.white,
onChanged: (value) {
setState(() {
_rememberMe = value;
});
},
),
),
Text(
'Remember me',
style: kLabelStyle,
),
],
),
);
}
Widget _LoginBtn() {
return Container(
padding: EdgeInsets.symmetric(vertical: 25.0),
width: double.infinity,
child: Form(
child: RaisedButton(
elevation: 5.0,
onPressed: () async {
final form = formKey.currentState;
form.save();
if (form.validate()) {
try {
FirebaseUser result =
await Provider.of<AuthService>(context, listen: false)
.loginUser(email: _email, password: _password);
print(result);
Navigator.of(context).pushNamed('/home');
} on AuthException catch (ex) {
return _showErrorDialog(context, ex.message);
} on Exception catch (ex) {
return _showErrorDialog(context, ex.toString());
}
}
},
padding: EdgeInsets.all(15.0),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30.0),
),
color: Colors.white,
child: Text(
'LOGIN',
style: TextStyle(
color: Color(0xFF527DAA),
letterSpacing: 1.5,
fontSize: 18.0,
fontWeight: FontWeight.bold,
fontFamily: 'OpenSans',
),
),
),
),
);
}
I need to do this using firebase can anyone help me?
String_email="";
String_password="";
Widget _EmailTextField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Email',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
keyboardType: TextInputType.text,
autovalidate: false,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.email,
color: Colors.white,
),
hintText: 'Enter your Email Address',
hintStyle: kHintTextStyle,
),
validator: (String value) {
if (value.isEmpty) {
return 'Email is Required.';
}
Pattern pattern =
r'^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$';
RegExp regex = new RegExp(pattern);
if (!regex.hasMatch(value)) {
return 'Enter valid Email Address';
}
return null;
},
onSaved: (String value) {
return _email = value;
},
),
),
],
);
}
Widget _PasswordTextField() {
return Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'Password',
style: kLabelStyle,
),
SizedBox(height: 10.0),
Container(
alignment: Alignment.centerLeft,
decoration: kBoxDecorationStyle,
height: 60.0,
child: TextFormField(
autovalidate: false,
style: TextStyle(
color: Colors.white,
fontFamily: 'OpenSans',
),
decoration: InputDecoration(
border: InputBorder.none,
contentPadding: EdgeInsets.only(top: 14.0),
prefixIcon: Icon(
Icons.lock,
color: Colors.white,
),
suffixIcon: IconButton(
icon: Icon(
_passwordVisible ? Icons.visibility : Icons.visibility_off,
color: Colors.white,
),
onPressed: _passwordVisibility,
),
hintText: 'Enter your Password',
hintStyle: kHintTextStyle,
),
obscureText: !_passwordVisible,
validator: (String value) {
if (value.isEmpty) {
return 'Password is Required.';
}
if (value.length < 6) {
return 'Password too short.';
}
return null;
},
onSaved: (String value) {
return _password = value;
},
),
),
],
);
}
There are a few options:
Read and write files: https://flutter.io/reading-writing-files/
SQLite via a Flutter plugin: https://github.com/tekartik/sqflite
SQLCipher via a Flutter plugin: https://github.com/drydart/flutter_sqlcipher
SharedPreferences via a Flutter plugin: https://github.com/flutter/plugins/tree/master/packages/shared_preferences

Error While retrieving the number of Firebase collections in Flutter?

I'm developing an admin app in that i want to display the number of users(Collection) from the cloud firestore. When i tried doing this im able print the value in my terimal but its displaying 0 in my app.
Can someone please help in this, this my code
class _AdminState extends State<Admin> {
getUsersCount() {
var length = 0;
Firestore.instance.collection('users').getDocuments().then((myDocuments){
print("${myDocuments.documents.length}");
length = myDocuments.documents.length;
});
return length.toString();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Row(
children: <Widget>[
Expanded(
child: FlatButton.icon(
onPressed: () {
setState(() => _selectedPage = Page.dashboard);
},
icon: Icon(
Icons.dashboard,
color: _selectedPage == Page.dashboard
? active
: notActive,
),
label: Text('Dashboard'))),
Expanded(
child: FlatButton.icon(
onPressed: () {
setState(() => _selectedPage = Page.manage);
},
icon: Icon(
Icons.sort,
color:
_selectedPage == Page.manage ? active : notActive,
),
label: Text('Manage'))),
],
),
elevation: 0.0,
backgroundColor: Colors.white,
),
body: _loadScreen());
}
Widget _loadScreen() {
switch (_selectedPage) {
case Page.dashboard:
return Column(
children: <Widget>[
ListTile(
subtitle: Text(
'Admin View',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 29.0, color: Colors.indigo,fontWeight: FontWeight.bold),
),
),
Expanded(
child: GridView(
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
crossAxisCount: 2,
),
children: <Widget>[
Padding(
padding: const EdgeInsets.all(18.0),
child: Card(
child: ListTile(
title: FlatButton.icon(
onPressed: null,
icon: Icon(Icons.directions_boat,color: Colors.black,),
label: Text("Boats",style: TextStyle(fontSize: 9,color: Colors.indigo),)),
subtitle: Text(
'3',
textAlign: TextAlign.center,
style: TextStyle(color: active, fontSize: 50.0),
)),
),
),
Padding(
padding: const EdgeInsets.all(18.0),
child: Card(
child: ListTile(
title: FlatButton.icon(
onPressed: null,
icon: Icon(Icons.people,color: Colors.black,),
label: Text("Users",style: TextStyle(fontSize: 9,color: Colors.indigo),)),
subtitle: Text(
getUsersCount(),
textAlign: TextAlign.center,
style: TextStyle(color: active, fontSize: 50.0),
)),
),
),
Padding(
padding: const EdgeInsets.all(22.0),
child: Card(
child: ListTile(
title: FlatButton.icon(
onPressed: null,
icon: Icon(Icons.bookmark,color: Colors.black,),
label: Text("Bookings",style: TextStyle(fontSize: 8,color: Colors.indigo),)),
subtitle: Text(
'120',
textAlign: TextAlign.center,
style: TextStyle(color: active, fontSize: 50.0),
)),
),
),
],
),
),
],
);
break;
My terminal is printing the exact value which is available in the database.the terminal looks like this
My screenshot of the app looks like this
Padding(
padding: const EdgeInsets.all(18.0),
child: Card(
child: ListTile(
title: FlatButton.icon(
onPressed: null,
icon: Icon(Icons.people,color: Colors.black,),
label: Text("Users",style: TextStyle(fontSize: 9,color: Colors.indigo),)),
subtitle: Text(
getUsersCount(),
textAlign: TextAlign.center,
style: TextStyle(color: active, fontSize: 50.0),
)),
),
),
getDocuments() is asychronous, then you need to return a value of type Future to be able to get the returned value later:
Future<String> getUsersCount() {
var length = 0;
Firestore.instance.collection('users').getDocuments().then((myDocuments){
print("${myDocuments.documents.length}");
length = myDocuments.documents.length;
});
return Future.value(length.toString());
}
Then when you call it, you can do:
getUsersCount().then((value){
print(value);
});

Resources