I am working on one application which has multiple users. I have a list of resources, this list of resources are like a list of chocolates (only one and unique). Now, I am showing this chocolates on the home screen of all active users. Now, user can click on chocolate and it will be given to them. But, when this happens i want to refresh all logged in users so to ensure that no two users are having same chocolate.
I am using database trigger to monitor the change in DB. I am able to do that but my concern is how to refresh listView.
My Algorithm is as below:
1) Monitor changes in Database.
2) Get Fresh set of data.
3) Update View
I tried creating syncDatabaseFunction as below:
Future syncDatabaseFunction() async {
CollectionReference reference = Firestore.instance.collection('Chocolates');
reference.snapshots().listen((querySnapshot){
querySnapshot.documentChanges.forEach((change){
print("Changed Chocolate");
BackendOperations.getAllChocolates().then((value){
var chocolateTemp = (value as List<ChocolateModel>)
.where((element) => (element.chocolateColor == "Brown"))
.toList();
print("Count is ");
return chocolateTemp;
});
});
});
}
For listview I am using futureBuilder.
I think that if you use StreamBuilder you will solve the problem.
When a user remove or add a new Comment it show for all users.
StreamBuilder was made to do this, be a Observer of the Stream.
This is my code:
Widget getListComment() {
return StreamBuilder<QuerySnapshot>(
stream: Firestore.instance
.collection('comments')
.where('post', isEqualTo: postRef)
.orderBy('createdAt', descending: true)
.snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.hasError) return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return Column(
children: <Widget>[
CircularProgressIndicator(),
],
);
default:
return new ListView(
children:
snapshot.data.documents.map((DocumentSnapshot document) {
return CommentItem(
key: Key(document.documentID),
comment: Comment.fromDoc(document),
myUser: widget.myUser,
);
}).toList(),
);
}
},
);
}
I receive comments from Firebase and show in a ListView, I think that is like your chocolates.
Related
I have these classes
class CustomPopupAction<T> extends CustomAction {
final Icon icon;
final List<CustomPopupActionItem<T>> actions;
final void Function(T) onActionSelected;
CustomPopupAction({
required this.icon,
required this.actions,
required this.onActionSelected,
});
}
class CustomPopupActionItem<T> {
final T value;
final Widget Function(T) itemBuilder;
CustomPopupActionItem({
required this.value,
required this.itemBuilder,
});
}
and I am trying to create overflow menu which will work like this:
if the button is visible, I will create PopupMenuButton
if the button is overflown, I will create ListTile which will open dialog
it can hold multiple different types like CustomAction, CustomPopupAction<Locale>, CustomPopupAction<String>...
I am building that row like this
if (a is CustomPopupAction) {
return PopupMenuButton(
icon: a.icon,
onSelected: (i) => a.onActionSelected(i),
itemBuilder: (context) {
return a.actions.map((i) => PopupMenuItem(
value: i.value,
child: i.itemBuilder(i.value),
)).toList();
},
);
} else {
return IconButton(...);
}
and finally my main code:
...
return OverflowMenu(
actions: [
CustomPopupAction<Locale>(
icon: Icon(Icons.translate),
actions: [
CustomPopupActionItem<Locale>(
value: Locale('en'),
itemBuilder: (l) => ListTile(title: Text(l.toString()),
),
],
onActionSelected: (l) => print(l),
],
);
But this doesn't work for me, I am getting an exception Expected a value of type '(dynamic) => Widget', but got one of type '(Locale) => ListTile'.
I know it's because if (a is CustomPopupAction) is actually getting CustomPopupAction<dynamic>.
can I somehow convince Dart that a nas not dynamic type and that it should work with it's real type?
if not, why am I getting that exception? Locale can be assigned to dynamic variable and ListTile is clearly a Widget.
can I do this without going through dynamics at all?
I'm building a Flutter app with Android Studio (a Time Tracker, following a course on Udemy) and I am at the stage where I have created a sign-in page, that allows me to sign in using either Google, Facebook, email or 'going anonymous'. I'm using version 2.0.1 of the flutter_facebook_login plugin, since the latest version, version 3.0.0, generates lots of errors related to Cocoapods. Version 2.0.1 resolves all of those errors.
I'm doing all authentication using Flutter's firebase_auth package, so that a unique user ID can be generated, to control what is seen by each user. The sign-in process is split into two different pages. There's an 'auth.dart' page that handles all of the authorisation work, with Firebase, Google and Facebook etc. It looks like this:
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/foundation.dart';
import 'package:flutter/services.dart';
import 'package:flutter_facebook_login/flutter_facebook_login.dart';
import 'package:google_sign_in/google_sign_in.dart';
class User {
User({#required this.uid});
final String uid;
}
abstract class AuthBase {
Stream<User> get onAuthStateChanged;
Future<User> currentUser();
Future<User> signInAnonymously();
Future<User> signInWithGoogle();
Future<User> signInWithFacebook();
Future<void> signOut();
}
class Auth implements AuthBase {
final _firebaseAuth = FirebaseAuth.instance;
User _userFromFirebase(FirebaseUser user) {
if (user == null) {
return null;
}
return User(uid: user.uid);
}
#override
Stream<User> get onAuthStateChanged {
return _firebaseAuth.onAuthStateChanged.map(_userFromFirebase);
}
#override
Future<User> currentUser() async {
final user = await _firebaseAuth.currentUser();
return _userFromFirebase(user);
}
#override
Future<User> signInAnonymously() async {
final authResult = await _firebaseAuth.signInAnonymously();
return _userFromFirebase(authResult.user);
}
#override
Future<User> signInWithGoogle() async {
final googleSignIn = GoogleSignIn();
final googleAccount = await googleSignIn.signIn();
if (googleAccount != null) {
final googleAuth = await googleAccount.authentication;
if (googleAuth.accessToken != null && googleAuth.idToken != null) {
final authResult = await _firebaseAuth.signInWithCredential(
GoogleAuthProvider.getCredential(
idToken: googleAuth.idToken,
accessToken: googleAuth.accessToken,
),
);
return _userFromFirebase(authResult.user);
} else {
throw PlatformException(
code: 'ERROR_MISSING_GOOGLE_AUTH_TOKEN',
message: 'Missing Google Auth Token',
);
}
} else {
throw PlatformException(
code: 'ERROR_ABORTED_BY_USER',
message: 'Sign in aborted by user',
);
}
}
#override
Future<User> signInWithFacebook() async {
final facebookLogin = FacebookLogin();
final result = await facebookLogin.logInWithReadPermissions(
['public_profile'],
);
if (result.accessToken != null) {
final authResult = await _firebaseAuth
.signInWithCredential(FacebookAuthProvider.getCredential(
accessToken: result.accessToken.token,
));
return _userFromFirebase(authResult.user);
} else {
throw PlatformException(
code: 'ERROR_ABORTED_BY_USER',
message: 'Sign in aborted by user',
);
}
}
#override
Future<void> signOut() async {
final googleSignIn = GoogleSignIn();
await googleSignIn.signOut();
final facebookLogin = FacebookLogin();
await facebookLogin.logOut();
await _firebaseAuth.signOut();
}
}
Then, the sign-in page, with all of the buttons and interactions with Google and Facebook etc. looks like this:
import 'package:flutter/material.dart';
import 'package:time_tracker_flutter_course/app/sign_in/sign_in_button.dart';
import 'package:time_tracker_flutter_course/app/sign_in/social_sign_in_button.dart';
import 'package:time_tracker_flutter_course/services/auth.dart';
class SignInPage extends StatelessWidget {
SignInPage({#required this.auth});
final AuthBase auth;
Future<void> _signInAnonymously() async {
try {
await auth.signInAnonymously();
} catch (e) {
print(e.toString());
}
}
Future<void> _signInWithGoogle() async {
try {
await auth.signInWithGoogle();
} catch (e) {
print(e.toString());
}
}
Future<void> _signInWithFacebook() async {
try {
await auth.signInWithFacebook();
} catch (e) {
print(e.toString());
}
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Time Tracker'),
elevation: 2.0,
),
body: _buildContent(),
backgroundColor: Colors.grey[200],
);
}
Widget _buildContent() {
return Padding(
padding: EdgeInsets.all(16.0),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: <Widget>[
Text(
'Sign In',
textAlign: TextAlign.center,
style: TextStyle(
fontSize: 32.0,
fontWeight: FontWeight.w600,
),
),
SizedBox(height: 48.0),
SocialSignInButton(
assetName: 'images/google-logo.png',
text: 'Sign in with Google',
textColor: Colors.black87,
color: Colors.white,
onPressed: _signInWithGoogle,
),
SizedBox(height: 8.0),
SocialSignInButton(
assetName: 'images/facebook-logo.png',
text: 'Sign in with Facebook',
textColor: Colors.white,
color: Color(0xFF334D92),
onPressed: _signInWithFacebook,
),
SizedBox(height: 8.0),
SignInButton(
text: 'Sign in with email',
textColor: Colors.white,
color: Colors.teal[700],
onPressed: () {},
),
SizedBox(height: 8.0),
Text(
'or',
style: TextStyle(fontSize: 14.0, color: Colors.black87),
textAlign: TextAlign.center,
),
SizedBox(height: 8.0),
SignInButton(
text: 'Go anonymous',
textColor: Colors.black,
color: Colors.lime[300],
onPressed: _signInAnonymously,
),
],
),
);
}
}
All this code and methodology works perfectly in most cases, which includes:
Android simulator with anonymous login, Google AND Facebook
iOS simulator with anonymous login and Google ONLY
When I try and log in with the Facebook method on the iOS simulator in Android Studio, that's where I run into problems. In the Android Studio console, an error is 'spat out':
flutter: PlatformException(ERROR_ABORTED_BY_USER, Sign in aborted by user, null)
You'll see from the first block of code (the 'auth.dart' code) that this error is just a generic one that I have built in - I haven't been specific with it at all.
I don't believe the issue is with the flutter_facebook_login plugin, since it still works for Android, unless the plug-in has problems that are unique to iOS. I think there's an issue with the iOS set-up for Facebook, even though I have followed the instructions to the letter, including with Xcode.
Can someone help me to understand what might be causing this error, and how I can sort it? It is the only thing in the set-up that you can see that isn't working at the moment, across both simulator platforms.
I had the same issue, I think it is an issue of facebook api with ios beta version.
I found a work around. This is only a work around not the actual solution. It works for me and I hope this helps you:-
The work around checking when the status goes to FacebookLoginStatus.cancelledByUser, then using the below
facebookLogin.loginBehavior = FacebookLoginBehavior.webViewOnly;
It will force flutter to open facebook auth in webview and then you can get it working.
Have a look at the full method
Future signInWithFaceBook() async{
var facebookLogin = new FacebookLogin();
var result = await facebookLogin.logInWithReadPermissions(['email', 'public_profile']);
switch (result.status) {
case FacebookLoginStatus.loggedIn:
print(result.accessToken.token);
// Add your route to home page here after sign In
break;
case FacebookLoginStatus.cancelledByUser:
// In your case the program flow will go here as it as a bug with the api I suppose
facebookLogin.loginBehavior = FacebookLoginBehavior.webViewOnly;
// Once the code comes here the above line will force flutter to open facebook auth in a webview
result = await facebookLogin.logInWithReadPermissions(['email', 'public_profile']);
if(result.status==FacebookLoginStatus.loggedIn){
FirebaseUser user = (await _auth.signInWithCredential(FacebookAuthProvider.getCredential(accessToken: result.accessToken.token)
)
).user;
final FirebaseUser currentUser = await _auth.currentUser();
assert(user.uid == currentUser.uid);
// Add your home page here
}
print('CANCELED BY USER');
break;
case FacebookLoginStatus.error:
print(result.errorMessage);
break;
}
}
Update your auth.dart Code with one line of code from the below .It works.
#override
Future <User> signInWithFacebook() async {
final facebookLogin = FacebookLogin();
facebookLogin.LoginBehavior = FacebookLoginBehavior.webViewOnly;
final result = await facebookLogin.logInWithReadPermissions(['public_profile'],);
if (result.accessToken != null) {
final authResult = await _firebaseAuth
.signInWithCredential(FacebookAuthProvider.getCredential(
accessToken: result.accessToken.token,
)
);
return _userFromFirebase(authResult.user);
} else {
throw PlatformException(
code: 'ERROR_ABORTED_BY_USER',
message: 'Sign in aborted by user',
);
}}
In my documents on FireStore, each one has a list of strings. When I'm displaying the document in app, I would like to sort them alphabetically. What I'm trying doesn't work.
var words = document['list'].cast<String>();
words.sort(); // Outputs 'null'
On inspection in the debugger, when I'm casting the list the object is of type CastList, but I can't find any info on this, and trying to create an object with that declared type tells me that it is an undefined class. So then I tried to specify the class that I'd like it to be:
List<String> words = document['list'].cast<String>();
But it still outputs null when I try to sort.
My collections look like this
I'm getting all of the documents inside of lists and displaying each of them in a listView.
StreamBuilder(
stream: Firestore.instance.collection('lists').orderBy('releases').snapshots,
builder: (context, snapshot) {
if (!snapshot.hasData)
return const Center(child: Text('Loading...'));
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) =>
_buildRow(context, snapshot.data.documents[index], index),
);
},
)
Widget _buildRow(BuildContext context, DocumentSnapshot document, int index) {
var words = document['list'].cast<String>();
var wordsString = words.toString();
wordsString = wordsString.substring(1, wordsString.length - 1);
return CheckboxListTile(
title: Text(
document['name'],
style: _largerTextStyle,
),
subtitle: Text(
wordsString,
style: _textStyle,
),
value: _selectedIndices.contains(index),
onChanged: (bool value) {
setState(() {
if (value) _selectedIndices.add(index);
else _selectedIndices.remove(index);
});
},
);
}
It should work , don't need to call cast.
Edit:
I think you forgot to extract the data.
List words = document.data['list'];
words.sort();
I have a code like this below, the simple flow is I make a loop from a list of objects to create some widgets.
class ScoringAttribute {
int _id;
bool _isdelete;
double _scorehigh, _scorelow, _scorevalue;
String _name, _scoretype, _description, _title;
}
class HomePageState extends State<HomePage> with TickerProviderStateMixin {
List dataScoringAttributes;
List<ScoringAttribute> listScoringAttributeObjects = new List<ScoringAttribute>();
final String urlPresentation = ".../.resentations/getPresentations";
final String urlScoringAttribute = ".../.scoringattributes/getScoringattributes";
Future<String> getPresentationData() async {
var responseScoringAttribute = await http.get(
Uri.encodeFull(urlScoringAttribute),
headers: {"Accept": "application/json"}
);
var scoringAttributeJson = json.decode(responseScoringAttribute.body);
dataScoringAttributes = scoringAttributeJson['scoringattributes'];
for(int i = 0; i < dataScoringAttributes.length; i++) {
var scoringAttributeObject = new ScoringAttribute();
scoringAttributeObject._id = dataScoringAttributes[i]["id"];
scoringAttributeObject._description = dataScoringAttributes[i]["iddescription"];
scoringAttributeObject._isdelete = dataScoringAttributes[i]["isdelete"];
scoringAttributeObject._name = dataScoringAttributes[i]["name"];
scoringAttributeObject._scorehigh = double.parse(dataScoringAttributes[i]["scorehigh"].toString());
scoringAttributeObject._scorelow = double.parse(dataScoringAttributes[i]["scorelow"].toString());
scoringAttributeObject._scoretype = dataScoringAttributes[i]["scoretype"];
scoringAttributeObject._title = dataScoringAttributes[i]["title"];
scoringAttributeObject._scorevalue = double.parse(dataScoringAttributes[i]["scorelow"].toString());
listScoringAttributeObjects.add(scoringAttributeObject);
}
return "Success";
}
List<Widget> scoringAttributeList() {
List<Widget> list = new List();
for(int i = 0; i < listScoringAttributeObjects.length; i++) {
if(listScoringAttributeObjects[i]._scoretype == "slider") {
list.add(
new Container(
child: new Column(
children: <Widget>[
new Column(
children: <Widget>[
//THE SLIDER VALUE TEXT
new Text(
//CONVERT DOUBLE TYPE TO STRING WITHOUT DECIMAL POINTS
listScoringAttributeObjects[i]._scorevalue.toStringAsFixed(listScoringAttributeObjects[i]._scorevalue.truncateToDouble() == listScoringAttributeObjects[i]._scorevalue ? 0 : 0),
style: new TextStyle(
fontSize: 28.0,
),
),
//THE SLIDER
new Slider(
activeColor: Colors.blueAccent,
inactiveColor: const Color(0xFFb7d2e0),
min: double.parse(listScoringAttributeObjects[i]._scorelow.toString()),
max: double.parse(listScoringAttributeObjects[i]._scorehigh.toString()),
value: double.parse(listScoringAttributeObjects[i]._scorevalue.toString()),
onChanged: (double value) {
setState(() {
listScoringAttributeObjects[i]._scorevalue = double.parse(value.round().toString());
});
},
),
],
),
],
),
),
);
}
else if(listScoringAttributeObjects[i]._scoretype == "text_field") {
list.add(...);
}
else if(listScoringAttributeObjects[i]._scoretype == "stars") {
list.add(...);
}
else if(listScoringAttributeObjects[i]._scoretype == "thumb") {
list.add(new Container(...);
}
}
return list;
}
#override
Widget build(BuildContext context) {
return new Scaffold(
body: FutureBuilder<String> (
future: getPresentationData(),
builder: (context, snapshot) {
if(snapshot.hasData) {
return new Column(
children: <Widget>[
new Column(
children: scoringAttributeList(),
),
],
),
}
},
),
);
}
}
There are some different widgets depending on the type, and there are 4 types, and 1 type might have more than 1 widget in it, so I make the loop depend on the data that it got from DB.
The problem is I don't know why every time I use setState() inside the loop, it always processes the loop again, so it'll be an infinite loop to create a new widget, and it'll duplicate the widget from the beginning (only happen when the setState() is called).
Ex: there are 4 data inside the List, and if the setState() is called, it'll show 8 data (show the first 4 data twice)
Here's the example of how I setState() into the data inside the List
onChanged: (double value) {
setState(() {
listScoringAttributeObjects[i]._scorevalue = double.parse(value.round().toString());
});
},
I think the problem is because I setState() into some data inside the List. So when the List state is changed, it'll re-render anything that is related to the List.
Is it true?
If yes, is there any other solution how to change my code?
If not, is there any mistake in my code or my logic maybe?
Thank you. Really looking forward to some solution about this, cause I really got stuck in this, and its already been a week :(
Simple move your getPresentationData() into state variable. So that it will get triggered only once.
class HomePageState extends State<HomePage> with TickerProviderStateMixin {
Future<String> _presentationFuture;
initState() {
_presentationFuture = getPresentationData()
}
//other contents
#override
Widget build(BuildContext context) {
return new Scaffold(
body: FutureBuilder<String> (
future: _presentationFuture,
builder: (context, snapshot) {
if(snapshot.hasData) {
Reason for duplicate: we can calling setState on Slider dataChange which will re-render the HomePageState which will again trigger the network call (getPresentationData())
Note: If you want to trigger network on slider change, clear the list before making a network call
Future<String> getPresentationData() async {
listScoringAttributeObjects = new List<ScoringAttribute>(); // clear data
var responseScoringAttribute = await http.get(
Uri.encodeFull(urlScoringAttribute),
headers: {"Accept": "application/json"}
);
I don't see how this would be related to the one setState() in your code. It is only called when the slider is used.
I think the problem is caused by list.add(...); in scoringAttributeList(). You shouldn't modify data when build() is executed.
You should assume that build() can be called repeatedly and at any time.
Build your code so that this doesn't cause issues when it happens.
I'm trying to write a widget test for a widget that uses StreamBuilder. In the builder, I return a CircularProgressIndicator if snapshot.hasData is false, otherwise I return a ListView of widgets.
In my test I create a StreamController and add an element to it. When I run the test, I would expect to see snapshot.hasData = true, but instead it's false and I can see that the connectionState is waiting. So my test fails.
Somehow it seems that the first element is not pulled out of the stream, and the connection remains in waiting state. I'm not sure what I'm doing wrong.
Here's my widget test:
testWidgets('Job item pressed - shows edit job page',
(WidgetTester tester) async {
StreamController<List<Job>> controller =
StreamController<List<Job>>.broadcast(sync: true);
Job job = Job(id: '0', createdAt: 0, jobName: 'Dart');
controller.add([job]);
final page = JobsPage(
jobsStream: controller.stream,
);
MockRouter mockRouter = MockRouter();
await tester.pumpWidget(makeTestableWidget(
child: page,
auth: MockAuth(),
database: MockDatabase(),
router: mockRouter,
));
Finder waiting = find.byType(CircularProgressIndicator);
expect(waiting, findsNothing);
Finder placeholder = find.byType(PlaceholderContent);
expect(placeholder, findsNothing);
Finder item = find.byKey(Key('jobListItem-${job.id}'));
expect(item, findsOneWidget);
await controller.close();
});
And here is my widget code:
Widget _buildContent(BuildContext context) {
return StreamBuilder<List<Job>>(
stream: jobsStream,
builder: (context, snapshot) {
return ListItemsBuilder(
snapshot: snapshot,
itemBuilder: (BuildContext context, Job job) {
return JobListItem(
key: Key('jobListItem-${job.id}'),
title: job.jobName, // TODO: This be null?
onTap: () => _select(context, job),
);
},
);
},
);
}
And the ListItemsBuilder:
typedef Widget ItemWidgetBuilder<T>(BuildContext context, T item);
class ListItemsBuilder<T> extends StatelessWidget {
ListItemsBuilder({this.snapshot, this.itemBuilder});
final AsyncSnapshot<List<T>> snapshot;
final ItemWidgetBuilder<T> itemBuilder;
#override
Widget build(BuildContext context) {
// prints "waiting"
print('${snapshot.connectionState.toString()}');
if (snapshot.hasData) {
final items = snapshot.data;
if (items.length > 0) {
return _buildList(items);
} else {
return PlaceholderContent();
}
} else if (snapshot.error != null) {
print('${snapshot.error}');
return PlaceholderContent(
title: 'Something went wrong',
message: 'Can\'t load entries right now',
);
} else {
return Center(child: CircularProgressIndicator());
}
}
Widget _buildList(List<T> items) {
return ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) {
return itemBuilder(context, items[index]);
},
);
}
}
I tried using a StreamController.broadcast(sync: true) instead of a simple StreamController, but it didn't make a difference.
Also any additional pump() and pumpAndSettle() calls don't make a difference.
Any ideas?
Solution
Use await tester.pump(Duration.zero);
Full test code:
testWidgets('Job item pressed - shows edit job page',
(WidgetTester tester) async {
StreamController<List<Job>> controller = StreamController<List<Job>>();
Job job = Job(id: '0', createdAt: 0, jobName: 'Dart');
controller.add([job]);
final page = JobsPage(
jobsStream: controller.stream,
);
MockRouter mockRouter = MockRouter();
await tester.pumpWidget(makeTestableWidget(
child: page,
auth: MockAuth(),
database: MockDatabase(),
router: mockRouter,
));
// this will cause the stream to emit the first event
await tester.pump(Duration.zero);
Finder waiting = find.byType(CircularProgressIndicator);
expect(waiting, findsNothing);
Finder placeholder = find.byType(PlaceholderContent);
expect(placeholder, findsNothing);
Finder item = find.byKey(Key('jobListItem-${job.id}'));
expect(item, findsOneWidget);
await controller.close();
});