I am creating this shopping app , the home page displays pictures and some data from firestore firebase as a gridView. THIS IS THE SCREEN OF THIS PAGE
Once the user click on one of the images in this page the app will show him another page contains more details about the product with Hero animation.
THIS IS THE SECOND PAGE
The second page is a stateless widget and it takes some parameters
#override
Widget build(BuildContext context) {
return GridView.builder(
........
itemBuilder: (BuildContext context, int index){
String image = documents[index].data['image'].toString();
String ti = documents[index].data['title'].toString();
String prix = documents[index].data['price'].toString();
String desc = documents[index].data['description'].toString();
String categ = documents[index].data['category'].toString();
return new Material(
elevation: 5.0,
borderRadius:
new BorderRadius.all(new Radius.circular(15.0)),
child: new InkWell(
onTap: () {
Navigator.push(
context,
new MaterialPageRoute(
builder: (context) =>
new FullScreenImagePage(image,ti,prix,desc,categ)));
},
child: new Hero(
tag: image,
child: new Column(
children: <Widget>[
new Padding(padding: EdgeInsets.all(4.0)),
new FadeInImage(
image: new NetworkImage(image),
fit: BoxFit.cover,
placeholder: new AssetImage("assets/ic.png"),
),
new Text(ti, style: TextStyle(fontSize: 13.0, height: 1.0),),
new Text('prix: $prix MAD', style: TextStyle(fontSize: 9.0),),
],
),
),
),
);
Then I receive the parameters in this class
class FullScreenImagePage extends StatelessWidget {
String imgPath ,title,price,desc,categ;
FullScreenImagePage(this.imgPath,this.title,this.price,this.desc,this.categ);
......
Padding(
padding: EdgeInsets.all(10.0),
child: Hero(
tag: imgPath,
child: Material(
elevation: 20.0,
shadowColor: Colors.black26,
child: Image(
image: NetworkImage(imgPath),
fit: BoxFit.cover,
),
),
),
),
The problem that I have is that I wanna change the stateless widget of FullScreenImagePage to stateful with keeping the same variables
if you are using IntelliJ
you can change you stateless widget into a stateful one using alt+enter
go to the class name{{FullScreenImagePage}
press alt + Enter
Just convert the stateless widget to stateful widget either manually or by using the shortcut(quick fix). Then access your variable in the state subclass using widget.variable_name
Related
At 54 I'm self-learning Flutter and have come a long way. I am stuck (again) with a speed-bump concerning my implementation of Firebase. Although I am getting the very basic of displaying a line of data for each record the problem is getting to the details of each record. I believe the issue is that I am not referencing the record ID.
When looking at endless examples I also believe my code to display a ListView of records is bloated making it more difficult to grab a record and display all fields (edit screen).
I want to click the "Walsh-Test" links to view all fields and update. I can create a new edit/update screen my initial problem is opening the screen to the selected record.
Any advice would be greatly appreciated.
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/rendering.dart';
class MeterReadHomeScreen extends StatelessWidget {
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
backgroundColor: Color(0xff4367b1),
automaticallyImplyLeading: false,
leading: GestureDetector(
onTap: () {
Navigator.pop(context);
},
child: Icon(
Icons.arrow_back,
color: Colors.white,
),
),
title: Text(
"WelakaOne",
style: TextStyle(
color: Colors.white,
),
),
),
body: StreamBuilder(
stream: FirebaseFirestore.instance
.collection('meter_reads')
.orderBy('accountname')
.snapshots(),
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(),
);
}
return Padding(
padding: const EdgeInsets.fromLTRB(6, 20, 0, 0),
child: Container(
child: GestureDetector(
onTap: () {},
child: ListView(
children: snapshot.data.docs.map(
(document) {
return Row(
children: [
Container(
width: 50,
child: Icon(
Icons.access_alarm,
size: 36,
color: Color(0xff4367b1),
),
),
Container(
child: Text(
document['accountname'],
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.bold,
color: Color(0xff4367b1),
),
),
),
SizedBox(height: 44),
],
);
},
).toList(),
),
),
),
);
},
),
);
}
}
[![Flutter/Firebase/Open to Selected Record][1]][1]
I understand that you want to go to another page (Edit Screen) onTapping the alarm tile.
So, my suggestion is to use A ListTile widget instead of the row widget you are using.
You can read about ListTile's onTap property, here
Regarding your routing to a new screen/page, you'll have to make use of MaterialPageRoute to create a new route and using Navigator's push method you can push it onto your Material App.
Attaching an example code that uses Navigator to go to different pages, you need the BuildContext of your app. Here is an example of how you can get it:
import 'package:flutter/material.dart';
import 'package:rate_your_professor/screens/firstScreen.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Some App',
home: SomeApp(),
);
}
}
class SomeApp extends StatelessWidget {
Widget getListView(BuildContext context) {
var listView = ListView(
children: <Widget>[
Text(
"XXXXXXXXXXXXXXX",
textDirection: TextDirection.rtl,
textAlign: TextAlign.center,
),
ListTile(
leading: Icon(Icons.location_city),
title: Text("XXXXX ", textDirection: TextDirection.rtl),
subtitle: Text(
"XXXXXXXXXX",
textDirection: TextDirection.rtl,
),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => YourNewPage(),
),
);
},
),
],
);
return listView;
}
#override
Widget build(BuildContext context) {
return Scaffold(body: getListView(context));
}
}
My application has Firebase Authentication implemented and each user have to input their display name to register into the application.
Inside my application I want the user to be able to update this display name.
The logic is very simple, user clicks 'Change Display Name' button, a ModalBottomSheet appears where user can input his new display name and save it. But this way the screen doesn't gets updated when the display name is changed until I hot reload or restart the application.
class Body extends StatelessWidget {
final FirebaseAuth _auth = FirebaseAuth.instance;
#override
Widget build(BuildContext context) {
String displayName = _auth.currentUser.displayName;
final _formKey = GlobalKey<FormState>();
String newDisplayName;
return Scaffold(
appBar: AppBar(),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text(
'Current display name is:',
style: TextStyle(fontSize: 20),
),
Text(
'$displayName',
style: TextStyle(fontSize: 25),
),
RaisedButton(
child: Text('Change Display Name'),
onPressed: () {
showModalBottomSheet(
isScrollControlled: true,
context: context,
builder: (context) {
return Padding(
padding: MediaQuery.of(context).viewInsets
child: Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
TextFormField(
decoration: InputDecoration(
labelText: 'New Display Name',
),
keyboardType: TextInputType.text,
onSaved: (value) {
newDisplayName = value;
},
),
RaisedButton(
child: Text('Change'),
onPressed: () {
_formKey.currentState.save();
_auth.currentUser
.updateProfile(displayName: newDisplayName);
Navigator.pop(context);
},
),
],
),
),
);
},
);
},
),
],
),
),
);
}
}
I have tried to call .reload in different places but the display name won't change until page is refreshed.
_auth.currentUser.reload();
EDIT: Solution thanks to https://stackoverflow.com/users/11921453/twelve
Wrap the manin widget with the following StreamBuilder and you will be able to retrieve the snapshot.data.displayName instantly.
child: StreamBuilder<User>(
stream: FirebaseAuth.instance.userChanges(),
Firebase has a stream to listen to user changes. Define this stream next to your _auth.
Wrap your widget-tree with au streambuilder and set the value to the defined stream.
Now the widget-tree gets rebuild every time the user data changes.
So I'm trying to design a Widget which can basically create a view where you can have something like this:
The problem that I'm facing is that for this example I used is calls to API's of Firebase, however, now I'm using the Firebase Auth and Firestore Extentionts and don't want to use the provider package or HTTP request, I have the following Firestore Collection:
As you see the collection name is users but inside has the user uid given by Firebase as a Document and inside that document has all the user Data.
So I need some help to have the following functionalities:
I need to create a ListView preferably ListView Builder so it can show the entire collection so it can display all the users contained in the collection. (Each user is a Document titled with his own User uid).
In the Tile, I want to display just name and Image but once it is clickable it should send me to a new page (the user profile page sending as an argument the uid)
I got this code: but I don't have the logic on how to get the list tile clickable and get the uid of the click user (in the tile) to send the info (uid) to the next page. But once I know how to display the contents of all the documents in the collection (displaying the name (nombre) inside each document as a title and how to capture the uid, I bet I can do the modifications and eliminations.
import 'package:flutter/material.dart';
import 'package:firebase_firestore/firebase_firestore.dart';
class ExpenseList extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection("users").snapshots,
builder: (BuildContext context, AsyncSnapshot<QuerySnapshot> snapshot) {
if (!snapshot.hasData) return new Text("No existe registros de Usuario");
return new ListView(children: getExpenseItems(snapshot));
});
}
getExpenseItems(AsyncSnapshot<QuerySnapshot> snapshot) {
return snapshot.data.documents
.map((doc) => ListTile(title: new Text(doc["nombre"], onTap: (){
//Here function to navigate to profile page saving the uid
}))
.toList();
}
}
In that list tile, I should have a Network image as I can have a parameter the image from the document in the collection.
Is there anything I can do?
Kind Regards.
Here you can find an example of a custom build ListView.
var futureBuilder=new FutureBuilder(
future: makecall.firebaseCalls(databaseReference), // async work
builder: (BuildContext context, AsyncSnapshot snapshot) {
switch (snapshot.connectionState) {
case ConnectionState.none: return new Text('Press button to start');
case ConnectionState.waiting: return new Text('Loading....');
default:
if (snapshot.hasError)
return new Text('Error: ${snapshot.error}');
else
return ListView.builder(
itemCount: snapshot.data.length,
itemBuilder: (BuildContext context, int index){
return Card(
elevation: 0.0,
child: Padding(
padding: const EdgeInsets.all(0.0),
child: SizedBox(
height: MediaQuery.of(context).size.height*0.15,
width: MediaQuery.of(context).size.width,
child: Card(
elevation: 0,
child: Row(
children: <Widget>[
new Container(
child: Image.network(snapshot.data[index].iconUrl,height: MediaQuery.of(context).size.width*0.3,width: MediaQuery.of(context).size.width*0.3,),
),
Padding(
padding: const EdgeInsets.only(left: 10,right: 5,top: 5),
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
new Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: <Widget>[
condition('${snapshot.data[index].vegOrNon}')==true? new Image.asset('images/non_veg.png',height: 15,width: 15,): new Image.asset('images/veg.jpg',height: 15,width: 15),
SizedBox(width: 5),
Text(snapshot.data[index].foodtitle, style: TextStyle(fontWeight: FontWeight.w500, fontSize: 20,fontFamily: 'Roboto-Black'),)
],
),
SizedBox(height:10.0),
Row(
children: <Widget>[
new IconTheme(
data: new IconThemeData(
color: Colors.black26),
child: new Icon(Icons.timer,size: 20.0,),
),
Text('${snapshot.data[index].PreptimeInMins} minutes',style: TextStyle(fontWeight: FontWeight.w700,color: Colors.black26),),
],
),
],
)
],
),
),
],
),
),
],
)
)
),
),
);
},
);
}
},
);
I found this example on this guide and I think that it can be usefull for you.
If your issue is how to make a ListView tile clickable you can use the GestureDetector class to wrap your tile and send the UID in the .OnTap event
Placing a dummy image inside a CircleAvatar. The dummy image is replaced by the main image which is fetched from cloud firestore database.
Here I am trying to make Profile-image which contain User-Profile for that I have used CircleAvatar which will store image in it. Retrieval of image is done well & working properly. But now I have mixed up with some "Question" if technically the profile URL is not saved in firestore database then it will throw error. So to stop the prevention of the error I need to use dummy image which will be replaced by the main image fetched from cloud firestore database.
Now the Q:- How can I place dummy image inside a CircleAvatar and that dummy image is replace by the main image
class DetailPage extends StatefulWidget {
final DocumentSnapshot post;
DetailPage({this.post});
#override
_DetailPageState createState() => _DetailPageState();
}
class _DetailPageState extends State<DetailPage> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Detail'),
),
backgroundColor: Colors.white,
body:
Form(
child: ListView(
scrollDirection: Axis.vertical,
children: <Widget>[
SizedBox(
height: 20.0,
),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Align(
alignment: Alignment.center,
child: CircleAvatar(
radius:73 ,
backgroundColor: Colors.blue,
child: ClipOval(
child: new SizedBox(
width: 125,
height:125,
child: Image.network(widget.post.data['image'],height: 108,fit: BoxFit.fill,),
),
),
),
),
],
),
],
),
),
);
}
}
You can Look into this. this supports the functionality you require.
https://pub.dev/packages/cached_network_image
you can put any widget in the placeholder. and it also supports erros indicators
CachedNetworkImage(
imageUrl: "http://via.placeholder.com/350x150",
placeholder: (context, url) => CircularProgressIndicator(),
errorWidget: (context, url, error) => Icon(Icons.error),
),
This is my problem:
I have a ListPost StatefulWidget where I want to display a list of widgets that contains the user's account image, the user's name, and the user's posts images(similar to Facebook feeds), however, I have gotten to the point that I need to get that data from two different collections in Firebase (see my firebase collections image below).
The good thing is that I have been able to get that data only from one collection(userFeed) and display that data in my ListPost file in different widgets, however, I do not know how to get data from another collection in Firebase using the same streamBuilder and display all that data I want to display in other widgets in my ListPost screen.
So, my specific question is:
How can I make my ListPost screen to populate data from 2 different collections in Firebase using a stream builder or another type of implementation?
This is the firebase image
This is the complete code for the ListPost screen
import 'package:cached_network_image/cached_network_image.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'models/post_model.dart';
final _stream = Firestore.instance.collection('userFeed').snapshots();
class ListPosts extends StatefulWidget {
#override
_ListPostsState createState() => _ListPostsState();
}
class _ListPostsState extends State<ListPosts> {
#override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
//this is the Streambuilder to get the data however it only lets me to get one collection
child: StreamBuilder(
stream: _stream,
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
return ListView.builder(
itemExtent: 550.0,
itemCount: snapshot.data.documents.length,
itemBuilder: (BuildContext context, int data) {
//here I get the data from the userFeed colecction
Post post = Post.fromDoc(snapshot.data.documents[data]);
return Column(
children: <Widget>[
GestureDetector(
child: Container(
padding: EdgeInsets.symmetric(
horizontal: 16.0,
vertical: 10.0,
),
child: Row(
children: <Widget>[
CircleAvatar(
radius: 25.0,
backgroundColor: Colors.grey,
backgroundImage: post.imageUrl.isEmpty
? AssetImage(
'assets/images/user_placeholder.jpg')
: CachedNetworkImageProvider(post.imageUrl),
),
SizedBox(width: 8.0),
Text(
post.caption,
style: TextStyle(
fontSize: 18.0,
fontWeight: FontWeight.w600,
),
),
],
),
),
),
GestureDetector(
child: Stack(
alignment: Alignment.center,
children: <Widget>[
Container(
height: MediaQuery.of(context).size.width,
decoration: BoxDecoration(
image: DecorationImage(
image:
CachedNetworkImageProvider(post.imageUrl),
fit: BoxFit.cover,
),
),
),
],
),
),
],
);
},
);
},
),
),
);
}
}
UPDATE 05-22-2020 HOW I FIXED THE ISSUE
Credits to the user griffins, he helped me to fix this issue.
This is what I do:
I nested my StreamBuilder so I can use 2 streams at the same time
return StreamBuilder(
stream: _stream,
builder: (context, snapshot1) {
return StreamBuilder(
stream: _stream2,
builder: (context, snapshot2) {
if (!snapshot2.hasData) return const Text('Loading...');
if (!snapshot1.hasData) return const Text('Loading...');
return ListView.builder(
itemExtent: 550.0,
itemCount: snapshot2.data.documents.length,
itemBuilder: (BuildContext context, int data) {
User user = User.fromDoc(snapshot2.data.documents[data]);
Post post = Post.fromDoc(snapshot1.data.documents[data]);
return buildbody(user, post, context);
},
);
},
);
},
);
You can can make you body take a widget ListView and for the Listview children have both your lists.
example
body: ListView(
children: <Widget>[
---list1----
--list2-----
]);
or you can use a custom scroll view
return new Scaffold(
appBar: new AppBar(
title: new Text("Project Details"),
backgroundColor: Colors.blue[800]),
body:
new CustomScrollView(
slivers: <Widget>[
new SliverPadding(padding: const EdgeInsets.only(left: 10.0,right: 10.0,
top: 10.0,bottom: 0.0),
sliver: new SliverList(delegate:
new SliverChildListDelegate(getTopWidgets())),
),
new SliverPadding(padding: const EdgeInsets.all(10.0),
sliver: new SliverList(delegate: new SliverChildListDelegate(
getSfListTiles()
))),
new SliverPadding(padding: const EdgeInsets.all(10.0),
sliver: new SliverList(delegate: new SliverChildListDelegate(
getWorkStatementTiles()
))),
]
)
);
update
from #Rémi Rousselet answer You can nest StreamBuilder
StreamBuilder(
stream: stream1,
builder: (context, snapshot1) {
return StreamBuilder(
stream: stream2,
builder: (context, snapshot2) {
// do some stuff with both streams here
},
);
},
)