From f5d2e991a8746cab36bb3d3408789f288f43d00a Mon Sep 17 00:00:00 2001 From: Felix Date: Tue, 20 Aug 2019 16:01:56 +0100 Subject: [PATCH] ui improvements --- ios/Podfile.lock | 4 +- ios/Runner.xcodeproj/project.pbxproj | 2 +- .../widgets/animatedGradientButton.dart | 19 +- lib/main.dart | 4 - lib/pages/login_page.dart | 215 ++++++++---------- lib/pages/receipt_page_2.dart | 139 ++++++----- 6 files changed, 184 insertions(+), 199 deletions(-) diff --git a/ios/Podfile.lock b/ios/Podfile.lock index a4e1203..8132310 100644 --- a/ios/Podfile.lock +++ b/ios/Podfile.lock @@ -6,13 +6,13 @@ PODS: - Flutter DEPENDENCIES: - - Flutter (from `.symlinks/flutter/ios`) + - Flutter (from `.symlinks/flutter/ios-profile`) - shared_preferences (from `.symlinks/plugins/shared_preferences/ios`) - url_launcher (from `.symlinks/plugins/url_launcher/ios`) EXTERNAL SOURCES: Flutter: - :path: ".symlinks/flutter/ios" + :path: ".symlinks/flutter/ios-profile" shared_preferences: :path: ".symlinks/plugins/shared_preferences/ios" url_launcher: diff --git a/ios/Runner.xcodeproj/project.pbxproj b/ios/Runner.xcodeproj/project.pbxproj index 5b4844c..a0f8e33 100644 --- a/ios/Runner.xcodeproj/project.pbxproj +++ b/ios/Runner.xcodeproj/project.pbxproj @@ -281,7 +281,7 @@ ); inputPaths = ( "${PODS_ROOT}/Target Support Files/Pods-Runner/Pods-Runner-frameworks.sh", - "${PODS_ROOT}/../.symlinks/flutter/ios/Flutter.framework", + "${PODS_ROOT}/../.symlinks/flutter/ios-profile/Flutter.framework", ); name = "[CP] Embed Pods Frameworks"; outputPaths = ( diff --git a/lib/common/widgets/animatedGradientButton.dart b/lib/common/widgets/animatedGradientButton.dart index c50d302..6880eb9 100644 --- a/lib/common/widgets/animatedGradientButton.dart +++ b/lib/common/widgets/animatedGradientButton.dart @@ -2,11 +2,22 @@ import 'package:flutter/material.dart'; import 'package:simple_animations/simple_animations.dart'; class AnimatedBackground extends StatelessWidget { + final List animateColors; + final Color lastColor; + final Alignment begin, end; + + AnimatedBackground( + this.animateColors, + this.lastColor, + this.begin, + this.end, + ); + @override Widget build(BuildContext context) { final tween = MultiTrackTween([ Track("color1").add(Duration(seconds: 4), - ColorTween(begin: Colors.lightBlue, end: Colors.lightBlue[300])), + ColorTween(begin: this.animateColors[0], end: this.animateColors[1])), ]); return ControlledAnimation( @@ -17,9 +28,9 @@ class AnimatedBackground extends StatelessWidget { return Container( decoration: BoxDecoration( gradient: LinearGradient( - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - colors: [animation["color1"], Colors.lightBlue])), + begin: this.begin, + end: this.end, + colors: [animation["color1"], this.lastColor])), ); }, ); diff --git a/lib/main.dart b/lib/main.dart index 7a63c3b..64d2d0c 100644 --- a/lib/main.dart +++ b/lib/main.dart @@ -15,10 +15,6 @@ void main() { class MyApp extends StatelessWidget { @override Widget build(BuildContext context) { -// GraphData gd = new GraphData(); -// gd.getGraphData('total_last_week'); - - //var config = ConfigWrapper.of(context); return new MaterialApp( debugShowCheckedModeBanner: false, localizationsDelegates: [ diff --git a/lib/pages/login_page.dart b/lib/pages/login_page.dart index d3cec6a..e05ea28 100644 --- a/lib/pages/login_page.dart +++ b/lib/pages/login_page.dart @@ -7,6 +7,7 @@ import 'package:local_spend/common/platform/platform_scaffold.dart'; import 'package:shared_preferences/shared_preferences.dart'; import 'package:url_launcher/url_launcher.dart'; import 'package:local_spend/common/widgets/labeled_checkbox.dart'; +import 'package:local_spend/common/widgets/animatedGradientButton.dart'; const URL = "https://flutter.io/"; @@ -101,137 +102,117 @@ class LoginPageState extends State { } }, child: PlatformScaffold( - body: Container( - decoration: new BoxDecoration( - gradient: new LinearGradient( - colors: [Colors.blue[50], Colors.white], - stops: [0,1], - begin: Alignment.topCenter, - end: Alignment.bottomCenter, - ), - ), - child: AnimatedContainer( - duration: Duration(seconds: 2), - margin: EdgeInsets.fromLTRB(60,30,60,0), - child: Column( - children: [ - Expanded( - child: AnimatedContainer( - duration: Duration(seconds: 2), - margin: EdgeInsets.fromLTRB(15,0,15,0), - decoration: BoxDecoration( - image: DecorationImage( - image: AssetImage('assets/images/launch_image.png') - ), - ), - ), - ), - Padding( - padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0), - child: TextField( - autocorrect: false, - textAlign: TextAlign.center, - controller: _emailController, - decoration: InputDecoration( - hintText: "EMAIL", - hintStyle: TextStyle(fontSize: 15), - ), - style: TextStyle( - fontSize: 18.0, - color: Colors.grey[800], - fontWeight: FontWeight.bold, - ), - onSubmitted: (_) { - FocusScope.of(context).requestFocus(focusNode); - }, - ), - ), - Padding( - padding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0), - child: TextField( - autocorrect: false, - textAlign: TextAlign.center, - controller: _passwordController, - focusNode: focusNode, - decoration: InputDecoration( - hintText: 'PASSWORD', - hintStyle: TextStyle(fontSize: 15), - ), - obscureText: true, - style: TextStyle( - fontSize: 18.0, - color: Colors.grey[800], - fontWeight: FontWeight.bold, - ), - onSubmitted: (_) { - login( _emailController.text, - _passwordController.text); - }, - ), - ), + body: Stack( + children: [ + AnimatedBackground([Colors.blue[50], Colors.lightBlue[50]], Colors.white, Alignment.topRight, Alignment.bottomLeft), - Padding( - padding: EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 30.0), - - child: Opacity( - opacity: _isLoggingIn ? 0.5 : 1, - child : Material( - child: new Container( - decoration: new BoxDecoration( - border: new Border.all(color : Colors.transparent, width: 2), - borderRadius: BorderRadius.all(Radius.circular(2)), - gradient: new LinearGradient( - colors: [ - Colors.blue[300], - Colors.blue[500], - ], - stops: [0,1], - begin: Alignment.topLeft, - end: Alignment.bottomRight, - ), - ), - - child : Material( - type: MaterialType.transparency, - - child : InkWell( - onTap: _isLoggingIn ? null : () => login( _emailController.text, _passwordController.text), - child: new Container( - width: 100, - height: 50, - child: new Center( - child: new Text( - 'GO', style: new TextStyle(fontSize: 18, color: Colors.white),), - ), + Container( + margin: EdgeInsets.fromLTRB(60,30,60,0), + child: Column( + children: [ + Expanded( + child: AnimatedContainer( + duration: Duration(seconds: 2), + margin: EdgeInsets.fromLTRB(15,0,15,0), + decoration: BoxDecoration( + image: DecorationImage( + image: AssetImage('assets/images/launch_image.png') ), ), ), + ), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 0.0, 0.0, 0.0), + child: TextField( + autocorrect: false, + textAlign: TextAlign.center, + controller: _emailController, + decoration: InputDecoration( + hintText: "EMAIL", + hintStyle: TextStyle(fontSize: 15), + ), + style: TextStyle( + fontSize: 18.0, + color: Colors.grey[800], + fontWeight: FontWeight.bold, + ), + onSubmitted: (_) { + FocusScope.of(context).requestFocus(focusNode); + }, + ), + ), + Padding( + padding: EdgeInsets.fromLTRB(0.0, 15.0, 0.0, 0.0), + child: TextField( + autocorrect: false, + textAlign: TextAlign.center, + controller: _passwordController, + focusNode: focusNode, + decoration: InputDecoration( + hintText: 'PASSWORD', + hintStyle: TextStyle(fontSize: 15), + ), + obscureText: true, + style: TextStyle( + fontSize: 18.0, + color: Colors.grey[800], + fontWeight: FontWeight.bold, + ), + onSubmitted: (_) { + login( _emailController.text, + _passwordController.text); + }, + ), + ), + Container( + margin: EdgeInsets.fromLTRB(0.0, 40.0, 0.0, 30.0), + width: 100, + height: 50, + child: Opacity( + opacity: _isLoggingIn ? 0.5 : 1, + child: ClipRRect( + borderRadius: BorderRadius.circular(2), + child : Stack( + children : [ + AnimatedBackground([Colors.blue, Colors.lightBlue[300]], Colors.lightBlue, Alignment.topRight, Alignment.bottomLeft), + Material( + type: MaterialType.transparency, + child : InkWell( + onTap: _isLoggingIn ? null : () => login( _emailController.text, _passwordController.text), + child: new Center( + child: new Text( + 'GO', style: new TextStyle(fontSize: 18, color: Colors.white),), + ), + ), + ), + ], + ), ), ), ), - ), - Padding( - padding: EdgeInsets.fromLTRB(0, 10, 0, 50), + Padding( + padding: EdgeInsets.fromLTRB(0, 10, 0, 50), - child: LabeledCheckbox( - label : "SAVE LOGIN", - textStyle: TextStyle(fontSize: 18, color: Colors.black54, fontWeight: FontWeight.bold), - padding: const EdgeInsets.fromLTRB(0,0,0,0), - value : _saveLoginDetails, + child: LabeledCheckbox( + label : "SAVE LOGIN", + textStyle: TextStyle(fontSize: 18, color: Colors.black54, fontWeight: FontWeight.bold), + padding: const EdgeInsets.fromLTRB(0,0,0,0), + value : _saveLoginDetails, - onChanged: (bool newValue) { - setState(() { - _saveLoginDetails = newValue; - }); - }, + onChanged: (bool newValue) { + setState(() { + _saveLoginDetails = newValue; + }); + }, + ), ), - ), - ], + ], + ), ), - ), + ], ), ), ); diff --git a/lib/pages/receipt_page_2.dart b/lib/pages/receipt_page_2.dart index c5124fa..9f44f99 100644 --- a/lib/pages/receipt_page_2.dart +++ b/lib/pages/receipt_page_2.dart @@ -66,15 +66,6 @@ class ReceiptPage2State extends State { _submitReceipt(Transaction transaction) { DateTime dt = new DateTime.now(); - // sample transaction: - // { - // "transaction_type":1, - // "transaction_value":33, - // "purchase_time":"2019-08-12T11:06:00.000+01:00", - // "organisation_id":59661, - // "essential":false, - // "session_key":"C438440A-B775-11E9-8EE8-147589E69626" - // } Receipt receipt = new Receipt(); receipt.organisationName = transaction.organisation.name; @@ -205,10 +196,12 @@ class ReceiptPage2State extends State { }, child: Text( transaction.date == null - ? 'None set' - : transaction.date.year == DateTime.now().year - ? '${new DateFormat.MMMd().format(transaction.date)}' + ", " + '${new DateFormat.Hm().format(transaction.date)}' - : '${new DateFormat.MMMd().format(transaction.date)}' + " " + transaction.date.year.toString() + ", " + '${new DateFormat.Hm().format(transaction.date)}', + ? 'None set.' + : transaction.date.year != DateTime.now().year + ? '${new DateFormat.MMMd().format(transaction.date)}' + " " + transaction.date.year.toString() + " at " + '${new DateFormat.Hm().format(transaction.date)}' + : transaction.date.day == DateTime.now().day && transaction.date.month == DateTime.now().month + ? "Today at " + '${new DateFormat.Hm().format(transaction.date)}' + : '${new DateFormat.MMMd().format(transaction.date)}' + " at " + '${new DateFormat.Hm().format(transaction.date)}', style: TextStyle(color: Colors.white, fontSize: 22.0), ), @@ -299,23 +292,24 @@ class ReceiptPage2State extends State { child: RaisedButton( onPressed: () { showModalBottomSheet( - context: context, - builder: (BuildContext builder) { - return Container( - height: MediaQuery.of(context).copyWith().size.height / 3, - child: CupertinoPicker( - backgroundColor: Colors.white, - children: _sampleRecurringOptions.map((thisOption) => Text(thisOption, style: TextStyle(fontSize: 30))).toList(), - onSelectedItemChanged: ((newValue) { - transaction.recurring = _sampleRecurringOptions[newValue]; - setState(() {}); - }), - magnification: 1.1, - useMagnifier: true, - itemExtent: 36, - ), - ); - }); + context: context, + builder: (BuildContext builder) { + return Container( + height: MediaQuery.of(context).copyWith().size.height / 3, + child: CupertinoPicker( + backgroundColor: Colors.white, + children: _sampleRecurringOptions.map((thisOption) => Text(thisOption, style: TextStyle(fontSize: 30))).toList(), + onSelectedItemChanged: ((newValue) { + transaction.recurring = _sampleRecurringOptions[newValue]; + setState(() {}); + }), + magnification: 1.1, + useMagnifier: true, + itemExtent: 36, + ), + ); + } + ); }, child: Text( transaction.recurring == null @@ -380,7 +374,7 @@ class ReceiptPage2State extends State { ? 'None' : transaction.category, style: - TextStyle(color: Colors.white, fontSize: 22.0), + TextStyle(color: Colors.white, fontSize: 22.0), ), color: Colors.blue, ), @@ -471,52 +465,55 @@ class ReceiptPage2State extends State { height: 75.0, child: ClipRRect( borderRadius: BorderRadius.circular(2), - child: Stack( - children: [ - AnimatedBackground(), - Material( - type: MaterialType.transparency, - child: InkWell( - child: Center( - child : Text("GO", - style: - TextStyle(color: Colors.white, fontSize: 30.0), + child: Opacity( + opacity: 1, + child: Stack( + children: [ + AnimatedBackground([Colors.blue, Colors.lightBlue[300]], Colors.lightBlue, Alignment.topLeft, Alignment.bottomRight), + Material( + type: MaterialType.transparency, + child: InkWell( + child: Center( + child : Text("GO", + style: + TextStyle(color: Colors.white, fontSize: 30.0), + ), ), - ), - onTap: () { - try { - if (transaction.amount.text == "" || transaction.organisation.name == null) { - showDialog( - context: context, - builder: (BuildContext context) { - return _invalidDialog(context); - } - ); - } else { - if (double.tryParse(transaction.amount.text) != null && double.tryParse(transaction.amount.text) > 0) { - _submitReceipt(transaction); - } else { + onTap: () { + try { + if (transaction.amount.text == "" || transaction.organisation.name == null) { showDialog( - context: context, - builder: (BuildContext context) { - return _invalidDialog(context); - } + context: context, + builder: (BuildContext context) { + return _invalidDialog(context); + } ); + } else { + if (double.tryParse(transaction.amount.text) != null && double.tryParse(transaction.amount.text) > 0) { + _submitReceipt(transaction); + } else { + showDialog( + context: context, + builder: (BuildContext context) { + return _invalidDialog(context); + } + ); + } } } - } - catch (_) { - showDialog( - context: context, - builder: (BuildContext context) { - return _invalidDialog(context); - } - ); - } - }, + catch (_) { + showDialog( + context: context, + builder: (BuildContext context) { + return _invalidDialog(context); + } + ); + } + }, + ), ), - ), - ], + ], + ), ), ), ),