From 75021d974cad2679540e74ef1e7c3c979a5b5d2a Mon Sep 17 00:00:00 2001 From: Scott Clampet Date: Fri, 26 Apr 2019 14:15:42 -0600 Subject: [PATCH] fix(home page jar, jar scoped model, add jar): rewrite home page jar pageview builder so that it que re #100 --- fude_app/lib/pages/home/home.dart | 113 +++----- fude_app/lib/pages/home/home_page_jar.dart | 63 ++--- fude_app/lib/pages/jars/category_card.dart | 7 +- fude_app/lib/pages/jars/jar.dart | 290 +++++++++------------ fude_app/lib/pages/jars/jar_add.dart | 1 + fude_app/lib/scoped-models/jar.dart | 38 ++- fude_app/lib/scoped-models/user.dart | 1 + 7 files changed, 234 insertions(+), 279 deletions(-) diff --git a/fude_app/lib/pages/home/home.dart b/fude_app/lib/pages/home/home.dart index c522634..fb404fe 100644 --- a/fude_app/lib/pages/home/home.dart +++ b/fude_app/lib/pages/home/home.dart @@ -20,26 +20,18 @@ class HomePage extends StatefulWidget { } class _HomePageState extends State { - PageController controller; @override initState() { + print('home init state. CurrUserEmail: ${widget.model.currUserEmail}'); + widget.model.fetchAllUserJars(widget.model.currUserEmail); super.initState(); - controller = PageController( - keepPage: false, - viewportFraction: .85, - ); - } - - @override - dispose() { - controller.dispose(); - super.dispose(); } @override Widget build(BuildContext context) { final double width = MediaQuery.of(context).size.width; final double height = MediaQuery.of(context).size.height; + // print('LIST in BUILD ${widget.model.usersJars[0].runtimeType}'); return Scaffold( appBar: AppBar( @@ -93,69 +85,46 @@ class _HomePageState extends State { child: Column( mainAxisSize: MainAxisSize.max, children: [ - StreamBuilder( - stream: Firestore.instance - .collection('jars') - .where('owners', arrayContains: widget.model.currUserEmail) - .snapshots(), - builder: (context, snapshot) { - if (!snapshot.hasData) { - print('no jars'); - return Center( - child: CircularProgressIndicator(), - ); - } else { - return Container( - margin: EdgeInsets.fromLTRB(0, height * 0.1, 0, 0), - width: width, - height: height * 0.55, - child: PageTransformer( - pageViewBuilder: (context, visibilityResolver) { - return PageView.builder( - reverse: true, - pageSnapping: true, - controller: PageController( - viewportFraction: 0.88, - initialPage: snapshot.data.documents.length), - itemCount: snapshot.data.documents.length, - itemBuilder: (context, index) { - final PageVisibility pageVisibility = - visibilityResolver - .resolvePageVisibility(index); - - return snapshot.data.documents[index]['title'] != - 'Add Jar' - ? GestureDetector( - onTap: () { - widget.model.getJarBySelectedId(snapshot - .data.documents[index].documentID); - Navigator.pushReplacement( - context, - PageTransition( - curve: Curves.linear, - type: PageTransitionType.fade, - child: JarPage(model: widget.model), - ), - ); - }, - child: HomePageJar( - model: widget.model, - jar: snapshot.data.documents[index], - pageVisibility: pageVisibility, + widget.model.usersJars.length == 0 + ? Center( + child: CircularProgressIndicator(), + ) + : Container( + margin: EdgeInsets.fromLTRB(0, height * 0.1, 0, 0), + width: width, + height: height * 0.55, + child: PageView.builder( + reverse: false, + pageSnapping: true, + controller: PageController( + keepPage: false, + viewportFraction: 0.88, + initialPage: 0), + itemCount: widget.model.usersJars.length, + itemBuilder: (context, index) { + return index == 0 + ? HomePageJar( + model: widget.model, title: 'Add Jar') + : GestureDetector( + onTap: () { + widget.model.getJarBySelectedId(widget + .model.usersJars[index].documentID); + Navigator.push( + context, + PageTransition( + curve: Curves.linear, + type: PageTransitionType.downToUp, + child: JarPage(model: widget.model), ), - ) - : HomePageJar( - model: widget.model, - jar: snapshot.data.documents[index], - pageVisibility: pageVisibility, ); - }, - ); - }, - ), - ); - } - }), + }, + child: HomePageJar( + model: widget.model, + jar: widget.model.usersJars[index], + title: null), + ); + }), + ) ], ), ), diff --git a/fude_app/lib/pages/home/home_page_jar.dart b/fude_app/lib/pages/home/home_page_jar.dart index 8e28d2b..3519720 100644 --- a/fude_app/lib/pages/home/home_page_jar.dart +++ b/fude_app/lib/pages/home/home_page_jar.dart @@ -9,28 +9,24 @@ import 'package:fude/pages/jars/jar_edit.dart'; import 'package:fude/pages/jars/jar_add.dart'; class HomePageJar extends StatelessWidget { - HomePageJar({ - @required this.model, - @required this.jar, - @required this.pageVisibility, - }); - final DocumentSnapshot jar; final MainModel model; final PageVisibility pageVisibility; + final String title; + + HomePageJar( + {@required this.model, this.jar, this.pageVisibility, this.title}); Widget _applyTextEffects({ @required double translationFactor, @required Widget child, }) { - final double xTranslation = pageVisibility.pagePosition * translationFactor; - return Opacity( - opacity: pageVisibility.visibleFraction, + opacity: 1, child: Transform( alignment: FractionalOffset.topLeft, transform: Matrix4.translationValues( - xTranslation, + 0.0, 0.0, 0.0, ), @@ -45,7 +41,7 @@ class HomePageJar extends StatelessWidget { child: Padding( padding: EdgeInsets.only(top: 16.0), child: Text( - jar['title'].toUpperCase(), + title == null ? jar['title'].toUpperCase() : 'ADD JAR', overflow: TextOverflow.ellipsis, style: Theme.of(context).textTheme.subhead, textAlign: TextAlign.left, @@ -58,7 +54,7 @@ class HomePageJar extends StatelessWidget { bottom: 56.0, left: 28.0, right: 28.0, - child: jar['title'] != 'Add Jar' + child: title == null ? Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -79,8 +75,8 @@ class HomePageJar extends StatelessWidget { iconSize: 26, color: Theme.of(context).textTheme.subhead.color, onPressed: () { - print('jar pressed, ${jar.documentID}'); - model.getJarBySelectedId(jar.documentID); + print('jar pressed, ${jar['id']}'); + model.getJarBySelectedId(jar['id']); Navigator.push( context, PageTransition( @@ -114,7 +110,7 @@ class HomePageJar extends StatelessWidget { ), ), Text( - jar['title'].toUpperCase(), + title == null ? jar['title'].toUpperCase() : 'ADD JAR', style: TextStyle( color: model.darkTheme ? Color.fromRGBO(40, 40, 40, 1) @@ -130,7 +126,7 @@ class HomePageJar extends StatelessWidget { @override Widget build(BuildContext context) { - var image = jar['title'] != 'Add Jar' + var image = title == null ? ClipRRect( borderRadius: BorderRadius.circular(30.0), child: Image.network( @@ -139,7 +135,7 @@ class HomePageJar extends StatelessWidget { : 'https://firebasestorage.googleapis.com/v0/b/fude-app.appspot.com/o/Scoot-01.png?alt=media&token=53fc26de-7c61-4076-a0cb-f75487779604', fit: BoxFit.cover, alignment: FractionalOffset( - 0.5 + (pageVisibility.pagePosition / 3), + 0.5, 0.5, ), ), @@ -148,14 +144,12 @@ class HomePageJar extends StatelessWidget { var imageOverlayGradient = DecoratedBox( decoration: BoxDecoration( - color: jar['title'] == 'Add Jar' - ? Theme.of(context).secondaryHeaderColor - : null, - gradient: jar['title'] != 'Add Jar' + color: title != null ? Theme.of(context).secondaryHeaderColor : null, + gradient: title == null ? LinearGradient( begin: FractionalOffset.topCenter, end: FractionalOffset.bottomCenter, - colors: jar['title'] != 'Add Jar' + colors: title == null ? !model.darkTheme ? [ Color.fromRGBO(242, 242, 242, 0), @@ -176,20 +170,17 @@ class HomePageJar extends StatelessWidget { vertical: 26.0, horizontal: 10.0, ), - child: Hero( - tag: jar['title'], - child: Material( - elevation: model.darkTheme ? 4.0 : 8, - shadowColor: Theme.of(context).secondaryHeaderColor, - borderRadius: BorderRadius.all(Radius.circular(30)), - child: Stack( - fit: StackFit.expand, - children: [ - image, - imageOverlayGradient, - _buildTextContainer(context), - ], - ), + child: Material( + elevation: model.darkTheme ? 4.0 : 8, + shadowColor: Theme.of(context).secondaryHeaderColor, + borderRadius: BorderRadius.all(Radius.circular(30)), + child: Stack( + fit: StackFit.expand, + children: [ + image, + imageOverlayGradient, + _buildTextContainer(context), + ], ), ), ); diff --git a/fude_app/lib/pages/jars/category_card.dart b/fude_app/lib/pages/jars/category_card.dart index 7b05eef..5c513db 100644 --- a/fude_app/lib/pages/jars/category_card.dart +++ b/fude_app/lib/pages/jars/category_card.dart @@ -10,26 +10,23 @@ class CategoryCard extends StatelessWidget { @required this.model, @required this.category, @required this.index, - @required this.pageVisibility, }); final String category; final int index; final MainModel model; - final PageVisibility pageVisibility; Widget _applyTextEffects({ @required double translationFactor, @required Widget child, }) { - final double xTranslation = pageVisibility.pagePosition * translationFactor; return Opacity( - opacity: pageVisibility.visibleFraction, + opacity: 1, child: Transform( alignment: FractionalOffset.topLeft, transform: Matrix4.translationValues( - xTranslation, + 0.0, 0.0, 0.0, ), diff --git a/fude_app/lib/pages/jars/jar.dart b/fude_app/lib/pages/jars/jar.dart index 2c1d0d4..3055180 100644 --- a/fude_app/lib/pages/jars/jar.dart +++ b/fude_app/lib/pages/jars/jar.dart @@ -28,27 +28,14 @@ class JarPage extends StatefulWidget { class _JarPageState extends State { bool _swiperVisible = false; - String selectedCategory; - PageController controller; @override void initState() { - print('rendering jarpage'); - selectedCategory = widget.model.selectedJar.data['categories'][0]; + print(widget.model.selectedJar.data); Timer(Duration(seconds: 0), fadeInstructions); - controller = PageController( - keepPage: false, - viewportFraction: .85, - ); super.initState(); } - @override - dispose() { - controller.dispose(); - super.dispose(); - } - void fadeInstructions() { setState(() { _swiperVisible = true; @@ -146,165 +133,142 @@ class _JarPageState extends State { child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ - Hero( - tag: model.selectedJar.data['title'], - child: Container( - height: height, - width: width, - child: Material( - elevation: 0, - child: Stack( - fit: StackFit.expand, - children: [ - image, - imageOverlayGradient, - Container( - color: Colors.transparent, - padding: EdgeInsets.fromLTRB( - width * 0.02, height * 0.05, 0, 0), - child: Row( - crossAxisAlignment: CrossAxisAlignment.start, - mainAxisAlignment: - MainAxisAlignment.spaceBetween, - children: [ - AnimatedOpacity( - opacity: _swiperVisible ? 1.0 : 0.0, - duration: Duration(milliseconds: 1000), - child: Container( - child: IconButton( - icon: Icon( - Icons.keyboard_arrow_down, - color: Theme.of(context) - .iconTheme - .color, - ), - iconSize: 40, - onPressed: () { - _swiperVisible = false; - Navigator.push( - context, - PageTransition( - curve: Curves.linear, - type: PageTransitionType - .upToDown, - child: HomePage(model: model), - ), - ); - }), - ), + Container( + height: height, + width: width, + child: Material( + elevation: 0, + child: Stack( + fit: StackFit.expand, + children: [ + image, + imageOverlayGradient, + Container( + color: Colors.transparent, + padding: EdgeInsets.fromLTRB( + width * 0.02, height * 0.05, 0, 0), + child: Row( + crossAxisAlignment: CrossAxisAlignment.start, + mainAxisAlignment: + MainAxisAlignment.spaceBetween, + children: [ + AnimatedOpacity( + opacity: _swiperVisible ? 1.0 : 0.0, + duration: Duration(milliseconds: 1000), + child: Container( + child: IconButton( + icon: Icon( + Icons.keyboard_arrow_down, + color: Theme.of(context) + .iconTheme + .color, + ), + iconSize: 40, + onPressed: () { + _swiperVisible = false; + Navigator.pop(context); + }), ), - AnimatedOpacity( - opacity: _swiperVisible ? 1.0 : 0.0, - duration: Duration(milliseconds: 1000), - child: Container( - child: IconButton( - icon: Icon( - Icons.filter_list, - color: Theme.of(context) - .iconTheme - .color, - ), - iconSize: 39, - onPressed: () { - _swiperVisible = false; - Navigator.pushReplacement( - context, - PageTransition( - curve: Curves.linear, - type: PageTransitionType - .rightToLeftWithFade, - child: JarNotes(model: model), - ), - ); - }), - ), + ), + AnimatedOpacity( + opacity: _swiperVisible ? 1.0 : 0.0, + duration: Duration(milliseconds: 1000), + child: Container( + child: IconButton( + icon: Icon( + Icons.filter_list, + color: Theme.of(context) + .iconTheme + .color, + ), + iconSize: 39, + onPressed: () { + _swiperVisible = false; + Navigator.pushReplacement( + context, + PageTransition( + curve: Curves.linear, + type: PageTransitionType + .rightToLeftWithFade, + child: JarNotes(model: model), + ), + ); + }), ), - ], - ), - ), - Positioned( - top: height * 0.24, - left: width * 0.07, - right: width * 0.07, - child: AnimatedOpacity( - opacity: _swiperVisible ? 1.0 : 0.0, - duration: Duration(milliseconds: 1000), - child: Text( - model.selectedJar.data['title'] - .toUpperCase(), - overflow: TextOverflow.clip, - style: Theme.of(context).textTheme.title, - textAlign: TextAlign.center, ), + ], + ), + ), + Positioned( + top: height * 0.24, + left: width * 0.07, + right: width * 0.07, + child: AnimatedOpacity( + opacity: _swiperVisible ? 1.0 : 0.0, + duration: Duration(milliseconds: 1000), + child: Text( + model.selectedJar.data['title'].toUpperCase(), + overflow: TextOverflow.clip, + style: Theme.of(context).textTheme.title, + textAlign: TextAlign.center, ), ), - Positioned( - top: height * 0.46, - left: width * 0.07, - right: width * 0.07, - child: AnimatedOpacity( - opacity: _swiperVisible ? 1.0 : 0.0, - duration: Duration(milliseconds: 1000), - child: Text( - 'SELECT CATEGORY', - style: TextStyle( - color: Theme.of(context) - .secondaryHeaderColor, - fontWeight: FontWeight.bold, - fontSize: 14, - letterSpacing: 3, - ), - textAlign: TextAlign.center, + ), + Positioned( + top: height * 0.46, + left: width * 0.07, + right: width * 0.07, + child: AnimatedOpacity( + opacity: _swiperVisible ? 1.0 : 0.0, + duration: Duration(milliseconds: 1000), + child: Text( + 'SELECT CATEGORY', + style: TextStyle( + color: + Theme.of(context).secondaryHeaderColor, + fontWeight: FontWeight.bold, + fontSize: 14, + letterSpacing: 3, ), + textAlign: TextAlign.center, ), ), - //SWIPER - Positioned( - top: height * 0.53, - // left: width * 0.47, - width: width, - height: height * 0.34, - child: AnimatedOpacity( - opacity: _swiperVisible ? 1.0 : 0.0, - duration: Duration(milliseconds: 500), - child: PageTransformer( - pageViewBuilder: - (context, visibilityResolver) { - return PageView.builder( - reverse: true, - pageSnapping: true, - scrollDirection: Axis.horizontal, - controller: PageController( - viewportFraction: .62, - initialPage: model.selectedJar - .data['categories'].length), - itemCount: model.selectedJar - .data['categories'].length, - itemBuilder: (context, index) { - final PageVisibility pageVisibility = - visibilityResolver - .resolvePageVisibility(index); - return GestureDetector( - onTap: () => _pullRandomNote( - model, - model.selectedJar - .data['categories'][index]), - child: CategoryCard( - model: widget.model, - category: model.selectedJar - .data['categories'][index], - index: index, - pageVisibility: pageVisibility, - ), - ); - }, - ); - }, - ), + ), + //SWIPER + Positioned( + top: height * 0.53, + // left: width * 0.47, + width: width, + height: height * 0.34, + child: AnimatedOpacity( + opacity: _swiperVisible ? 1.0 : 0.0, + duration: Duration(milliseconds: 500), + child: PageView.builder( + reverse: true, + pageSnapping: true, + scrollDirection: Axis.horizontal, + controller: PageController( + viewportFraction: .62, initialPage: 0), + itemCount: model + .selectedJar.data['categories'].length, + itemBuilder: (context, index) { + return GestureDetector( + onTap: () => _pullRandomNote( + model, + model.selectedJar.data['categories'] + [index]), + child: CategoryCard( + model: widget.model, + category: model.selectedJar + .data['categories'][index], + index: index, + ), + ); + }, ), ), - ], - ), + ), + ], ), ), ), diff --git a/fude_app/lib/pages/jars/jar_add.dart b/fude_app/lib/pages/jars/jar_add.dart index 81360bb..34dbb0a 100644 --- a/fude_app/lib/pages/jars/jar_add.dart +++ b/fude_app/lib/pages/jars/jar_add.dart @@ -29,6 +29,7 @@ class _JarPageState extends State { formKey.currentState.save(); // Save our form now. print(_formData); model.addJar(_formData); + model.fetchAllUserJars(model.currUserEmail); Navigator.pop(context); } } diff --git a/fude_app/lib/scoped-models/jar.dart b/fude_app/lib/scoped-models/jar.dart index 5e5379b..537bce5 100644 --- a/fude_app/lib/scoped-models/jar.dart +++ b/fude_app/lib/scoped-models/jar.dart @@ -1,3 +1,5 @@ +import 'dart:async'; + import 'package:flutter/services.dart'; import 'package:validators/validators.dart'; import 'package:scoped_model/scoped_model.dart'; @@ -12,6 +14,13 @@ mixin JarModel on Model { final Firestore _firestore = Firestore.instance; DocumentSnapshot _selJar; List _allJarIdeas; + final Map _addJar = { + 'owners': [], + 'title': 'ADD JAR', + 'categories': [] + }; + List _usersJars = []; + bool _isLoading = false; bool darkTheme = false; @@ -28,7 +37,9 @@ mixin JarModel on Model { return _isLoading; } - + List get usersJars { + return _usersJars; + } void addJar(Map data) async { print('in model.addJar: data: $data'); @@ -48,6 +59,7 @@ mixin JarModel on Model { : imageLocation.toString(), 'isFav': false }); + notifyListeners(); } catch (e) { print(e); } @@ -119,10 +131,11 @@ mixin JarModel on Model { val.documents.forEach((jar) { if (jar.documentID == jarId) { _selJar = jar; - notifyListeners(); } }); }); + + notifyListeners(); } catch (e) { print(e); } @@ -150,6 +163,7 @@ mixin JarModel on Model { 'image': imageLocation == null ? _selJar['image'] : imageLocation.toString(), }); + notifyListeners(); } catch (e) { print(e); } @@ -258,6 +272,25 @@ mixin JarModel on Model { } } + Future> fetchAllUserJars(String email) async { + _usersJars = [_addJar]; + QuerySnapshot jars; + try { + jars = await _firestore + .collection('jars') + .where('owners', arrayContains: email) + .getDocuments(); + jars.documents.forEach((jar) { + _usersJars.insert(1, jar); + }); + print('NEW LIST: $_usersJars'); + notifyListeners(); + } catch (e) { + print(e); + } + return _usersJars; + } + Future> fetchJarNotesByCategory( String category) async { List _jarNotesByCategory = []; @@ -274,7 +307,6 @@ mixin JarModel on Model { if (notes.documents.length > 0) { notes.documents.forEach((doc) { if (doc.data['category'] == category) { - // print(doc.documentID); _jarNotesByCategory.add(doc); } }); diff --git a/fude_app/lib/scoped-models/user.dart b/fude_app/lib/scoped-models/user.dart index 1aa9473..5fe1c1a 100644 --- a/fude_app/lib/scoped-models/user.dart +++ b/fude_app/lib/scoped-models/user.dart @@ -59,6 +59,7 @@ mixin UserModel on Model { FirebaseUser user = await _auth.signInWithEmailAndPassword( email: email, password: password); _currentUser = user; + _currUserEmail = _currentUser.email; print("successful login. User..."); print(_currentUser); isLoading = false;