Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Closed
carloberd opened this issue Dec 12, 2022 · 1 comment · Fixed by #112
Closed

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

carloberd opened this issue Dec 12, 2022 · 1 comment · Fixed by #112

Comments

@carloberd
Copy link

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
Copy link
Contributor

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

@vatsaltanna vatsaltanna linked a pull request Jan 18, 2023 that will close this issue
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

3 participants