how build query parameters in cubit and update ui of both changed filter and resultlist

Question

i want create an app with flutter and cubit to get filterd ticketlist from dio with queryparametres and show them and im beginner my app at top has a search field and bottom of it has 3 togglable(assignedtome_unassigned_new) textbuttons and also it should have 2 dropdown for list of string filter for company name and assigned ticket api request is like this: test.com/ticket?assignedtome=true&company[0]=company1&company[1]=company2 this is my written code that i dont know in right way or completely wrong filter_status.dart

import 'package:equatable/equatable.dart';

abstract class FilterStatus extends Equatable {
  const FilterStatus();

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

class FilterInitial extends FilterStatus {}

class FilterChanged extends FilterStatus {
  final bool? assignedToMe;
  final bool? unassigned;
  final bool? newTicket;
  final List<String>? status;
  final List<String>? company;
  final List<String>? assignee;

  FilterChanged({
    this.assignedToMe,
    this.unassigned,
    this.newTicket,
    this.status,
    this.company,
    this.assignee,
  });

  @override
  FilterChanged copyWith({
    bool? assignedToMe,
    bool? unassigned,
    bool? newTicket,
    List<String>? status,
    List<String>? company,
    List<String>? assignee,
  }) {
    return FilterChanged(
      assignedToMe: assignedToMe ?? this.assignedToMe,
      unassigned: unassigned ?? this.unassigned,
      newTicket: newTicket ?? this.newTicket,
      status: status ?? this.status,
      company: company ?? this.company,
      assignee: assignee ?? this.assignee,
    );
  }
}

ticket_cubit.dart

import 'package:bloc/bloc.dart';
import 'package:codes/features/ticket_list/presentation/cubit/ticket_list_state.dart';
import 'package:codes/features/ticket_list/presentation/cubit/ticket_list_status.dart';

import '../../data/repositories/ticket_list_repo.dart';
import 'filter_status.dart';

class TicketListCubit extends Cubit<TicketListState> {
  final TicketListRepository ticketRepository;

  TicketListCubit(this.ticketRepository) : super(TicketListState(ticketListStatus: TicketListInitial(), filterStatus: FilterInitial()));

  void getTicketList({String? search}) async {
    emit(state.copyWith(newTicketListStatus: TicketListLoading()));
    try {
      final ticketList = await ticketRepository.getTicketsList(queryParameters: {});
      emit(state.copyWith(newTicketListStatus: TicketListSuccess(ticketList: ticketList)));
    } catch (e) {
      emit(state.copyWith(newTicketListStatus: TicketListFailure(message: e.toString())));
    }
  }

