Flutter Update Text Widget Variable Without Reloading
Im using Flutter with Firestore to make Investing Application. enter image description here In this page, I get Firestore's data in Streambuilder. The data what i recieved are displayed in Listview with Inkwell. What I want to do is when I click the Inkwell, then change the bottom left's Text Widget's text into Listview's number. So, I used the setstate method with FutureBuilder. It works but there are some problems. When I click the Inkwell, then whole page reloads. So, My Streambuilder widgets displays circleprogressindicator short. However I think this is not good for users. I want to solve this problem. Is there any solution? My code is in here. I'm sorry for my poor English and I hope my problem was properly communicated. https://github.com/RGLie/Investing-Game-ICISTS/blob/main/lib/startup_1_trade.dart
Answer
You can fix the rebuilds by storing the streams in variables outside of the build
method and using them in the StreamBuilder
widgets.
class Startup1Trade extends StatefulWidget {
...
}
class _Startup1TradeState extends State<Startup1Trade> {
...
CollectionReference prices = FirebaseFirestore.instance.collection('startup_1');
CollectionReference users = FirebaseFirestore.instance.collection('users');
final Stream priceStream = prices.doc('price').snapshots();
final Stream userStream = users.doc(widget.user.uid).snapshots();
@override
Widget build(BuildContext context) {
...
}
}
Use them like this:
StreamBuilder<DocumentSnapshot>(
stream: priceStream,
builder: (context, snap) {
...
}
}
StreamBuilder<DocumentSnapshot>(
stream: userStream,
builder: (context, snap) {
...
}
}
Related Questions
- → How can I query Firebase for an equalTo boolean parameter?
- → How can I access nested data in Firebase with React?
- → Firebase simple blog (confused with security rules)
- → Removing item in Firebase with React, re-render returns item undefined
- → AngularJS Unknown Provider Error (Firebase & AngularFire)
- → How do you pass top level component state down to Routes using react-router?
- → "this" is null in firebase query function in reactjs
- → Angular Module Failed to Load
- → Multiple dex files define Lcom/google/android/gms/internal/zzrx;
- → Joining Firebase tables in React
- → How can I make add firepad to my reactjs project?
- → How to use Cloud Functions for Firebase to prerender pages for SEO?
- → React.js component has null state?