diff --git a/example/lib/main.dart b/example/lib/main.dart index fb551c1..19ef4c6 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -82,91 +82,91 @@ class _MyHomePageState extends State { @override Widget build(BuildContext context) { return Scaffold( - resizeToAvoidBottomInset: true, - body: SafeArea( - child: Column( - mainAxisSize: MainAxisSize.max, - crossAxisAlignment: CrossAxisAlignment.start, - children: [ - CreditCardWidget( - cardNumber: cardNumber, - expiryDate: expiryDate, - cardHolderName: cardHolderName, - cvvCode: cvvCode, - showBackView: isCvvFocused, - ), - Expanded( - child: SingleChildScrollView( - child: Form( - child: Column( - children: [ - Container( - padding: EdgeInsets.symmetric(vertical: 8.0), - margin: EdgeInsets.only(left: 16, top: 16, right: 16), - child: TextFormField( - controller: _cardNumberController, - decoration: InputDecoration( - border: OutlineInputBorder(), - labelText: "Card number", - hintText: "xxxx xxxx xxxx xxxx", - ), - keyboardType: TextInputType.number, - textInputAction: TextInputAction.next, - ), - ), - Container( - padding: EdgeInsets.symmetric(vertical: 8.0), - margin: EdgeInsets.only(left: 16, top: 8, right: 16), - child: TextFormField( - controller: _expiryDateController, - decoration: InputDecoration( - border: OutlineInputBorder(), - labelText: "Expired Date", - hintText: "MM/YY"), - keyboardType: TextInputType.number, - textInputAction: TextInputAction.next, + resizeToAvoidBottomInset: true, + body: SafeArea( + child: Column( + mainAxisSize: MainAxisSize.max, + crossAxisAlignment: CrossAxisAlignment.start, + children: [ + CreditCardWidget( + cardNumber: cardNumber, + expiryDate: expiryDate, + cardHolderName: cardHolderName, + cvvCode: cvvCode, + showBackView: isCvvFocused, + ), + Expanded( + child: SingleChildScrollView( + child: Form( + child: Column( + children: [ + Container( + padding: EdgeInsets.symmetric(vertical: 8.0), + margin: EdgeInsets.only(left: 16, top: 16, right: 16), + child: TextFormField( + controller: _cardNumberController, + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: "Card number", + hintText: "xxxx xxxx xxxx xxxx", ), + keyboardType: TextInputType.number, + textInputAction: TextInputAction.next, ), - Container( - padding: EdgeInsets.symmetric(vertical: 8.0), - margin: EdgeInsets.only(left: 16, top: 8, right: 16), - child: TextFormField( - controller: _cardHolderNameController, - decoration: InputDecoration( + ), + Container( + padding: EdgeInsets.symmetric(vertical: 8.0), + margin: EdgeInsets.only(left: 16, top: 8, right: 16), + child: TextFormField( + controller: _expiryDateController, + decoration: InputDecoration( border: OutlineInputBorder(), - labelText: "Card Holder", - ), - keyboardType: TextInputType.text, - textInputAction: TextInputAction.next, - ), + labelText: "Expired Date", + hintText: "MM/YY"), + keyboardType: TextInputType.number, + textInputAction: TextInputAction.next, ), - Container( - padding: EdgeInsets.symmetric(vertical: 8.0), - margin: EdgeInsets.only(left: 16, top: 8, right: 16), - child: TextField( - focusNode: cvvFocusNode, - controller: _cvvCodeController, - decoration: InputDecoration( - border: OutlineInputBorder(), - labelText: "CVV", - hintText: "XXX"), - keyboardType: TextInputType.number, - textInputAction: TextInputAction.done, - onChanged: (text) { - setState(() { - cvvCode = text; - }); - }, + ), + Container( + padding: EdgeInsets.symmetric(vertical: 8.0), + margin: EdgeInsets.only(left: 16, top: 8, right: 16), + child: TextFormField( + controller: _cardHolderNameController, + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: "Card Holder", ), + keyboardType: TextInputType.text, + textInputAction: TextInputAction.next, + ), + ), + Container( + padding: EdgeInsets.symmetric(vertical: 8.0), + margin: EdgeInsets.only(left: 16, top: 8, right: 16), + child: TextField( + focusNode: cvvFocusNode, + controller: _cvvCodeController, + decoration: InputDecoration( + border: OutlineInputBorder(), + labelText: "CVV", + hintText: "XXX"), + keyboardType: TextInputType.number, + textInputAction: TextInputAction.done, + onChanged: (text) { + setState(() { + cvvCode = text; + }); + }, ), - ], - ), + ), + ], ), ), ), - ], - ), + ), + ], ), + ), ); } } diff --git a/font/halter.ttf b/font/halter.ttf new file mode 100644 index 0000000..97a4bc7 Binary files /dev/null and b/font/halter.ttf differ diff --git a/lib/flutter_credit_card.dart b/lib/flutter_credit_card.dart index d74f71f..356c78f 100644 --- a/lib/flutter_credit_card.dart +++ b/lib/flutter_credit_card.dart @@ -22,11 +22,11 @@ class CreditCardWidget extends StatefulWidget { @required this.expiryDate, @required this.cardHolderName, @required this.cvvCode, - this.textStyle, @required this.showBackView, this.animationDuration = const Duration(milliseconds: 500), this.height, this.width, + this.textStyle, this.backgroundGradientColor = const LinearGradient( // Where the linear gradient begins and ends begin: Alignment.topRight, @@ -104,6 +104,9 @@ class _CreditCardWidgetState extends State Widget build(BuildContext context) { var height = MediaQuery.of(context).size.height; var width = MediaQuery.of(context).size.width; + Orientation orientation = MediaQuery + .of(context) + .orientation; /// /// If uer adds CVV then toggle the card from front to back.. @@ -120,11 +123,11 @@ class _CreditCardWidgetState extends State children: [ AnimationCard( animation: _frontRotation, - child: buildFrontContainer(width, height, context), + child: buildFrontContainer(width, height, context, orientation), ), AnimationCard( animation: _backRotation, - child: buildBackContainer(width, height, context), + child: buildBackContainer(width, height, context, orientation), ), ], ); @@ -133,8 +136,23 @@ class _CreditCardWidgetState extends State /// /// Builds a back container containing cvv /// - Container buildBackContainer( - double width, double height, BuildContext context) { + Container buildBackContainer(double width, + double height, + BuildContext context, + Orientation orientation,) { + var defaultTextStyle = Theme + .of(context) + .textTheme + .title + .merge( + TextStyle( + color: Colors.black, + fontFamily: "halter", + fontSize: 16, + package: "flutter_credit_card", + ), + ); + return Container( decoration: BoxDecoration( borderRadius: BorderRadius.circular(8), @@ -145,7 +163,9 @@ class _CreditCardWidgetState extends State ), margin: const EdgeInsets.all(16), width: widget.width ?? width, - height: widget.height ?? height / 4, + height: widget.height ?? orientation == Orientation.portrait + ? height / 4 + : height / 2, child: Column( mainAxisAlignment: MainAxisAlignment.spaceAround, crossAxisAlignment: CrossAxisAlignment.start, @@ -166,29 +186,22 @@ class _CreditCardWidgetState extends State crossAxisAlignment: CrossAxisAlignment.center, children: [ Expanded( - flex: 6, + flex: 9, child: Container( height: 48, color: Colors.white70, ), ), Expanded( + flex: 2, child: Container( color: Colors.white, child: Padding( padding: const EdgeInsets.all(5), child: Text( widget.cvvCode.isEmpty ? "XXX" : widget.cvvCode, - style: widget.textStyle ?? - Theme - .of(context) - .textTheme - .title - .merge( - TextStyle( - color: Colors.black, - ), - ), + maxLines: 1, + style: widget.textStyle ?? defaultTextStyle, ), ), ), @@ -220,7 +233,21 @@ class _CreditCardWidgetState extends State double width, double height, BuildContext context, + Orientation orientation, ) { + var defaultTextStyle = Theme + .of(context) + .textTheme + .title + .merge( + TextStyle( + color: Colors.white, + fontFamily: "halter", + fontSize: 16, + package: "flutter_credit_card", + ), + ); + return Container( margin: const EdgeInsets.all(16), decoration: BoxDecoration( @@ -231,7 +258,7 @@ class _CreditCardWidgetState extends State gradient: widget.backgroundGradientColor, ), width: width, - height: height / 4, + height: orientation == Orientation.portrait ? height / 4 : height / 2, child: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ @@ -249,16 +276,7 @@ class _CreditCardWidgetState extends State widget.cardNumber.isEmpty || widget.cardNumber == null ? "XXXX XXXX XXXX XXXX" : widget.cardNumber, - style: widget.textStyle ?? - Theme - .of(context) - .textTheme - .title - .merge( - TextStyle( - color: Colors.white, - ), - ), + style: widget.textStyle ?? defaultTextStyle, ), ), ), @@ -270,16 +288,7 @@ class _CreditCardWidgetState extends State widget.expiryDate.isEmpty || widget.expiryDate == null ? "MM/YY" : widget.expiryDate, - style: widget.textStyle ?? - Theme - .of(context) - .textTheme - .title - .merge( - TextStyle( - color: Colors.white, - ), - ), + style: widget.textStyle ?? defaultTextStyle, ), ), ), @@ -287,21 +296,14 @@ class _CreditCardWidgetState extends State child: Padding( padding: const EdgeInsets.only(left: 16, right: 16, bottom: 16), child: Text( - widget.cardHolderName.isEmpty || widget.cardHolderName == null + widget.cardHolderName.isEmpty || + widget.cardHolderName == null || + !RegExp(r'[a-zA-Z]').hasMatch(widget.cardHolderName) ? "CARD HOLDER" : widget.cardHolderName, maxLines: 1, overflow: TextOverflow.ellipsis, - style: widget.textStyle ?? - Theme - .of(context) - .textTheme - .title - .merge( - TextStyle( - color: Colors.white, - ), - ), + style: widget.textStyle ?? defaultTextStyle, ), ), ), diff --git a/pubspec.yaml b/pubspec.yaml index d252b34..bbb6115 100644 --- a/pubspec.yaml +++ b/pubspec.yaml @@ -36,17 +36,7 @@ flutter: # "family" key with the font family name, and a "fonts" key with a # list giving the asset and other descriptors for the font. For # example: -# fonts: -# - family: Schyler -# fonts: -# - asset: fonts/Schyler-Regular.ttf -# - asset: fonts/Schyler-Italic.ttf -# style: italic -# - family: Trajan Pro -# fonts: -# - asset: fonts/TrajanPro.ttf -# - asset: fonts/TrajanPro_Bold.ttf -# weight: 700 -# -# For details regarding fonts in packages, see -# https://flutter.dev/custom-fonts/#from-packages + fonts: + - family: halter + fonts: + - asset: font/halter.ttf \ No newline at end of file