How to add new cards to gridview on tap of button flutter

Question

I am trying to code something for my flutter app.

I have an empty gridview (5x6 configuration) on center top and 5 colored buttons (color containers) at the bottom (each with a different color), and a remove all button on the bottom right).

When I tap one of the 5 buttons, a container (or card) appears on the left in the gridview, having the same color of the button. When I press another button, another container appears, and so on (untill 30 containers appear - limit). I can make any mix of containers. When I then press the remove all button, all containers in the grid view are removed.

I also have to use flutter riverpod for statemanagement and divide custom widgets in different files. Can anyone tell me or code this for me? I’m a bit stuck atm.

Thank you in advance! 🙏

Answer 1

I've created a flutter app that demonstrates a grid painter that you might be looking for (Gif) In order to do this I have used the Bloc pattern using (flutter_bloc) library.

It helps to start by defining the initial state of the app which is a list of 30 transparent tiles(5x6)

part of 'painter_bloc.dart';

@immutable
abstract class PainterState extends Equatable {
  final List<Tile> tiles;

  const PainterState(this.tiles);

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

class PainterInitial extends PainterState {
  PainterInitial() : super(List.generate(30, (index) => Tile.empty(index)));
}

Each Tile(defined model class) holds two properties

class Tile {
  final int index;
  final Color color;
  Tile({
    required this.index,
    required this.color,
  });

  factory Tile.empty(int index) =>
      Tile(index: index, color: Colors.transparent);

There is one event that is dispatched from the UI to the PainterBloc i.e. ColorTapped (An event that is trigged when one of the colored cards is tapped)

This event holds two pieces of information(card color, currentTileIndex)

part of 'painter_bloc.dart';

@immutable
abstract class PainterEvent {}

class ColorTapped extends PainterEvent {
  final Color color;
  final int currentTileIndex;

  ColorTapped(this.color, this.currentTileIndex);

}

One the PainterBloc receives the ColorTapped event. It emits a PainterMarked state with a modified list of Tiles

class PainterBloc extends Bloc<PainterEvent, PainterState> {
  PainterBloc() : super(PainterInitial()) {
    on<ColorTapped>(_onColorTapped);
  }

  void _onColorTapped(ColorTapped event, emit) {
    List<Tile> markedTiles = <Tile>[...state.tiles];

    markedTiles[event.currentTileIndex] = state.tiles
        .where((element) => element.index == event.currentTileIndex)
        .first
        .copyWith(color: event.color);
    emit(PainterMarked(markedTiles));
  }

This new state is used to rebuild the UI thereby coloring the tiles.

I have also used a CounterBloc to help keep track of the pointer/index of the grid tiles to color.

You can find the complete code here