This is a minimal reproducible code.
StreamController<DocumentSnapshot> _controller = StreamController.broadcast();
Stream<DocumentSnapshot> myStream = _controller.stream;
void main() {
WidgetsFlutterBinding.ensureInitialized();
_controller.addStream(Firestore.instance.document('user/data').snapshots());
runApp(MaterialApp(home: Page1()));
}
class Page1 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
floatingActionButton: FloatingActionButton(
child: Icon(Icons.navigate_next),
onPressed: () => Navigator.push(context, MaterialPageRoute(builder: (_) => Page2())),
),
body: Center(
child: StreamBuilder(
stream: myStream,
builder: (_, snapshot) {
if (snapshot.hasData) return Text('${snapshot.data}');
return CircularProgressIndicator();
},
),
),
);
}
}
class Page2 extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: StreamBuilder(
stream: myStream,
builder: (_, snapshot) {
print("$snapshot");
if (snapshot.hasData) return Text('${snapshot.data}');
return CircularProgressIndicator();
},
),
),
);
}
}
When you run this code, 1st StreamBuilder displays data, but as you navigate to 2nd page, you'll see my 2nd StreamBuilder doesn't show any data, snapshot.data returns null. Can anyone help?
Edit: I have edited the post and now I am using StreamController.broadcast();
Related
I have a problem with my class GetInfo.
There is an error with .
The name 'QuerySnapshot' is defined in the libraries 'package:cloud_firestore/cloud_firestore.dart' and 'package:firebase/src/firestore.dart (via package:firebase/firestore.dart)'.
Try using 'as prefix' for one of the import directives, or hiding the name from all but one of the imports.
class GetInfo extends StatelessWidget {
const GetInfo({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Material(
child: StreamBuilder<QuerySnapshot>(
stream: FirebaseFirestore.instance.collection('stories').snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Text('Something went wrong');
}
if (snapshot.connectionState == ConnectionState.waiting) {
return Text('Loading');
}
return new ListView(
children: snapshot.data!.docs.map((document) {
return new ListTile(
title: Text(document.get('display_name')),
subtitle: Text(document.get('profession')),
);
}).toList(),
);
}),
);
}
}
I am using Flatter with Firebase, Firestore. I am trying to follow one of the courses but it seems this is based on old Firebase Version and I don't know how to fix the code. Any advice? Thanks for your answers!
the package is updated please check the example.
body: StreamBuilder<QuerySnapshot<Movie>>(
stream: moviesRef.queryBy(query).snapshots(),
builder: (context, snapshot) {
if (snapshot.hasError) {
return Center(
child: Text(snapshot.error.toString()),
);
}
if (!snapshot.hasData) {
return const Center(child: CircularProgressIndicator());
}
final data = snapshot.requireData;
return ListView.builder(
itemCount: data.size,
itemBuilder: (context, index) {
return _MovieItem(
data.docs[index].data(),
data.docs[index].reference,
);
},
);
},
),
final moviesRef = FirebaseFirestore.instance
.collection('firestore-example-app')
.withConverter<Movie>(
fromFirestore: (snapshots, _) => Movie.fromJson(snapshots.data()!),
toFirestore: (movie, _) => movie.toJson(),
);
I'm having trouble reading data from firestore. I want to display a user's name on screen after it is stored in firestore.
firestore document
my code is as follows, and thank you in advance for any assistance given:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class Test extends StatefulWidget {
#override
_TestState createState() => _TestState();
}
class _TestState extends State<Test> {
final db = FirebaseFirestore.instance.collection('users').snapshots();
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Test'),
),
body: StreamBuilder<QuerySnapshot>(
stream: db,
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
} else
return ListView(
children: snapshot.data!.docs.map((doc) {
return Card(
child: ListTile(
title:
// Text(doc.data()['title']),
Text(doc.get('First name')
),
));
}).toList(),
);
},
),
final Stream<DocumentSnapshot<Map<String, dynamic>>> db = FirebaseFirestore.instance
.collection('users')
.doc('Personal details')
.snapshots();
...
body: StreamBuilder<DocumentSnapshot>(
stream: db,
builder:
(BuildContext context, AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.hasError) return Text('Something went wrong');
if (snapshot.connectionState == ConnectionState.waiting)
return CircularProgressIndicator();
dynamic data = snapshot.data.data();
print(data);
print(data['First name']); // should print 'Guy'
print(data['Last name']); // should print 'Fang'
return Text(data['First name']);
},
),
In the code you showed, you are listening to the 'users' collection, instead, listen to the document 'Personal details' as shown above.
Below you can see a code where I want to display data that I have collected from a registration form in Flutter.
the registration form push the data to a collection called " user " then some other documents data are pushed as:
name - email etc...
As you can see by XXXX I want that the data I retrieve from cloud firestore be shown into the widget:
Below the code:
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
class WelcomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.pink,
body: MainWelcome(),
);
}
}
class MainWelcome extends StatefulWidget {
#override
_MainWelcomeState createState() => _MainWelcomeState();
}
class _MainWelcomeState extends State<MainWelcome> {
final databaseReference = Firestore.instance;
Future<QuerySnapshot> getData() async {
return await Firestore.instance.collection("user").getDocuments();
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: getData(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
snapshot.data.documents.forEach((element) {
Center(
child: Text(
'Benvenuta ${element.data["name"]}',
style: TextStyle(fontSize: 20, color: Colors.white),
),
);
});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");
}
return Center(child: CircularProgressIndicator());
},
);
}
}
You need to use a FutureBuilder widget to display the data in the widget tree:
Create a method that returns the data:
Future<QuerySnapshot> getData() async {
return await Firestore.instance
.collection("user")
.where("email", isEqualTo: "email_here")
.getDocuments();
}
Then inside the build() method do the following:
FutureBuilder(
future: getData(),
builder: (context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (snapshot.connectionState == ConnectionState.done) {
return ListView.builder(
shrinkWrap: true,
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int index) {
return ListTile(
contentPadding: EdgeInsets.all(8.0),
title:
Text(snapshot.data.documents[index].data["name"]),
);
});
} else if (snapshot.connectionState == ConnectionState.none) {
return Text("No data");
}
return CircularProgressIndicator();
},
),
I have seen similar questions and answers being solved with the StreamBuilder widget.
In my case when I am implementing it my code does not await to fetch the data and just moves on (in my case, the app jumps to the next page). Thus, do I need the build a StreamBuilder Widget or is there a simple method that could work and fetch the data in realtime?
I noticed that I did not use async* with the asterisc but if I do so, then the authentication is not working.
Clarification:
The code does not enter the following lines:
if (!snapshot.hasData)
return new Text('Loading...');
return new Text(
snapshot.data.data['name']
);
Also the print(test); statement prints the following:
StreamBuilder<DocumentSnapshot>
Here is the whole part:
onPressed: () async {
setState(() {
showSpinner = true;
});
try {
LoginScreen.user =
await _auth.signInWithEmailAndPassword(
email: email, password: password);
if (LoginScreen.user != null) {
// get the users data and save them
if (LoginScreen.user.user.uid !=
'IDVwQXAsZas213Va0OIH2IsoU5asdaTfraBJ2') {
Widget test = await StreamBuilder<DocumentSnapshot>(
stream: _firestore
.collection('Employees')
.document(LoginScreen.user.user.uid)
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot> snapshot) {
if (!snapshot.hasData)
return new Text('Loading...');
return new Text(
snapshot.data.data['name']
);
},
);
print(test);
Navigator.pushReplacementNamed(
context, TabCreator.screenId);
} else {
}
}
} catch (e) {
print(e);
// when getting an erro stop spinner
setState(() {
showSpinner = false;
});
}
}
Update:
I created a new standard flutter project in order to see if there was something else within my code that was messing the StreamBuilder. I am still getting no output.
On a side note when I am implementing the following code within the onPressed method I am getting the wanted result:
Alternative Solution:
onPressed: () {
DocumentReference documentReference = await Firestore.instance
.collection('Employees')
.document('8nss0gppzNfOBMuRz9H44dv7gSd2');
documentReference.snapshots().listen((datasnapshot) {
if (datasnapshot.exists) {
print(datasnapshot.data['name'].toString());
} else {
print('Error!');
}
});
}
Here is the implemented StreamBuilder implemented in the standard Flutter project:
import 'package:flutter/material.dart';
import 'package:firebase_auth/firebase_auth.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'Flutter Demo Home Page'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
final _auth = FirebaseAuth.instance;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'Testing',
style: Theme.of(context).textTheme.display1,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
// DocumentReference documentReference = await Firestore.instance
// .collection('Employees')
// .document('8nss0gppzNfOBMuRz9H44dv7gSd2');
// documentReference.snapshots().listen((datasnapshot) {
// if (datasnapshot.exists) {
// print(datasnapshot.data['name'].toString());
// } else {
// print('Error!');
// }
// });
StreamBuilder<DocumentSnapshot>(
stream: Firestore.instance
.collection('Employees')
.document('8nss0gppzNfOBMuRz9H44dv7gSd2')
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot> snapshot) {
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
switch (snapshot.connectionState) {
case ConnectionState.waiting:
return new Text('Loading...');
default:
return new Text(snapshot.data.data['name']);
}
},
);
},
tooltip: 'Increment',
child: Icon(Icons.add),
),
);
}
}
Change your code to the following:
builder: : (BuildContext context,
AsyncSnapshot<DocumentSnapshot> snapshot) {
if (!snapshot.hasData){
return new Text('Loading...');
}
else{
print(snapshot);
Navigator.pushReplacementNamed(
context, TabCreator.screenId);
}
Add an else block so when you have data it will enter the else and navigate to the page.
Also you need to use the StreamBuilder inside the build method not inside the onPressed function which is used to handle data processing. Example you can do the following:
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
bool visible = false;
final firestoreInstance = Firestore.instance;
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
// Here we take the value from the MyHomePage object that was created by
// the App.build method, and use it to set our appbar title.
title: Text(widget.title),
),
body: Center(
// Center is a layout widget. It takes a single child and positions it
// in the middle of the parent.
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
Visibility(
child: StreamBuilder<DocumentSnapshot>(
stream: Firestore.instance
.collection('users')
.document('FIJbBBiplAGorYzdtUQF')
.snapshots(),
builder: (BuildContext context,
AsyncSnapshot<DocumentSnapshot> snapshot) {
print(snapshot);
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else if (snapshot.hasData) {
print(snapshot.data.data);
return new Text(snapshot.data.data["age"].toString());
}
return new CircularProgressIndicator();
},
),
visible: visible,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: () {
setState(() {
visible = true;
});
},
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
So here I also use the Visibility() widget to hide it, but when FAB button is clicked the data from firestore will appear.
This question already has answers here:
Flutter ListView Jumps To Top
(4 answers)
Closed 2 years ago.
Scrolling up from partway down the list makes the page jump to top. I'm using Flutter and Firestore, with a StreamBuilder to get the data.
I've tried changing scroll physics, setting placeholders, and it doesn't seem to help.
StreamBuilder<QuerySnapshot>(
// Create a stream listening to the posts collection
stream: widget.firestore
.collection('posts')
.orderBy('sequence', descending: false)
.snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
// When we don't have data yet (!...hasData), display the text "Loading..."
if (!snapshot.hasData) return const Text('Loading...');
final int messageCount = snapshot.data.documents.length;
// When data is availible, load
return new ListView.builder(
//padding: EdgeInsets.all(3.0),
itemCount: messageCount,
itemBuilder: (_, int index) {
final DocumentSnapshot document = snapshot.data.documents[index];
if (document["type"] == "standard")
return StandardCard(widget.firestore, document.documentID);
else if (document["type"] == "text")
return TextCard(widget.firestore, document.documentID);
else if (document["type"] == "video")
return VideoCard(widget.firestore, document.documentID);
else
return Card(
// Database is incorrect
child: Center(
child: Text("[Missing sufficient information]"),
),
);
},
);
},
),
It scrolls smoothly when you scroll down, but jerks to the top on an up-scroll.
Here's a self-contained example.
import 'dart:math';
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'ListView Demo',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: MyHomePage(title: 'ListView Demo'),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
stream() async* {
yield ObjectHasFuture();
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: StreamBuilder(
stream: stream(),
builder: (BuildContext context, snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
return ListView.builder(
itemBuilder: (_, int index) {
return Card(
child: snapshot.data,
);
},
);
}));
}
}
class ObjectHasFuture extends StatelessWidget {
data() async {
await Future.delayed(Duration(seconds: Random().nextInt(2)));
return Container(
height: 250,
color: Colors.green,
child: Center(
child: Text(Random().nextInt(10000).toString()),
),
);
}
#override
Widget build(BuildContext context) {
return FutureBuilder(
future: data(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text("Loading");
return snapshot.data;
});
}
}
Are you doing this in debug mode or release mode? Debug mode sometimes demonstrates odd artifacts that go away in the final build.
give it a scrollController:
Listview.builder(
controller: ScrollController(),
//
)
If you are dealing with static data of very low number of list items, you can speed the list up using
ListView(
addAutomaticKeepAlives: true,
...
)