I have found a lot of solutions of how to retrive data from Firebase to Widget or with usage of async methods, although I am not able to use it for my case.
I want to use flutter_week_view from https://pub.dev/packages/flutter_week_view and in order to pass events from database I need to populate them to List<FlutterWeekViewEvent> events. I have tried the approach with StreamBuilder, but it creates a ListView widget and that's not what I intend to do:
StreamBuilder(
stream: FirebaseFirestore.instance.collection('Test').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text('Loading..');
return ListView.builder(
itemExtent: 80.0,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) => Text(snapshot
.data.documents[index]
.get('name')
.toString()));
})
I had also tried other approach:
Future<List<FlutterWeekViewEvent>> retriveRecords() async {
List<FlutterWeekViewEvent> events = [];
DateTime now = DateTime.now();
QuerySnapshot querySnapshot =
await FirebaseFirestore.instance.collection("Test").get();
for (int i = 0; i < querySnapshot.docs.length; i++) {
var a = querySnapshot.docs[i];
DateTime start = DateTime(now.year, now.month, now.day, now.hour - 7);
events.add(FlutterWeekViewEvent(
title: a.get('name'),
start: start,
end: start.add(const Duration(hours: 2)),
backgroundColor: Colors.red,
description: 'bla bla',
));
}
return events;
}
But in this case my problem is that I wanted to fill event list in build() method and it's not working, since retriveRecords is anync method.
Any help appreciated! I am begginer at Flutter.
You can call your async function retriveRecords() in FutureBuilder. It will wait for it to finish:
FutureBuilder<List<FlutterWeekViewEvent>>(
future: retriveRecords(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
List<FlutterWeekViewEvent> weekEvents = snapshot.data;
return DayView(
date: DateTime.now(),
events: weekEvents,
);
}
return const Text('Loading..');
},
)
Try replace
From : a.get(name);
To : a.data[name]
Let me know if it works...
StreamBuilder(
stream: FirebaseFirestore.instance.collection('Test').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Text("Loading");
} else if (snapshot.hasData && snapshot.connectionState == ConnectionState.active) {
List<QueryDocumentSnapshot> documentSnapshot = snapshot.data.documents;
List<FlutterWeekViewEvent> events = [];
for(QueryDocumentSnapshot doc in queryDocumentSnapshot) {
DateTime start = DateTime(now.year, now.month, now.day, now.hour - 7);
final flutterWeekViewEvent = FlutterWeekViewEvent(
title: doc.data()["name"],
start: start,
end: start.add(const Duration(hours: 2)),
backgroundColor: Colors.red,
description: "bla bla",
);
events.add(flutterWeekViewEvent);
}
}
return ListView.builder(
itemExtent: 80.0,
itemCount: event.length,
itemBuilder: (context, index) {
/// I got this part from the package
return DayView (
date: now,
event: events,
);
}
);
});
Related
I am looking at my code and wondering for 2 hours now without luck so I will ask for help here.
I have a button, when I press it, it displays a random item from the list view. The problem is I also have a check box on the list view with each item. I do not want it to (Shuffle through the items with the checkbox ticked) only to shuffle through the Task in the list view that are unchecked/unticked/are not done.
Here is my code
class TaskData extends ChangeNotifier {
List<Task> _tasks = [
Task(name: "item1"),
Task(name: "item2"),
Task(name: "item3"),
];
UnmodifiableListView<Task> get tasks {
return UnmodifiableListView(_tasks);
}
int get taskCount {
return _tasks.length;
}
// <<Here is the code that shuffles through list
Future<String> rann() async {
return (_tasks.toList()..shuffle()).first.name;
}
void addTask(String newTaskTitle) {
final task = Task(name: newTaskTitle);
_tasks.add(task);
notifyListeners();
}
void updateTask(Task task) {
task.toggleDone();
notifyListeners();
}
In another script I have this one
class Task {
final String name;
bool isDone;
Task({required this.name, this.isDone = false});
void toggleDone() {
isDone = !isDone;
}
}
In another script file I have this code
Padding(
padding:
const EdgeInsets.symmetric(horizontal: 20, vertical: 0),
child: FutureBuilder(
future: Provider.of<TaskData>(context).rann(),
builder: (context, snapshot) {
return Align(
alignment: Alignment.center,
child: Text(
"${snapshot.data}",
//softWrap: true,
textAlign: TextAlign.center,
//textWidthBasis: TextWidthBasis.longestLine,
style: TextStyle(
color: Colors.white,
fontSize: 30,
fontWeight: FontWeight.w700),
),
);
},
),
),
In another script I have this one
class TasksList extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Consumer<TaskData>(
builder: (context, taskData, child) {
return ListView.builder(
itemBuilder: (context, index) {
final task = taskData.tasks[index];
return TaskTile(
taskTitle: task.name,
isChecked: task.isDone,
checkboxCallback: (checkboxState) {
taskData.updateTask(task);
},
);
},
itemCount: taskData.taskCount,
);
},
);
}
}
Any help would be appreciated!
Edit : I also forgot to include this part of code
class TaskTile extends StatelessWidget {
final bool isChecked;
final String taskTitle;
final Function(bool?) checkboxCallback;
final VoidCallback longPressCallback;
TaskTile(
{required this.isChecked,
required this.taskTitle,
required this.checkboxCallback,
required this.longPressCallback});
#override
Widget build(BuildContext context) {
return ListTile(
onLongPress: longPressCallback,
title: Text(
taskTitle,
// at the bottom, it sets decoration of text if isChecked is true, if its not its null
style: TextStyle(
decoration: isChecked ? TextDecoration.lineThrough : null),
),
trailing: Checkbox(
activeColor: Colors.blue,
value: isChecked,
onChanged: checkboxCallback,
),
);
}
}
updated:
class TaskData extends ChangeNotifier {
List<Task> _undoneTasksShuffled = []
// you don't need anymore the rann method() instead you should iterate over this listView
UnmodifiableListView<Task> get undoneTasksShuffled => UnmodifiableListView<Task>(_undoneTasksShuffled);
#override
void notifyListeners() {
//this updates _undoneTasksShuffled every time you call notifyListeners
_undoneTasksShuffled = _tasks.where((e)=> !e.isDone).toList()..shuffle();
super.notifyListeners();
}
...
}
I think you only need to filter the results before get a random element. you need to modify your rann method for something like
//you don't really need a future method because you don't have async code
String rann() {
final r = Random();
final undoneTasks = _tasks.where((e)=> !e.isDone).toList();
//this is for avoid RangeException on list. you can return any other thing
if(undoneTasks.isEmpty) return '';
// i think that you don't really need to shuffle whole list, you only need a random element
return undoneTasks[r.nextInt(undoneTasks.length)].name;
}
i hope this solves your question
I am creating a List in Flutter and displaying it in a Column, When I Run it is just Empty and when I print the list it just prints an Array
I/flutter (24613): []
I am using this code to create the List:-
myFunction() {
return StreamBuilder(
stream:
users.orderBy('timestamp', descending: true).limit(30).snapshots(),
builder: (context, snapshot) {
List<UserList> usersList = [];
snapshot.data.documents.forEach((doc) {
User user = User.fromDocument(doc);
UserList userList = UserList(user);
usersList.add(userList);
});
return Column (children: usersList);
}
),
}
This is My User Class:-
class User {
final String id;
final String username;
final String email;
final String photoUrl;
User({
this.id,
this.username,
this.email,
this.photoUrl,
});
factory User.fromDocument(DocumentSnapshot doc) {
return User(
id: doc.data()['id'],
username: doc.data()['username'],
email: doc.data()['email'],
photoUrl: doc.data()['photoUrl'],
);
}
}
The Code Is Showing No Errors and the Column Is not Displaying, Also When I print The length of the List it Shows it is Zero:-
I/flutter (24613): 0
What Could be The problem ??
I guess we need to tweak some of your code little bit to make the logic working. :)
builder param should be specified with Type otherwise it will be of type dynamic. To be in safer side in this case it will be QuerySnapshot. So,
builder: (context, snapshot) in your code becomes
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot).
Next, there is no need of looping through foreach and instead you can try something like below.
snapshot.data.docs.map((document) { .... }
snapshot.data.documents in your code is not valid way of getting the Firestore Documents. Please refer official doc
And you need to return a widget from builder which you have done correctly. But, by mistake you are passing the List<UserList> to Column which will be expecting List<Widget>
return Column (children: usersList);
Here I can see you are passing usersList which is of type List<UserList>. So you can replace Column with ListView or similar kind of other widget since, Column doesn't support scroll.
So combining all these bits and pieces you will get the below snippet.
return StreamBuilder(
stream: FirebaseFirestore.instance
.collection('users')
.orderBy('timestamp', descending: true)
.limit(30)
.snapshots(), // Just for simplicity.
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
//When there is no data returned from the firebase.
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return ListView(
children: snapshot.data.docs.map((document) {
return Text("Title: " + document['username']);
}).toList(),
);
},
);
For simplicity, I have returned the Text widget. You can implement your own UI there.
NOTE : This is the basic working example and you need to fine tune accordingly like using model classes instead of directly accessing based on your requirements.
Your Code
myFunction() {
return StreamBuilder(
stream:
users.orderBy('timestamp', descending: true).limit(30).snapshots(),
builder: (context, snapshot) {
List<UserList> usersList = [];
snapshot.data.documents.forEach((doc) {
User user = User.fromDocument(doc);
UserList userList = UserList(user);
usersList.add(userList);
});
return Column (children: usersList);
}
),
}
It is because you have to await for the json to actually get parse to the dart model. Second thing is forEach method is synchronous it doesn't wait for the async operation to complete, this is the reason why your list is empty.
This SO question has lot of different ways to make a list work asynchronously in flutter.
Column shows data before fetching data, so it shows empty list. For this use setstate according to your state management type ("notifylisteners" in provider) after getting data, so by this the screen will be updated and column also shows the updated list.
I'm not very sure how you're handling the scope of the variable.
Here's my minimal reproducible code which can give you some idea on how to add the items to the list.
class MyPage extends StatefulWidget {
#override
_MyPageState createState() => _MyPageState();
}
class _MyPageState extends State<MyPage> {
final List<Widget> _list = [FlutterLogo()];
#override
void initState() {
super.initState();
Timer.periodic(Duration(seconds: 1), (timer) {
if (timer.tick >= 2) timer.cancel();
setState(() => _list.add(FlutterLogo()));
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: Column(children: _list),
);
}
}
As 'Ashutosh patole' said, 'forEach' method does not wait iteration's complete.
I think that because of this reason, although you made a 'usersList',
there is no data when build widget in 'usersList'.
To fix this, you'd better change from 'forEach' to 'for'.
void main() async {
List<String> data = [ 'a', 'b', 'c'];
List<String> result = [];
data.forEach((data) async {
await Future.delayed(Duration(seconds: 1));
result.add(data);
});
print(result);
await Future.delayed(Duration(seconds: 3));
print(result);
print('-----------------');
result = [];
for (var item in data) {
await Future.delayed(Duration(seconds: 1));
result.add(item);
}
print(result);
await Future.delayed(Duration(seconds: 3));
print(result);
}
In your code, you can change like below.
List<UserList> usersList = [];
for (var doc in snapshot.data.documents) {
User user = User.fromDocument(doc);
UserList userList = UserList(user);
usersList.add(userList);
}
Before calling the data, check all fields:
Firestore Docs
Add a print() to see where the problem
FutureBuilder<DocumentSnapshot>(
future: users.doc(documentId).get(),
builder:
(BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
//This
if (snapshot.hasError) {
return Text("Something went wrong");
}
print(snapshot.data);
//This
if (snapshot.hasData && !snapshot.data!.exists) {
return Text("Document does not exist");
}
print(snapshot.data);
//This
if (snapshot.connectionState == ConnectionState.done) {
Map<String, dynamic> data = snapshot.data!.data() as Map<String, dynamic>;
return Text("Full Name: ${data['full_name']} ${data['last_name']}");
}
return Text("loading");
},
);
This is what i typically use.Try out this! Please balance the brackets in the code
FutureBuilder(
future: users.orderBy('timestamp', descending: true).limit(30),
builder: (BuildContext context, AsyncSnapshot<List<User>> snapshot) {
List<User>ulist=snapshot.data;
return ListView.builder(
shrinkWrap: true,
padding: EdgeInsets.only(top: 25,bottom: 35),
itemCount: evlist==null?0:evlist.length,
itemBuilder: (BuildContext context, int index) {
String evtime=evlist[index].fromdate.substring(11,16);
String ontime=evlist[index].fromdate.substring(0,16);
return Container(
decoration: BoxDecoration(
border: Border.all(width: 1.8,color: Colors.indigo[900]),
borderRadius: BorderRadius.circular(12.0),
color: Colors.grey[200]
),
margin:
const EdgeInsets.symmetric(horizontal: 18.0, vertical: 4.0),
child: ListTile(
leading: Icon(Icons.notifications),
title: Text(ulist[index].username.toString()),
subtitle:Text("next data"),
),
);
},
);
I am new to flutter and this is my first app. I am trying to make a to do list app and want to display the time left for each task in the subtitle. I have a listview and in each element I want the have the subtitle display the minute, counting downwards towards 0. Can anyone help me with this ? Thanks!
Code : -
class toDoListState extends State<toDoList>
{
List<String> tasks = [];
List<String> completedTasks = [];
List<String> descriptions = [];
List<bool> importance = [];
List<String> time2completion = [];
List<DateTime> time = [];
Widget buildToDoList()
{
return new ListView.builder
(
itemBuilder: (context, index)
{
if(time2completion.length > 0 && index < time2completion.length && time2completion[index] != "none")
{
if(time2completion[index] == "30 minutes")
{
time[index] = DateTime.now().add(Duration(minutes: 30));
}
else if(time2completion[index] == "1 hour")
{
time[index] = DateTime.now().add(Duration(hours: 1));
}
else if(time2completion[index] == "12 hours")
{
time[index] = DateTime.now().add(Duration(hours: 12));
}
else if(time2completion[index] == "1 day")
{
time[index] = DateTime.now().add(Duration(days: 1));
}
}
if(index < tasks.length)
{
return row(tasks[index], descriptions[index], index);
}
},
);
}
Widget row(String task, String description, int index)
{
return Dismissible(
key: UniqueKey(),
background: Container(color: Colors.red, child: Align(alignment: Alignment.center, child: Text('DELETE', textAlign: TextAlign.center, style: TextStyle(color: Colors.white, fontSize: 18),))),
direction: DismissDirection.horizontal,
onDismissed: (direction) {
setState(() {
tasks.removeAt(index);
if(completedTasks.contains(task))
{
completedTasks.removeAt(index);
}
descriptions.removeAt(index);
importance.removeAt(index);
});
Scaffold.of(context).showSnackBar(SnackBar(content: Text(task+" dismissed")));
},
child: CheckboxListTile(
controlAffinity: ListTileControlAffinity.leading,
title: Text(task, style: (completedTasks.contains(task)) ? TextStyle(decoration: TextDecoration.lineThrough) : TextStyle(),),
subtitle: Text((time[index].difference(DateTime.now()).toString())),
value: completedTasks.contains(task),
onChanged: (bool value) {
setState(() {
if(!completedTasks.contains(task))
{
completedTasks.add(task);
}
else
{
completedTasks.remove(task);
}
});
},
));
}
}
You can use a timer to calculate the time differences every minute.
Timer.periodic(
Duration(minutes: 1),
(Timer t) => setState(() {
// your calculation here
}),
);
The following will create a timer object in your stateful widget and dispose of it when you navigate away from the view:
Timer _timer;
#override
void initState() {
_timer = Timer.periodic(
Duration(minutes: 1),
(Timer t) => setState(() {
// your calculation here
}),
);
super.initState();
}
#override
void dispose() {
_timer.cancel();
super.dispose();
}
You can achieve this by following:
Suppose you already have saved date in your todo and have already a date available in
form of DateTime object here in my example I am assuming savedDateTime which can be achieved either by assigning it using .hour , .sec or parsing it from string.
Now what you do is to find what time is left that is differnce
//already assumed saved date as a DateTime object that is savedDateTime
// it contains our saved date of note
//now
final currentDateTime = DateTime.now();
final difference = currentDateTime.difference(savedDateTime);
difference in Seconds,Hours,Minutes,Days is given by
print(difference.inSeconds);
print(difference.inHours);
print(difference.inMinutes);
print(difference.inDays);
I need to convert a snapshot from cloud firestore to a list, i know this is unnecessary to show the data but i need it to reorder the data based in other parameters, this is my code
Stream chatRooms;
List item = [];
Widget chatRoomsList() {
return StreamBuilder(
stream: chatRooms,
builder: (context, snapshot) {
if (snapshot.hasData &&
!snapshot.hasError) {
item = [];
item = snapshot.data;
return ListView.builder(
itemCount: item.length,
shrinkWrap: true,
itemBuilder: (context, index) {
return ChatRoomsTile(
otherUserUid:item[index]['arrayUsers']
.replaceAll("[", "")
.replaceAll(widget.user.uid, "")
.replaceAll("]", "")
.replaceAll(",", "")
.replaceAll(" ", ""),
chatRoomId:
item[index]["chatRoomId"],
user: widget.user,
);
});
} else
return Container();
},
);
}
#override
void initState() {
getUserInfogetChats();
super.initState();
}
getUserInfogetChats() async {
DatabaseMethods().getUserChats(widget.user.uid).then((snapshots) {
setState(() {
chatRooms = snapshots;
});
});
}
and im getting this error
════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following _TypeError was thrown building StreamBuilder<dynamic>(dirty, state: _StreamBuilderBaseState<dynamic, AsyncSnapshot<dynamic>>#48820):
type 'QuerySnapshot' is not a subtype of type 'List<dynamic>'
Change:
item = snapshot.data;
into this:
item = snapshot.data.documents;
documents should return a List<DocumentSnapshot>, so also change the type of item:
List<DocumentSnapshot> item = [];
I am trying to create an app which displays a dynamic FireStore List. I have made the List with a Future Builder, what I am trying to achieve is to add a Icon to every list of which the URL should be fetched from firesotre of the same documents Index. For Eg. Flipkart is a Document in FireStore it has a "images" field with the URL to Flipkart logo. I want the List View "leading" property to display this image by getting the URL from FireStore Database.
ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (_, index) {
return Card(
margin: EdgeInsets.fromLTRB(10, 2, 10, 2),
elevation: 3,
borderOnForeground: true,
child: ListTile(
title: Text(snapshot.data[index].data['title']),
subtitle: Text(snapshot.data[index].data['description']),
onTap: () => navigateToDetails(snapshot.data[index]),
),
);
});
The Code would go something like
ListTile(
leading: "Code Goes Here"
title: Text(snapshot.data[index].data['title']),
subtitle: Text(snapshot.data[index].data['description']),
Please share your valuable thoughts. I would like this to work, New to programming.
Full Code For FireStore Get Data:
class OfferScroll extends StatefulWidget {
#override
_OfferScrollState createState() => _OfferScrollState();
}
class _OfferScrollState extends State<OfferScroll> {
Future _data;
Future getOffers() async {
var firestore = Firestore.instance;
QuerySnapshot qn = await firestore.collection('Offers').getDocuments();
return qn.documents;
}
navigateToDetails (DocumentSnapshot offers) {
Navigator.push(context, MaterialPageRoute(builder: (context) =>
OfferDetails(offers: offers,)));
}
#override
void initState() {
super.initState();
_data = getOffers();
}
#override
Widget build(BuildContext context) {
return Container(
child: FutureBuilder(
future: _data,
builder: (_, snapshot) {
if (snapshot.connectionState == ConnectionState.waiting) {
return Center(
child: AwesomeLoader(
loaderType: AwesomeLoader.AwesomeLoader3,
color: Colors.green[900],
),
);
} else {
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (_, index) {
return Card(
margin: EdgeInsets.fromLTRB(10, 2, 10, 2),
elevation: 3,
borderOnForeground: true,
child: ListTile(
title: Text(snapshot.data[index].data['title']),
subtitle: Text(snapshot.data[index].data['description']),
onTap: () => navigateToDetails(snapshot.data[index]),
),
);
});
}
}),
);
}
}
When you have the URL as a string in your FireStore you can retrieve the URL with someone like this: snapshot.data[index].data['imageFieldName'] and then you can give the return of this (the URL) to a NetworkImage to display the image.