Skip to content

Commit

Permalink
orientation management,
Browse files Browse the repository at this point in the history 
default font family change
  • Loading branch information
Bhavik Makwana committed Apr 29, 2019
1 parent f67079b commit 4fa1a87
Show file tree
Hide file tree
Showing 4 changed files with 130 additions and 138 deletions.
150 changes: 75 additions & 75 deletions example/lib/main.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,91 +82,91 @@ class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
resizeToAvoidBottomInset: true,
body: SafeArea(
child: Column(
mainAxisSize: MainAxisSize.max,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
CreditCardWidget(
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
showBackView: isCvvFocused,
),
Expanded(
child: SingleChildScrollView(
child: Form(
child: Column(
children: <Widget>[
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: <Widget>[
CreditCardWidget(
cardNumber: cardNumber,
expiryDate: expiryDate,
cardHolderName: cardHolderName,
cvvCode: cvvCode,
showBackView: isCvvFocused,
),
Expanded(
child: SingleChildScrollView(
child: Form(
child: Column(
children: <Widget>[
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;
});
},
),
],
),
),
],
),
),
),
],
),
),
],
),
),
);
}
}
Binary file added font/halter.ttf
View file
Binary file not shown.
100 changes: 51 additions & 49 deletions lib/flutter_credit_card.dart
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -104,6 +104,9 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
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..
Expand All @@ -120,11 +123,11 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
children: <Widget>[
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),
),
],
);
Expand All @@ -133,8 +136,23 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
///
/// 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),
Expand All @@ -145,7 +163,9 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
),
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,
Expand All @@ -166,29 +186,22 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
crossAxisAlignment: CrossAxisAlignment.center,
children: <Widget>[
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,
),
),
),
Expand Down Expand Up @@ -220,7 +233,21 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
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(
Expand All @@ -231,7 +258,7 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
gradient: widget.backgroundGradientColor,
),
width: width,
height: height / 4,
height: orientation == Orientation.portrait ? height / 4 : height / 2,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Expand All @@ -249,16 +276,7 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
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,
),
),
),
Expand All @@ -270,38 +288,22 @@ class _CreditCardWidgetState extends State<CreditCardWidget>
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,
),
),
),
Expanded(
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,
),
),
),
Expand Down
18 changes: 4 additions & 14 deletions pubspec.yaml
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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

0 comments on commit 4fa1a87

Please sign in to comment.