diff --git a/example/assets/bg-white.png b/example/assets/bg-white.png new file mode 100644 index 0000000..f7bcfb8 Binary files /dev/null and b/example/assets/bg-white.png differ diff --git a/example/lib/app_colors.dart b/example/lib/app_colors.dart index 0393a37..1d676a4 100644 --- a/example/lib/app_colors.dart +++ b/example/lib/app_colors.dart @@ -4,8 +4,9 @@ class AppColors { AppColors._(); static const Color cardBgColor = Color(0xff363636); + static const Color cardBgLightColor = Color(0xff999999); static const Color colorB58D67 = Color(0xffB58D67); static const Color colorE5D1B2 = Color(0xffE5D1B2); static const Color colorF9EED2 = Color(0xffF9EED2); - static const Color colorFFFFFD = Color(0xffFFFFFD); + static const Color colorEFEFED = Color(0xffEFEFED); } diff --git a/example/lib/main.dart b/example/lib/main.dart index 7cbdd73..7ae63f8 100644 --- a/example/lib/main.dart +++ b/example/lib/main.dart @@ -1,5 +1,6 @@ import 'package:example/app_colors.dart'; import 'package:flutter/material.dart'; +import 'package:flutter/services.dart'; import 'package:flutter_credit_card/credit_card_brand.dart'; import 'package:flutter_credit_card/flutter_credit_card.dart'; @@ -19,6 +20,7 @@ class MySample extends StatefulWidget { } class MySampleState extends State { + bool isLightTheme = false; String cardNumber = ''; String expiryDate = ''; String cardHolderName = ''; @@ -37,237 +39,258 @@ class MySampleState extends State { @override Widget build(BuildContext context) { + SystemChrome.setSystemUIOverlayStyle( + isLightTheme ? SystemUiOverlayStyle.dark : SystemUiOverlayStyle.light, + ); return MaterialApp( title: 'Flutter Credit Card View Demo', debugShowCheckedModeBanner: false, + themeMode: isLightTheme ? ThemeMode.light : ThemeMode.dark, theme: ThemeData( - primarySwatch: Colors.blue, + brightness: Brightness.light, + primaryColor: Colors.white, + scaffoldBackgroundColor: Colors.black, + ), + darkTheme: ThemeData( + brightness: Brightness.dark, + primaryColor: Colors.black, + scaffoldBackgroundColor: Colors.white, ), home: Scaffold( resizeToAvoidBottomInset: false, - body: Container( - decoration: const BoxDecoration( - image: DecorationImage( - image: ExactAssetImage('assets/bg.png'), - fit: BoxFit.fill, - ), - color: Colors.black, - ), - child: SafeArea( - child: Column( - children: [ - const SizedBox( - height: 30, + body: Builder( + builder: (context) { + final bgColor = Theme.of(context).scaffoldBackgroundColor; + return Container( + decoration: BoxDecoration( + color: bgColor, + image: DecorationImage( + image: ExactAssetImage( + isLightTheme ? 'assets/bg-white.png' : 'assets/bg.png', + ), + fit: BoxFit.fill, ), - CreditCardWidget( - shouldFloat: useFloatingAnimation, - shouldAddGlare: true, - shouldAddShadow: true, - glassmorphismConfig: - useGlassMorphism ? Glassmorphism.defaultConfig() : null, - cardNumber: cardNumber, - expiryDate: expiryDate, - cardHolderName: cardHolderName, - cvvCode: cvvCode, - bankName: 'Axis Bank', - frontCardBorder: - !useGlassMorphism ? Border.all(color: Colors.grey) : null, - backCardBorder: - !useGlassMorphism ? Border.all(color: Colors.grey) : null, - showBackView: isCvvFocused, - obscureCardNumber: true, - obscureCardCvv: true, - isHolderNameVisible: true, - cardBgColor: AppColors.cardBgColor, - backgroundImage: - useBackgroundImage ? 'assets/card_bg.png' : null, - isSwipeGestureEnabled: true, - onCreditCardWidgetChange: - (CreditCardBrand creditCardBrand) {}, - customCardTypeIcons: [ - CustomCardTypeIcon( - cardType: CardType.mastercard, - cardImage: Image.asset( - 'assets/mastercard.png', - height: 48, - width: 48, + ), + child: SafeArea( + child: Column( + crossAxisAlignment: CrossAxisAlignment.end, + children: [ + IconButton( + onPressed: () => setState(() { + isLightTheme = !isLightTheme; + }), + icon: Icon( + isLightTheme ? Icons.light_mode : Icons.dark_mode, ), ), - ], - ), - Expanded( - child: SingleChildScrollView( - child: Column( - children: [ - CreditCardForm( - formKey: formKey, - obscureCvv: true, - obscureNumber: true, - cardNumber: cardNumber, - cvvCode: cvvCode, - isHolderNameVisible: true, - isCardNumberVisible: true, - isExpiryDateVisible: true, - cardHolderName: cardHolderName, - expiryDate: expiryDate, - themeColor: Colors.blue, - textColor: Colors.white, - cardNumberDecoration: InputDecoration( - labelText: 'Number', - hintText: 'XXXX XXXX XXXX XXXX', - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, + CreditCardWidget( + shouldFloat: useFloatingAnimation, + shouldAddGlare: true, + shouldAddShadow: true, + glassmorphismConfig: _getGlassmorphismConfig(), + cardNumber: cardNumber, + expiryDate: expiryDate, + cardHolderName: cardHolderName, + cvvCode: cvvCode, + bankName: 'Axis Bank', + frontCardBorder: !useGlassMorphism + ? Border.all(color: Colors.grey) + : null, + backCardBorder: !useGlassMorphism + ? Border.all(color: Colors.grey) + : null, + showBackView: isCvvFocused, + obscureCardNumber: true, + obscureCardCvv: true, + isHolderNameVisible: true, + cardBgColor: isLightTheme + ? AppColors.cardBgLightColor + : AppColors.cardBgColor, + backgroundImage: + useBackgroundImage ? 'assets/card_bg.png' : null, + isSwipeGestureEnabled: true, + onCreditCardWidgetChange: + (CreditCardBrand creditCardBrand) {}, + customCardTypeIcons: [ + CustomCardTypeIcon( + cardType: CardType.mastercard, + cardImage: Image.asset( + 'assets/mastercard.png', + height: 48, + width: 48, ), - expiryDateDecoration: InputDecoration( - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, - labelText: 'Expired Date', - hintText: 'XX/XX', - ), - cvvCodeDecoration: InputDecoration( - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, - labelText: 'CVV', - hintText: 'XXX', - ), - cardHolderDecoration: InputDecoration( - hintStyle: const TextStyle(color: Colors.white), - labelStyle: const TextStyle(color: Colors.white), - focusedBorder: border, - enabledBorder: border, - labelText: 'Card Holder', - ), - onCreditCardModelChange: onCreditCardModelChange, ), - const SizedBox( - height: 20, - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - 'Glassmorphism', - style: TextStyle( - color: Colors.white, - fontSize: 18, - ), + ], + ), + Expanded( + child: SingleChildScrollView( + child: Column( + children: [ + CreditCardForm( + formKey: formKey, + obscureCvv: true, + obscureNumber: true, + cardNumber: cardNumber, + cvvCode: cvvCode, + isHolderNameVisible: true, + isCardNumberVisible: true, + isExpiryDateVisible: true, + cardHolderName: cardHolderName, + expiryDate: expiryDate, + themeColor: Theme.of(context).primaryColor, + textColor: bgColor, + cardNumberDecoration: InputDecoration( + labelText: 'Number', + hintText: 'XXXX XXXX XXXX XXXX', + hintStyle: TextStyle(color: bgColor), + labelStyle: TextStyle(color: bgColor), + focusedBorder: border, + enabledBorder: border, ), - const Spacer(), - Switch( - value: useGlassMorphism, - inactiveTrackColor: Colors.grey, - activeColor: Colors.white, - activeTrackColor: AppColors.colorE5D1B2, - onChanged: (bool value) => setState(() { - useGlassMorphism = value; - }), + expiryDateDecoration: InputDecoration( + hintStyle: TextStyle(color: bgColor), + labelStyle: TextStyle(color: bgColor), + focusedBorder: border, + enabledBorder: border, + labelText: 'Expired Date', + hintText: 'XX/XX', ), - ], - ), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - 'Card Image', - style: TextStyle( - color: Colors.white, - fontSize: 18, - ), + cvvCodeDecoration: InputDecoration( + hintStyle: TextStyle(color: bgColor), + labelStyle: TextStyle(color: bgColor), + focusedBorder: border, + enabledBorder: border, + labelText: 'CVV', + hintText: 'XXX', ), - const Spacer(), - Switch( - value: useBackgroundImage, - inactiveTrackColor: Colors.grey, - activeColor: Colors.white, - activeTrackColor: AppColors.colorE5D1B2, - onChanged: (bool value) => setState(() { - useBackgroundImage = value; - }), + cardHolderDecoration: InputDecoration( + hintStyle: TextStyle(color: bgColor), + labelStyle: TextStyle(color: bgColor), + focusedBorder: border, + enabledBorder: border, + labelText: 'Card Holder', ), - ], - ), - ), - Padding( - padding: const EdgeInsets.symmetric(horizontal: 16), - child: Row( - mainAxisAlignment: MainAxisAlignment.center, - children: [ - const Text( - 'Floating Card', - style: TextStyle( - color: Colors.white, - fontSize: 18, - ), + onCreditCardModelChange: onCreditCardModelChange, + ), + const SizedBox(height: 20), + Padding( + padding: + const EdgeInsets.symmetric(horizontal: 16), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'Glassmorphism', + style: TextStyle(fontSize: 18), + ), + const Spacer(), + Switch( + value: useGlassMorphism, + inactiveTrackColor: Colors.grey, + activeColor: Colors.white, + activeTrackColor: AppColors.colorE5D1B2, + onChanged: (bool value) => setState(() { + useGlassMorphism = value; + }), + ), + ], ), - const Spacer(), - Switch( - value: useFloatingAnimation, - inactiveTrackColor: Colors.grey, - activeColor: Colors.white, - activeTrackColor: AppColors.colorE5D1B2, - onChanged: (bool value) => setState(() { - useFloatingAnimation = value; - }), + ), + Padding( + padding: + const EdgeInsets.symmetric(horizontal: 16), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + const Text( + 'Card Image', + style: TextStyle(fontSize: 18), + ), + const Spacer(), + Switch( + value: useBackgroundImage, + inactiveTrackColor: Colors.grey, + activeColor: Colors.white, + activeTrackColor: AppColors.colorE5D1B2, + onChanged: (bool value) => setState(() { + useBackgroundImage = value; + }), + ), + ], ), - ], - ), - ), - const SizedBox( - height: 20, - ), - GestureDetector( - onTap: _onValidate, - child: Container( - margin: const EdgeInsets.symmetric( - horizontal: 16, vertical: 8), - decoration: BoxDecoration( - gradient: const LinearGradient( - colors: [ - AppColors.colorB58D67, - AppColors.colorB58D67, - AppColors.colorE5D1B2, - AppColors.colorF9EED2, - AppColors.colorFFFFFD, - AppColors.colorF9EED2, - AppColors.colorB58D67, + ), + Padding( + padding: + const EdgeInsets.symmetric(horizontal: 16), + child: Row( + mainAxisAlignment: MainAxisAlignment.center, + children: [ + Text( + 'Floating Card', + style: TextStyle(fontSize: 18), + ), + const Spacer(), + Switch( + value: useFloatingAnimation, + inactiveTrackColor: Colors.grey, + activeColor: Colors.white, + activeTrackColor: AppColors.colorE5D1B2, + onChanged: (bool value) => setState(() { + useFloatingAnimation = value; + }), + ), ], - begin: Alignment(-1, -4), - end: Alignment(1, 4), ), - borderRadius: BorderRadius.circular(8), ), - padding: const EdgeInsets.symmetric(vertical: 15), - width: double.infinity, - alignment: Alignment.center, - child: const Text( - 'Validate', - style: TextStyle( - color: Colors.black, - fontFamily: 'halter', - fontSize: 14, - package: 'flutter_credit_card', + const SizedBox(height: 20), + GestureDetector( + onTap: _onValidate, + child: Container( + margin: const EdgeInsets.symmetric( + horizontal: 16, + vertical: 8, + ), + decoration: const BoxDecoration( + gradient: LinearGradient( + colors: [ + AppColors.colorB58D67, + AppColors.colorB58D67, + AppColors.colorE5D1B2, + AppColors.colorF9EED2, + AppColors.colorEFEFED, + AppColors.colorF9EED2, + AppColors.colorB58D67, + ], + begin: Alignment(-1, -4), + end: Alignment(1, 4), + ), + borderRadius: BorderRadius.all( + Radius.circular(8), + ), + ), + padding: + const EdgeInsets.symmetric(vertical: 15), + alignment: Alignment.center, + child: const Text( + 'Validate', + style: TextStyle( + color: Colors.black, + fontFamily: 'halter', + fontSize: 14, + package: 'flutter_credit_card', + ), + ), ), ), - ), + ], ), - ], + ), ), - ), + ], ), - ], - ), - ), + ), + ); + }, ), ), ); @@ -287,6 +310,21 @@ class MySampleState extends State { } } + Glassmorphism? _getGlassmorphismConfig() { + if (!useGlassMorphism) return null; + + final LinearGradient gradient = LinearGradient( + begin: Alignment.topLeft, + end: Alignment.bottomRight, + colors: [Colors.grey.withAlpha(50), Colors.grey.withAlpha(50)], + stops: const [0.3, 0], + ); + + return isLightTheme + ? Glassmorphism(blurX: 8.0, blurY: 16.0, gradient: gradient) + : Glassmorphism.defaultConfig(); + } + void onCreditCardModelChange(CreditCardModel? creditCardModel) { if (creditCardModel == null) return; setState(() {