diff --git a/images/shopping/apple_pay.png b/images/shopping/apple_pay.png new file mode 100644 index 0000000..aeff2f9 Binary files /dev/null and b/images/shopping/apple_pay.png differ diff --git a/images/shopping/applepay.jpg b/images/shopping/applepay.jpg new file mode 100644 index 0000000..7241e49 Binary files /dev/null and b/images/shopping/applepay.jpg differ diff --git a/images/shopping/background.jpg b/images/shopping/background.jpg new file mode 100644 index 0000000..ba9169b Binary files /dev/null and b/images/shopping/background.jpg differ diff --git a/images/shopping/battery.png b/images/shopping/battery.png new file mode 100644 index 0000000..2f695ec Binary files /dev/null and b/images/shopping/battery.png differ diff --git a/images/shopping/paypal.png b/images/shopping/paypal.png new file mode 100644 index 0000000..9623473 Binary files /dev/null and b/images/shopping/paypal.png differ diff --git a/images/shopping/visa.png b/images/shopping/visa.png new file mode 100644 index 0000000..0a3a6d0 Binary files /dev/null and b/images/shopping/visa.png differ diff --git a/lib/const/color_const.dart b/lib/const/color_const.dart index 6f754ef..ac45f05 100644 --- a/lib/const/color_const.dart +++ b/lib/const/color_const.dart @@ -10,5 +10,11 @@ const DARK_COLOR = Color(0xFFBDBDBD); const BOTTOM_COLORS = [MAIN_COLOR, DARK_COLOR]; const YELLOW = Color(0xfffbed96); const BLUE = Color(0xffabecd6); +const BLUE_DEEP = Color(0xffA8CBFD); +const BLUE_LIGHT = Color(0xffAED3EA); const PURPLE = Color(0xffccc3fc); -const RED = Color(0xffffb6b3); +const RED = Color(0xffF2A7B3); +const GREEN = Color(0xffc7e5b4); +const RED_LIGHT = Color(0xffFFC3A0); +const TEXT_BLACK = Color(0xFF353535); +const TEXT_BLACK_LIGHT = Color(0xFF34323D); diff --git a/lib/const/page_str_const.dart b/lib/const/page_str_const.dart index e184104..d1d9d57 100644 --- a/lib/const/page_str_const.dart +++ b/lib/const/page_str_const.dart @@ -56,7 +56,8 @@ const SHOPPING_PAGES = [ "Shopping page 01", "Shopping page 02", "Shopping page 03", - + "Shopping page 18", + "Shopping page 19", /// fixme you could add by your group one name fit one page. ]; const STATISTIC_PAGES = [ diff --git a/lib/page/empty_page.dart b/lib/page/empty_page.dart index 02c9648..e69de29 100644 --- a/lib/page/empty_page.dart +++ b/lib/page/empty_page.dart @@ -1,23 +0,0 @@ -/// -/// Created by NieBin on 18-12-24 -/// Github: https://github.com/nb312 -/// Email: niebin312@gmail.com -/// -import "package:flutter/material.dart"; - -class EmptyPage extends StatefulWidget { - @override - _EmptyState createState() => _EmptyState(); -} - -class _EmptyState extends State { - @override - Widget build(BuildContext context) { - return Scaffold( - appBar: AppBar( - title: Text("Empty page"), - ), - body: Text("Empty"), - ); - } -} diff --git a/lib/page/shopping/ShopPageEighteen.dart b/lib/page/shopping/ShopPageEighteen.dart new file mode 100644 index 0000000..af602a9 --- /dev/null +++ b/lib/page/shopping/ShopPageEighteen.dart @@ -0,0 +1,265 @@ +/// +/// Created by NieBin on 18-12-24 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import "package:flutter/cupertino.dart"; +import 'package:flutter_ui_nice/const/color_const.dart'; + +class EmptyPage extends StatefulWidget { + @override + _EmptyState createState() => _EmptyState(); +} + +class _EmptyState extends State { + Widget _backButton() { + return Container( + margin: EdgeInsets.only(left: 15, top: 20), + width: 50, + height: 50, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [Color.fromRGBO(7, 7, 7, 1), Color.fromRGBO(59, 59, 59, 1)], + ), + borderRadius: BorderRadius.circular(50)), + child: Center( + child: IconButton( + icon: Icon(Icons.arrow_back), + color: Colors.white, + onPressed: () { + print("Go Back"); + }, + )), + ); + } + + List paymentOptions; + List payment_colors = [ + Color.fromRGBO(249, 238, 169, 1), + Color.fromRGBO(173, 210, 252, 1), + GREEN, + ]; + List imageurl = [ + "images/shopping/paypal.png", + "images/shopping/visa.png", + "images/shopping/apple_pay.png" + ]; + + Widget FloatingTextFieldWidget(name, topmargin) { + return new Container( + padding: EdgeInsets.only(left: 5, right: 5), + margin: EdgeInsets.only(top: topmargin, left: 10, right: 10), + child: new Theme( + data: new ThemeData( + primaryColor: Colors.black, + primaryColorDark: Colors.blue, + highlightColor: Colors.green, + textSelectionColor: Colors.blue[100] // text selection color + ), + child: new TextField( + decoration: new InputDecoration( + prefixStyle: TextStyle(color: RED), + prefix: Text( + name + " ", + ), + hasFloatingPlaceholder: false, + hintStyle: TextStyle(color: Colors.white), + // helperText: 'Keep it short, this is just a demo.', + labelText: name, + labelStyle: TextStyle(color: Colors.black), + // prefixText: 'Email ', + // suffixText: 'USD', + // suffixStyle: const TextStyle(color: Colors.green) + ), + ), + ), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: SafeArea( + child: Stack( + children: [ + Column(children: [ + Container( + //appbar + height: 80, + decoration: + BoxDecoration(gradient: LinearGradient(colors: [YELLOW, BLUE])), + child: Row( + children: [ + Expanded( + child: Container(), + flex: 1, + ), + Expanded( + child: Container( + margin: EdgeInsets.only(top: 20), + alignment: FractionalOffset.center, + child: Text( + "PAYMENT", + style: TextStyle(color: Colors.black, fontSize: 16), + ), + ), + flex: 1, + ), + Expanded( + child: Container( + alignment: FractionalOffset.centerRight, + margin: EdgeInsets.only(top: 15), + child: IconButton( + icon: Icon( + Icons.more_vert, + color: Color.fromRGBO(7, 7, 7, 1), + size: 30, + ), + onPressed: () { + print("More Vertical options needed"); + }, + ), + ), + flex: 1, + ) + ], + ), + ), //appbar end + Container( + //Horizontal ListView + height: MediaQuery.of(context).size.height / 3.8, + padding: EdgeInsets.only(top: 20, bottom: 40), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [YELLOW, Color.fromRGBO(211, 239, 202, 1)])), + child: ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: 3, + itemBuilder: (BuildContext context, int currentindex) { + return InkWell( + onTap: () {}, + child: Container( + width: MediaQuery.of(context).size.width / 3, + margin: EdgeInsets.only(left: 10, right: 10), + child: Card( + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(10)), + elevation: 1.5, + color: payment_colors[currentindex], + child: Image.asset( + imageurl[currentindex], + fit: BoxFit.fill, + ), + ), + )); + }), + ), + Expanded( + //Button Background + child: Container( + width: double.infinity, + decoration: BoxDecoration( + gradient: LinearGradient( + begin: AlignmentDirectional.topStart, + colors: [YELLOW, BLUE], + )), + child: Column( + mainAxisAlignment: MainAxisAlignment.end, + children: [ + Container( + alignment: FractionalOffset.topCenter, + height: 80, + child: FlatButton( + color: Color.fromRGBO(7, 7, 7, 1), + textColor: Color.fromRGBO(198, 193, 124, 1), + onPressed: () {}, + padding: EdgeInsets.only( + left: 20, right: 20, top: 8, bottom: 8), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20)), + child: Text("Next", + style: TextStyle( + fontSize: 20, + )), + ), + ) + ], + )), + ) + ]), + Positioned( + top: MediaQuery.of(context).size.height / 2.8, + width: MediaQuery.of(context).size.width, + child: Container( + //pink container + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(10), + gradient: LinearGradient( + colors: [RED_LIGHT, RED], + ), + ), + height: MediaQuery.of(context).size.height / 2.2, + margin: EdgeInsets.only(left: 20, right: 20), + child: Column( + children: [ + FloatingTextFieldWidget("Card Number", 10.0), + FloatingTextFieldWidget("Name", 10.0), + Row( + children: [ + Expanded( + child: FloatingTextFieldWidget("Exp Date", 10.0), + flex: 2, + ), + Expanded( + child: FloatingTextFieldWidget("CVV", 10.0), + flex: 1, + ) + ], + ), + Row( + children: [ + Container( + margin: EdgeInsets.only(top: 10, left: 10), + width: 30, + height: 30, + decoration: BoxDecoration( + borderRadius: BorderRadius.circular(30.0), + color: Colors.black), + child: Theme( + data: ThemeData(disabledColor: Colors.lightBlue[100]), + child: Radio( + value: null, + groupValue: null, + onChanged: null, + ), + ), + ), + Container( + margin: EdgeInsets.only(top: 10, left: 10), + child: Text("Save credit card information")), + ], + ) + ], + ), + ), + ), + Container(margin: EdgeInsets.only(top: 10), child: _backButton()) + ], + ))); + } +} + +// #abecd6 blue gradient +// #fbed96 yellow gradient +// #ffb0bb pink card right top +// #f7eeaa paypal color +// #f9eea9 paypal left +// #d3efca apple pay right top +// #a3c6fd visa right bottom +// #add2fc visa right top +// #bde4fb visa left center +// #3b3b3b button color right +// #070707 button left +// #c6c17c Button text color rgb(198, 193, 124) +// #34323d underline color rgb(52, 50, 61) diff --git a/lib/page/shopping/ShopPageNineteen.dart b/lib/page/shopping/ShopPageNineteen.dart new file mode 100644 index 0000000..e1db620 --- /dev/null +++ b/lib/page/shopping/ShopPageNineteen.dart @@ -0,0 +1,256 @@ +/// +/// Created by NieBin on 18-12-24 +/// Github: https://github.com/nb312 +/// Email: niebin312@gmail.com +/// +import "package:flutter/material.dart"; +import "package:flutter/cupertino.dart"; +import 'package:flutter_ui_nice/const/color_const.dart'; + +class EmptyPage extends StatefulWidget { + @override + _EmptyState createState() => _EmptyState(); +} + +class _EmptyState extends State { + Widget _backButton() { + return Container( + margin: EdgeInsets.only(left: 15, top: 20), + width: 50, + height: 50, + decoration: BoxDecoration( + gradient: LinearGradient( + colors: [Color.fromRGBO(7, 7, 7, 1), Color.fromRGBO(59, 59, 59, 1)], + ), + borderRadius: BorderRadius.circular(50)), + child: Center( + child: IconButton( + icon: Icon(Icons.arrow_back), + color: Colors.white, + onPressed: () { + print("Go Back"); + }, + )), + ); + } + + List savedcards = [ + [RED, RED_LIGHT], + [BLUE_DEEP, BLUE_LIGHT], + [GREEN, BLUE_LIGHT] + ]; + List cardname = ["Lorem Ipsum", "Mitchell johnson", "Michael Bernard"]; + + Widget textfield(String hint) { + return TextField( + decoration: InputDecoration( + hasFloatingPlaceholder: false, + labelText: hint, + ), + ); + } + + @override + Widget build(BuildContext context) { + return Scaffold( + body: Stack( + children: [ + Column(children: [ + Container( + //appbar + //appbar + height: 80, + decoration: + BoxDecoration(gradient: LinearGradient(colors: [YELLOW, BLUE])), + child: Row( + children: [ + Expanded( + child: Container(), + flex: 1, + ), + Expanded( + child: Container( + margin: EdgeInsets.only(top: 20), + alignment: FractionalOffset.center, + child: Text( + "PAYMENT", + style: TextStyle(color: Colors.black, fontSize: 16), + ), + ), + flex: 1, + ), + Expanded( + child: Container( + alignment: FractionalOffset.centerRight, + margin: EdgeInsets.only(top: 20), + child: IconButton( + icon: Icon( + Icons.more_vert, + color: Color.fromRGBO(7, 7, 7, 1), + size: 30, + ), + onPressed: () { + print("More Vertical options needed"); + }, + ), + ), + flex: 1, + ) + ], + ), + ), //appbar end + Expanded( + //Button Background + child: Container( + width: double.infinity, + decoration: BoxDecoration( + gradient: LinearGradient( + begin: AlignmentDirectional.topStart, + colors: [YELLOW, BLUE], + )), + child: Column( + mainAxisAlignment: MainAxisAlignment.spaceEvenly, + children: [ + Expanded( + child: Stack( + fit: StackFit.expand, + alignment: Alignment.center, + children: [ + Opacity( + opacity: 0.5, + child: Image.asset( + "images/shopping/background.jpg", + fit: BoxFit.cover, + ), + ), + Container( + color: Color.fromRGBO(168, 203, 253, 0.4), + ), + ListView.builder( + scrollDirection: Axis.horizontal, + itemCount: 3, + itemBuilder: + (BuildContext context, int currentcardindex) { + return InkWell( + onTap: () { + print("Card Tapped:" + + currentcardindex.toString()); + }, + child: Container( + padding: EdgeInsets.all(20), + width: + MediaQuery.of(context).size.width / 1.2, + margin: EdgeInsets.all(20), + decoration: BoxDecoration( + gradient: LinearGradient( + colors: + savedcards[currentcardindex]), + borderRadius: + BorderRadius.circular(10)), + child: Column( + //card design + children: [ + Expanded( + child: Container( + alignment: FractionalOffset.topLeft, + child: Switch( + value: true, + onChanged: (bool status) { + print("Switch is" + + status.toString()); + }, + ), + ), + flex: 2, + ), + Expanded( + child: Row( + mainAxisAlignment: + MainAxisAlignment.start, + children: [ + Container( + child: Text( + "**** **** 9012", + ), + alignment: FractionalOffset + .bottomCenter, + ), + ], + ), + flex: 1, + ), + Expanded( + child: Row( + children: [ + Expanded( + child: Text( + cardname[currentcardindex] + .toString()), + flex: 4, + ), + Expanded( + child: Container(), + flex: 3, + ), + Expanded( + child: Text("08/23"), + flex: 2, + ) + ], + ), + flex: 1, + ) + ], + ), + ), + ); + }, + ), + ]), + flex: 4, + ), + Expanded( + //formfields + child: Container( + margin: EdgeInsets.only(left: 20, right: 20, top: 10), + child: SingleChildScrollView( + child: Column( + children: [ + textfield("Name on the Card"), + textfield("Card Number"), + textfield("Expiration Date"), + textfield("CVV") + ], + )), + ), + flex: 5, + ), + Expanded( + child: Container( + alignment: FractionalOffset.center, + height: 80, + child: FlatButton( + color: Color.fromRGBO(7, 7, 7, 1), + textColor: Color.fromRGBO(198, 193, 124, 1), + onPressed: () {}, + padding: EdgeInsets.only( + left: 20, right: 20, top: 8, bottom: 8), + shape: RoundedRectangleBorder( + borderRadius: BorderRadius.circular(20)), + child: Text("Pay", + style: TextStyle( + fontSize: 20, + )), + ), + ), + flex: 2, + ) + ], + )), + ) + ]), + Container(margin: EdgeInsets.only(top: 20), child: _backButton()) + ], + )); + } +}