SimformSolutionsPvtLtd / flutter_credit_card

A credit card widget for Flutter application.
https://pub.dev/packages/flutter_credit_card
MIT License
431 stars 262 forks source link

change in cardBgColor doesn't work when widget is rebuilt #121

Closed carloberd closed 1 year ago

carloberd commented 1 year ago

Describe the bug I am using flutter_credi_card version version 3.0.4. The problem is that when my widget containing CreditCardWidget() is rebuilt, the cardBgColor doens't change accordingly. I tried using the glassmorphismConfig and changing the gradient colors and it works just fine.

To Reproduce This is my code if someone want to reproduce the issue:

const List<String> cardColors = ['ffffcba4', 'ffcdd5ea', 'ffbae1ff', 'ffffb3ba', 'ff5a5a5a'];

/// State
class CardsState extends Equatable {
  const CardsState({
    this.color = 'bae1ff',
  });

  final String color;

  @override
  List<Object> get props => [color];

  CardsState copyWith({
    String? color,
  }) {
    return CardsState(
      color: color ?? this.color,
    );
  }
}

/// Event
class ColorChange extends CardsEvent {
  const ColorChange(this.color);

  final String color;

  @override
  List<Object> get props => [color];
}

/// Bloc
class CardsBloc extends Bloc<CardsEvent, CardsState> {
  CardsBloc() : super(const CardsState()) {
    on<ColorChange>(_onColorChange);
  }

  void _onColorChange(ColorChange event, Emitter<CardsState> emit) {
    emit(state.copyWith(color: event.color));
  }
}

/// Screen
class NewCard extends StatefulWidget {
  const NewCard({super.key});

  @override
  State<NewCard> createState() => _NewCardState();
}

class _NewCardState extends State<NewCard> {
  @override
  Widget build(BuildContext context) {
    return BlocConsumer<CardsBloc, CardsState>(
      listener: (context, state) {
        // Some listeners
      },
      buildWhen: (previous, current) => previous != current,
      builder: (context, state) {
        return Scaffold(
          appBar: AppBar(
            title: const Text('New card'),
            centerTitle: false,
          ),
          body: SafeArea(
            child: Padding(
              padding: const EdgeInsets.all(10),
              child: ListView(
                children: [
                  const _CreditCard(),
                  const _Colors(),
                ],
              ),
            ),
          ),
        );
      },
    );
  }
}

/// Credit card widget
class _CreditCard extends StatelessWidget {
  const _CreditCard();

  @override
  Widget build(BuildContext context) {
    final state = context.watch<CardsBloc>().state;
    return CreditCardWidget(
      isHolderNameVisible: true,
      cardNumber: '1111222233334444',
      expiryDate: '12/26',
      cardHolderName: 'Foo Bar',
      cvvCode: '123',
      showBackView: false,
      onCreditCardWidgetChange: (p0) {},
      isChipVisible: false,
      cardBgColor: Color(int.parse(state.color, radix: 16)),
    );
  }
}

/// Color selection widget
class _Colors extends StatelessWidget {
  const _Colors();

  @override
  Widget build(BuildContext context) {
    final state = context.watch<CardsBloc>().state;
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: cardColors
          .map(
            (color) => IconButton(
              onPressed: () => context.read<CardsBloc>().add(ColorChange(color)),
              icon: Container(
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(100),
                  border: Border.all(width: 1.5, color: state.color == color ? Colors.white : Colors.transparent),
                ),
                child: Icon(
                  Icons.fiber_manual_record,
                  color: Color(int.parse(color, radix: 16)),
                  size: 32,
                ),
              ),
            ),
          )
          .toList(),
    );
  }
}

The result i expect: when i click on a IconButton referred to a color the background color of the card should change to the selected one. As I say initially, this behavior is correct when using glassmorphismConfig but not with cardBgColor. On top of that, if i make an hardcoded change to the cardBgColor property (eg: from Colors.red to Colors.green) I have to restart my application because the only hot reload doesn't trigger the change.

Tested on iPhone 13 emulator.

I hope this info I gave you would help resolve this problem. If I miss something or someone need more informations please let me know

faiyaz-shaikh commented 1 year ago

Hi @carloberd, Issue is fixed in PR #112 . We will release in short time. Thanks.