I am trying to convert the boilerplate Flutter example into a web application and store the time of each click in Firestore. The program can login and the counter got incremented at each click. But it can't write to Firestore (checked via Firebase Console). Grateful if anyone can point out where I have done wrong, or pointer to the right approach. This is the code:
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
int _counter = 0;
#override
void _incrementCounter() {
setState(() async {
Firestore.instance.collection("click").add(
{
"time" : DateTime.now(),
});
_counter++;
});
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('DEMO')
),
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
Text(
'You have pushed the button this many times:',
),
Text(
'$_counter',
style: Theme.of(context).textTheme.headline4,
),
],
),
),
floatingActionButton: FloatingActionButton(
onPressed: _incrementCounter,
tooltip: 'Increment',
child: Icon(Icons.add),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}
class AuthService {
//Handle Authentication
handleAuth() {
FirebaseAuth.instance
.signInWithEmailAndPassword(
email: 'xxxxxxxx#gmail.com', password: 'xxxxxxxx');
return StreamBuilder(
stream: FirebaseAuth.instance.onAuthStateChanged,
builder: (context, snapshot) {
if (snapshot.hasData) {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => MyHomePage()),
);
;
} else {
return Text('Login failed');
}
},
);
}
}
Related
I am working on a ecommerce-app , I'm using Getx for the state managment, I'm a newbie with Getx a little help would be appreciated.
I am using firebase auth, so when the app is navigated from the login screen everything is fine i.e products are shown,
But when when the user are kept logged in, products are not shown until hard reloaded,
main.dart
Future<void> main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp().then((value) {
Get.put(ProductsController());
});
runApp(MyApp());
}
#override
Widget build(BuildContext context) {
return MaterialApp(
routes: routes,
home: StreamBuilder(
stream: FirebaseAuth.instance.authStateChanges(),
builder: (context, snapshot) {
if (snapshot.connectionState == ConnectionState.active) {
if (snapshot.hasData) {
return HomeScreen();
}
}
return const LoginScreen();
}),
);
controllers.dart
ProductsController productsController = ProductsController.instance;
home.dart
class HomeScreen extends StatefulWidget {
const HomeScreen({Key? key}) : super(key: key);
#override
_HomeScreenState createState() => _HomeScreenState();
}
class _HomeScreenState extends State<HomeScreen> {
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(),
body: SingleChildScrollView(
child: Padding(
padding: EdgeInsets.only(bottom: 20),
child: Column(
children: [
Text("Popular Products"),
PopularProducts(),
],
),
),
)
);
}
Popular Products
These products are shown only after hot reload, it is not shown initially, this is something to do with productController
class PopularProducts extends StatelessWidget {
const PopularProducts({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Row(
children: [
Expanded(
child: SizedBox(
height: 150,
child: ListView(
scrollDirection: Axis.horizontal,
children:
productsController.products.map((ProductModel product) {
print("These are the products" + product.toString());
return ProductCard(product: product);
}).toList()),
),
)
],
);
}
The images are :
When hot restart:
When hot reload:
I faced a similar problem, my app wasn't loading the data fast enough and the widgets was already rendered, so i made a function to load the data and inside the build i used Obx() widget and called the function, but remember to but the function called with condition of the variable is empty
As #LMech replied
Obx() was missing!!
Now the code is
#override
Widget build(BuildContext context) {
return Row(
children: [
Obx( --> Add this line
() => Expanded(
child: SizedBox(
height: 150,
child: ListView(
scrollDirection: Axis.horizontal,
children:
productsController.products.map((ProductModel product) {
print("These are the products" + product.toString());
return ProductCard(product: product);
}).toList()),
),
),
)
],
);
}
I have a Flutter application running through VS Code which does simple authentication using Firebase. Following is my full program.
import 'package:firebase_auth/firebase_auth.dart';
import 'package:flutter/material.dart';
import 'package:firebase_core/firebase_core.dart';
import 'package:provider/provider.dart';
import 'package:fireauth_starter/views/home_view.dart';
import 'views/login_page_view.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(FireAuthStarter());
}
class FireAuthStarter extends StatelessWidget {
//final Future<FirebaseApp> _initialisation = Firebase.initializeApp();
#override
Widget build(BuildContext context) {
//
return Provider<FirebaseAuth>(
create: (context) => FirebaseAuth.instance,
child: MaterialApp(
title: 'Firebase Authentication',
home: LandingPage(),
),
);
}
}
class LandingPage extends StatelessWidget {
const LandingPage();
#override
Widget build(BuildContext context) {
final firebaseAuth = Provider.of<FirebaseAuth>(context);
return StreamBuilder<User>(
stream: firebaseAuth.authStateChanges(),
builder: (context, AsyncSnapshot<User> snapshot) {
print(snapshot.connectionState.toString());
if (snapshot.connectionState == ConnectionState.active) {
//final bool signedIn = snapshot.hasData;
User user = snapshot.data;
return user == null ? LoginPageView() : HomeView();
//return signedIn ? DashBoard() : FirstView();
} else {
return Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
});
}
}
class LoginPageView extends StatelessWidget {
#override
Widget build(BuildContext context) {
final firebaseAuth = Provider.of<FirebaseAuth>(context);
return MaterialApp(
home: Center(
child: Container(
child: TextButton(
child: Text('Sign In'),
onPressed: () {
firebaseAuth.signInWithEmailAndPassword(
email: 'myemail#email.com',
password: '1234567',
);
},
),
),
),
);
}
}
class HomeView extends StatelessWidget {
#override
Widget build(BuildContext context) {
final firebaseAuth = Provider.of<FirebaseAuth>(context);
return MaterialApp(
home: Scaffold(
appBar: AppBar(
title: Text('Home View'),
actions: [
TextButton(
child: Text('Sign Out'),
style: ButtonStyle(
foregroundColor: MaterialStateProperty.all<Color>(Colors.white),
),
onPressed: () {
firebaseAuth.signOut();
},
),
],
),
body: Center(
child: Container(child: Text('Home View content')),
),
),
);
}
}
The application works as expected but when I use hot reload or hot restart, app get stuck in Progress Indicator because the snapshot.connectionState returns 'ConnectionState.waiting'
https://api.flutter.dev/flutter/widgets/ConnectionState-class.html states waiting: indicating that the asynchronous operation has begun, typically with the data being null.
I though the hot restart will reset all the states and app will perform as initial load. But it doesn't. What am I missing in this?
[![enter image description here][1]][1]
I need to do it like this here:
[1]: https://i.stack.imgur.com/bNdZ3.png
But I can't do it. I tried some stuff but it doesn't work. Here is my main.dart below. I created the showImage method for showing image, I also applied it by Image.network(url); code but it didn't work,so I commented it.
import 'package:firebase_storage/firebase_storage.dart';
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_core/firebase_core.dart';
void main() async {
WidgetsFlutterBinding.ensureInitialized();
await Firebase.initializeApp();
runApp(MyApp());
}
class MyApp extends StatelessWidget {
// This widget is the root of your application.
#override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
theme: ThemeData(
primarySwatch: Colors.red,
visualDensity: VisualDensity.adaptivePlatformDensity,
),
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> {
int _counter = 0;
var url;
void _incrementCounter() {
setState(() {
_counter++;
});
}
void showImage() async {
final ref = FirebaseStorage.instance.ref().child('erkekyuz');
// no need of the file extension, the name will do fine.
url = await ref.getDownloadURL();
print(url);
}
Widget _buildListItem(BuildContext context, DocumentSnapshot document) {
String mezunD;
if (document.data()['mezunDurumu'] == false) {
mezunD = "mezun değil";
}
if (document.data()['mezunDurumu'] == true) {
mezunD = "mezun değil";
}
var listTile = ListTile(
title: Column(
children: [
Expanded(
child: Text(
"Ad Soyad: " + document.data()['adSoyad'],
),
),
Expanded(
child: Text(
"Yaş: " + document.data()['yas'].toString(),
),
),
Expanded(
child: Text(
"Doğum Tarihi: " + document.data()['dogumTarihi'],
),
),
Expanded(
child: Text("Mezun Durumu: " + mezunD),
),
//Image.network(url),
//this didn't work somehow.
],
),
);
return listTile;
}
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text("Öğrenci Durumu"),
),
body: StreamBuilder(
stream: FirebaseFirestore.instance.collection('tablolar').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) return const Text('Loading...');
return ListView.builder(
itemExtent: 100.0,
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) =>
_buildListItem(context, snapshot.data.documents[index]),
);
}),
);
}
}
Is your url variable showing any value?
Call your showImage() method like this to load image.
#override
void initState() {
super.initState();
showImage();
}
for showing images you can use :https://pub.dev/packages/cached_network_image
I am using a package called lit_firebase_auth which makes firebase authentication easier to handle. I want to be able to save user data, such as the username after the user logs in. Basically as such:
User logs in or signs up --> User clicks on edit profile page from the home screen --> User can enter their desired name in the text field and click save --> Saves this data to the cloud of the respectful logged in user.
Please I'm a beginner and I have no idea how to pull this off.
Here is the code for reference:
cloud_firebase.dart:
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:firebase_auth/firebase_auth.dart';
Future<void> userSetup(String displayName) async {
CollectionReference users = FirebaseFirestore.instance.collection('Users');
FirebaseAuth auth = FirebaseAuth.instance;
String uid = auth.currentUser.uid.toString();
users.add({'displayName': displayName, 'uid': uid});
return;
}
auth.dart
import 'package:flutter/material.dart';
import 'package:kiwi/screens/auth/register.dart';
import 'package:kiwi/screens/background_painter.dart';
import 'package:lit_firebase_auth/lit_firebase_auth.dart';
import 'package:kiwi/screens/auth/sign_in.dart';
import 'package:animations/animations.dart';
import 'package:kiwi/screens/home.dart';
class AuthScreen extends StatefulWidget {
const AuthScreen({Key key}) : super(key: key);
static MaterialPageRoute get route => MaterialPageRoute(
builder: (context) => const AuthScreen(),
);
#override
_AuthScreenState createState() => _AuthScreenState();
}
class _AuthScreenState extends State<AuthScreen>
with SingleTickerProviderStateMixin {
AnimationController _controller;
ValueNotifier<bool> showSignInPage = ValueNotifier<bool>(true);
#override
void initState() {
_controller =
AnimationController(vsync: this, duration: const Duration(seconds: 2));
super.initState();
}
#override
void dispose() {
_controller.dispose();
super.dispose();
}
#override
Widget build(BuildContext context) {
return Scaffold(
body: LitAuth.custom(
onAuthSuccess: () {
Navigator.of(context).pushReplacement(HomeScreen.route);
},
child: Stack(
children: [
SizedBox.expand(
child: CustomPaint(
painter: BackgroundPainter(),
)),
Center(
child: ConstrainedBox(
constraints: BoxConstraints(maxWidth: 800),
child: ValueListenableBuilder<bool>(
valueListenable: showSignInPage,
builder: (context, value, child) {
return PageTransitionSwitcher(
reverse: !value,
duration: Duration(milliseconds: 800),
transitionBuilder:
(child, animation, secondaryAnimation) {
return SharedAxisTransition(
animation: animation,
secondaryAnimation: secondaryAnimation,
transitionType: SharedAxisTransitionType.vertical,
fillColor: Colors.transparent,
child: child,
);
},
child: value
? SignIn(
key: ValueKey('SignIn'),
onRegisterClicked: () {
context.resetSignInForm();
showSignInPage.value = false;
_controller.forward();
},
)
: Register(
key: ValueKey('Register'),
onSignInPressed: () {
context.resetSignInForm();
showSignInPage.value = true;
_controller.reverse();
},
),
);
},
),
),
),
],
),
),
);
}
}
splash.dart
import 'package:flutter/material.dart';
import 'package:lit_firebase_auth/lit_firebase_auth.dart';
import 'package:kiwi/screens/home.dart';
import 'package:kiwi/screens/auth/auth.dart';
class SplashScreen extends StatelessWidget {
const SplashScreen({Key key}) : super(key: key);
static MaterialPageRoute get route => MaterialPageRoute(
builder: (context) => const SplashScreen(),
);
#override
Widget build(BuildContext context) {
final user = context.watchSignedInUser();
user.map(
(value) {
_navigateToHomeScreen(context);
},
empty: (_) {
_navigateToAuthScreen(context);
},
initializing: (_) {},
);
return const Scaffold(
body: Center(
child: CircularProgressIndicator(),
),
);
}
void _navigateToAuthScreen(BuildContext context) {
WidgetsBinding.instance.addPostFrameCallback(
(_) => Navigator.of(context).pushReplacement(AuthScreen.route),
);
}
void _navigateToHomeScreen(BuildContext context) {
WidgetsBinding.instance.addPostFrameCallback(
(_) => Navigator.of(context).pushReplacement(HomeScreen.route),
);
}
}
edit_profile.dart
import 'package:flutter/material.dart';
import 'package:kiwi/config/palette.dart';
import 'package:kiwi/screens/auth/decoration_functions.dart';
class Profile extends StatefulWidget {
const Profile({Key key}) : super(key: key);
static MaterialPageRoute get route => MaterialPageRoute(
builder: (context) => const Profile(),
);
_ProfileState createState() => _ProfileState();
}
class _ProfileState extends State<Profile> {
// UserModel _currentUser = locator.get<UserController>().currentUser;
// File _image;
#override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Colors.white,
appBar: AppBar(
title: Text('Edit Profile'),
),
body: Builder(
builder: (context) => Container(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
children: <Widget>[
SizedBox(
height: 20.0,
),
Column(
children: <Widget>[
Text(
'Hey there',
style: TextStyle(color: Palette.lightGreen, fontSize: 20),
)
],
),
SizedBox(
height: 20,
),
Expanded(
flex: 8,
child: ListView(
children: [
Padding(
padding: EdgeInsets.fromLTRB(50, 0, 50, 0),
child: TextFormField(
style: const TextStyle(
fontSize: 18,
color: Colors.green,
),
decoration: signInInputDecoration(
hintText: 'New Username',
),
),
),
SizedBox(
height: 20,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: <Widget>[
RaisedButton(
elevation: 4,
color: Colors.red,
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
'Cancel',
style: TextStyle(color: Colors.white),
),
),
RaisedButton(
elevation: 4,
color: Palette.lightGreen,
onPressed: () {
Navigator.of(context).pop();
},
child: const Text(
'Save',
style: TextStyle(color: Colors.white),
),
),
],
),
],
),
),
],
),
),
),
);
}
}
to save user data to document in firebase using uuid for document name the below code will work.
if you are confused about how to use the code in your app its simple.
just follow the steps:
call userSetup Function from onpress while passing the display name data.
how to use
the below code will create new document using the currect users uuid in firestore in user collection and save the data.
onPress:(){
userSetup(displayName:"zakriakhan");
}
userSteup Function
Future<void> userSetup(String displayName) async {
//firebase auth instance to get uuid of user
FirebaseAuth auth = FirebaseAuth.instance.currentUser();
//now below I am getting an instance of firebaseiestore then getting the user collection
//now I am creating the document if not already exist and setting the data.
FirebaseFirestore.instance.collection('Users').document(auth.uid).setData(
{
'displayName': displayName, 'uid': uid
})
return;
}
I am trying to create a detail screen to display my Firebase data from the database, and show the image along with some text data including the number of items, date, and geolocation. Is there a way to determine why the data is returning null? The navigator should navigate to the DetailPage.
Here is my Main file -
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:flutter/material.dart';
import 'package:wasteagram/pages/create_waste.dart';
import 'package:wasteagram/services/crud.dart';
import 'pages/create_waste.dart';
import 'pages/detail_screen.dart';
void main() => runApp(new MyApp());
class MyApp extends StatelessWidget {
#override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Wasteagram - ',
theme: new ThemeData(
primarySwatch: Colors.deepOrange,
),
home: new MyHomePage(title: 'Wasteagram - '),
);
}
}
class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;
#override
_MyHomePageState createState() => _MyHomePageState();
}
class _MyHomePageState extends State<MyHomePage> {
CrudMethods crudMethods = new CrudMethods();
Stream wasteStream;
Widget WasteList() {
return Container(
child: wasteStream != null ? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
StreamBuilder(
stream: wasteStream,
builder: (context, snapshot) {
return ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 16),
itemCount: snapshot.data.documents.length,
shrinkWrap: true,
itemBuilder: (context, index){
return WidgetTile(
wastedate:
snapshot.data.documents[index].data['wastedate'],
wastenumber:
snapshot.data.documents[index].data['wastenumber']
);
});
},)
],
) : Container(
alignment: Alignment.center,
child: CircularProgressIndicator(),
),
);
}
void initState() {
super.initState();
crudMethods.getData().then((result) {
wasteStream = result;
});
}
#override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: WasteList(),
floatingActionButton: new FloatingActionButton(
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => CameraScreen())
);
},
child: new Icon(Icons.add),
),
floatingActionButtonLocation: FloatingActionButtonLocation.centerFloat,
);
}
}
class WidgetTile extends StatelessWidget {
String wastedate, wastenumber;
WidgetTile({#required this.wastedate, #required this.wastenumber});
#override
Widget build(BuildContext context) {
return ListTile(
title: Text(wastedate),
trailing: Text(wastenumber),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailPage())
);
}
);
}
}
Here is my detail_screen.dart
import 'package:flutter/material.dart';
import 'package:cloud_firestore/cloud_firestore.dart';
import 'package:wasteagram/data/firestore_service.dart';
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(widget.post.data["wastedate"])
),
body: Center(
child: Container(
child: Column(
children: <Widget> [
Image.network(widget.post.data["image"]),
Text(widget.post.data["wastedate"]),
Text(widget.post.data["wastenumber"]),
Text(widget.post.data["wastelocation"].toString()),
]
)
)
),
);
}
}
You are not passing DocumentSnapshot to Detail Page.
Try this:
Widget WasteList() {
return Container(
child: wasteStream != null ? Column(
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
StreamBuilder(
stream: wasteStream,
builder: (context, snapshot) {
return ListView.builder(
padding: EdgeInsets.symmetric(horizontal: 16),
itemCount: snapshot.data.documents.length,
shrinkWrap: true,
itemBuilder: (context, index){
return WidgetTile(
wastedate:
snapshot.data.documents[index].data['wastedate'],
wastenumber:
snapshot.data.documents[index].data['wastenumber'],
post:
snapshot.data.documents[index]
);
});
},)
],
) : Container(
alignment: Alignment.center,
child: CircularProgressIndicator(),
),
);
}
class WidgetTile extends StatelessWidget {
String wastedate, wastenumber;
DocumentSnapshot post;
WidgetTile({#required this.wastedate, #required this.wastenumber,#required this.post});
#override
Widget build(BuildContext context) {
return ListTile(
title: Text(wastedate),
trailing: Text(wastenumber),
onTap: () {
Navigator.push(
context,
MaterialPageRoute(builder: (context) => DetailPage(post: post))
);
}
);
}
}