  /// toggle(change true/false) assignedToMe filter in the filter status and emit the new state with the new filter status object
  void toggleAssignedToMeFilter() {
    FilterChanged filterStatus = state.filterStatus as FilterChanged;

    emit(state.copyWith(newFilterStatus: filterStatus.copyWith(assignedToMe: !(filterStatus.assignedToMe ?? false))));
  }
}

also my ui had multiple issue couldnt fix it

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../core/service_locator.dart';
import '../cubit/filter_status.dart';
import '../cubit/ticket_list_cubit.dart';
import '../cubit/ticket_list_state.dart';
import '../cubit/ticket_list_status.dart';
import '../widgets/ticket_list_widget.dart';

class TicketsListPage extends StatelessWidget {
  const TicketsListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider<TicketListCubit>(
        create: (context) => TicketListCubit(sl()),
        child: Builder(builder: (context) {
          BlocProvider.of<TicketListCubit>(context).getTicketList();
          return Scaffold(
            appBar: AppBar(
              title: Text('Tickets List'),
            ),
            body: Column(
              children: [
                ///blocbuilder to listen to the ticket list status changes and build the ticket list
                BlocBuilder<TicketListCubit, TicketListState>(
                  builder: (context, state) {
                    if (state.ticketListStatus is TicketListLoading) {
                      return Center(
                        child: CircularProgressIndicator(),
                      );

                      ///ticket list state is TicketListSuccess
                    } else if (state.ticketListStatus is TicketListSuccess) {
                      final ticketList = (state.ticketListStatus as TicketListSuccess).ticketList;
                      return Expanded(
                        child: Column(
                          children: [
                            ///filter status
                            Container(
                              height: 50,
                              child: Row(
                                children: [
                                  Expanded(
                                    child: Container(
                                      ///change color base on the assignedToMe filter status
                                      color: (state.filterStatus as FilterChanged).assignedToMe ?? false ? Colors.red : Colors.blue,
                                      child: TextButton(
                                        onPressed: () {
                                          BlocProvider.of<TicketListCubit>(context).toggleAssignedToMeFilter();
                                        },
                                        child: Text('Assigned to me'),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: Container(
                                      color: Colors.blue,
                                      child: TextButton(
                                        onPressed: () {},
                                        child: Text('Unassigned'),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: Container(
                                      color: Colors.blue,
                                      child: TextButton(
                                        onPressed: () {},
                                        child: Text('New Ticket'),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),

                            ///ticket list
                            Expanded(
                              child: ListView.builder(
                                itemCount: ticketList.length,
                                itemBuilder: (context, index) {
                                  return TicketListWidget(ticketListModel: ticketList[index]);
                                },
                              ),
                            ),
                          ],
                        ),
                      );

                      ///ticket list state is TicketListFailure
                    } else if (state.ticketListStatus is TicketListFailure) {
                      final message = (state.ticketListStatus as TicketListFailure).message;
                      return Center(
                        child: Text(message),
                      );
                    } else {
                      return Container();
                    }
                  },
                ),
              ],
            ),
          );
        }));
  }
}

filter_status.dart

import 'package:equatable/equatable.dart';

abstract class FilterStatus extends Equatable {
  const FilterStatus();

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

class FilterInitial extends FilterStatus {}

class FilterChanged extends FilterStatus {
  final bool? assignedToMe;
  final bool? unassigned;
  final bool? newTicket;
  final List<String>? status;
  final List<String>? company;
  final List<String>? assignee;

  FilterChanged({
    this.assignedToMe,
    this.unassigned,
    this.newTicket,
    this.status,
    this.company,
    this.assignee,
  });

  @override
  FilterChanged copyWith({
    bool? assignedToMe,
    bool? unassigned,
    bool? newTicket,
    List<String>? status,
    List<String>? company,
    List<String>? assignee,
  }) {
    return FilterChanged(
      assignedToMe: assignedToMe ?? this.assignedToMe,
      unassigned: unassigned ?? this.unassigned,
      newTicket: newTicket ?? this.newTicket,
      status: status ?? this.status,
      company: company ?? this.company,
      assignee: assignee ?? this.assignee,
    );
  }
}

ticket_cubit.dart

import 'package:bloc/bloc.dart';
import 'package:codes/features/ticket_list/presentation/cubit/ticket_list_state.dart';
import 'package:codes/features/ticket_list/presentation/cubit/ticket_list_status.dart';

import '../../data/repositories/ticket_list_repo.dart';
import 'filter_status.dart';

class TicketListCubit extends Cubit<TicketListState> {
  final TicketListRepository ticketRepository;

  TicketListCubit(this.ticketRepository) : super(TicketListState(ticketListStatus: TicketListInitial(), filterStatus: FilterInitial()));

  void getTicketList({String? search}) async {
    emit(state.copyWith(newTicketListStatus: TicketListLoading()));
    try {
      final ticketList = await ticketRepository.getTicketsList(queryParameters: {});
      emit(state.copyWith(newTicketListStatus: TicketListSuccess(ticketList: ticketList)));
    } catch (e) {
      emit(state.copyWith(newTicketListStatus: TicketListFailure(message: e.toString())));
    }
  }

  /// toggle(change true/false) assignedToMe filter in the filter status and emit the new state with the new filter status object
  void toggleAssignedToMeFilter() {
    FilterChanged filterStatus = state.filterStatus as FilterChanged;

    emit(state.copyWith(newFilterStatus: filterStatus.copyWith(assignedToMe: !(filterStatus.assignedToMe ?? false))));
  }
}

also my ui had multiple issue couldnt fix it

import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

import '../../../../core/service_locator.dart';
import '../cubit/filter_status.dart';
import '../cubit/ticket_list_cubit.dart';
import '../cubit/ticket_list_state.dart';
import '../cubit/ticket_list_status.dart';
import '../widgets/ticket_list_widget.dart';

class TicketsListPage extends StatelessWidget {
  const TicketsListPage({super.key});

  @override
  Widget build(BuildContext context) {
    return BlocProvider<TicketListCubit>(
        create: (context) => TicketListCubit(sl()),
        child: Builder(builder: (context) {
          BlocProvider.of<TicketListCubit>(context).getTicketList();
          return Scaffold(
            appBar: AppBar(
              title: Text('Tickets List'),
            ),
            body: Column(
              children: [
                ///blocbuilder to listen to the ticket list status changes and build the ticket list
                BlocBuilder<TicketListCubit, TicketListState>(
                  builder: (context, state) {
                    if (state.ticketListStatus is TicketListLoading) {
                      return Center(
                        child: CircularProgressIndicator(),
                      );

                      ///ticket list state is TicketListSuccess
                    } else if (state.ticketListStatus is TicketListSuccess) {
                      final ticketList = (state.ticketListStatus as TicketListSuccess).ticketList;
                      return Expanded(
                        child: Column(
                          children: [
                            ///filter status
                            Container(
                              height: 50,
                              child: Row(
                                children: [
                                  Expanded(
                                    child: Container(
                                      ///change color base on the assignedToMe filter status
                                      color: (state.filterStatus as FilterChanged).assignedToMe ?? false ? Colors.red : Colors.blue,
                                      child: TextButton(
                                        onPressed: () {
                                          BlocProvider.of<TicketListCubit>(context).toggleAssignedToMeFilter();
                                        },
                                        child: Text('Assigned to me'),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: Container(
                                      color: Colors.blue,
                                      child: TextButton(
                                        onPressed: () {},
                                        child: Text('Unassigned'),
                                      ),
                                    ),
                                  ),
                                  Expanded(
                                    child: Container(
                                      color: Colors.blue,
                                      child: TextButton(
                                        onPressed: () {},
                                        child: Text('New Ticket'),
                                      ),
                                    ),
                                  ),
                                ],
                              ),
                            ),

                            ///ticket list
                            Expanded(
                              child: ListView.builder(
                                itemCount: ticketList.length,
                                itemBuilder: (context, index) {
                                  return TicketListWidget(ticketListModel: ticketList[index]);
                                },
                              ),
                            ),
                          ],
                        ),
                      );

                      ///ticket list state is TicketListFailure
                    } else if (state.ticketListStatus is TicketListFailure) {
                      final message = (state.ticketListStatus as TicketListFailure).message;
                      return Center(
                        child: Text(message),
                      );
                    } else {
                      return Container();
                    }
                  },
                ),
              ],
            ),
          );
        }));
  }
}