Flutter How do I iterate over each item in a ListView?

Question

I'm new to flutter and have created a simple app to display some custom List Tiles. In each tile, it's possible to increase or decrease the count by the + and - buttons.

But I want to get these data into a map, on the click of the button "Order". For example, my map would be like {'shoes': 1, 'books': 2, 'water': 3} etc.

I've tried Provider, StreamBuilder, BLoC etc. But since I'm a beginner, I couldn't get a real use of any of those.

Could any of you please tell me how to get this data into a map.

Thanks for reading.

Answer 1

You can define a Map like this:

List<String> products = ['shoes', 'books', 'water'];
Map<String,int> map = Map.fromIterables(products , 0);

When user press - or + buttons in each tile, update your equvalent <key, value> in your map. For example in onTap event of shoes 's + button you have

map.update('shoes', (v)=> v+1);

Then you can use updated map in onTap of Order button.

For more info about Map in dart visit this link.

Answer 2

With "bloc", you need to build your events, states in the Bloc would be something like that:

The event will be where the Bloc is triggered.

part of 'something_bloc.dart';

@immutable
abstract class SomethingEvent{}

class ListOfSomething extends SomethingEvent{}

class SomethingElse extends SomethingEvent{
  final String input;
  SomethingElse({this.input});

  List<Object> get props => [input];
}

The state is where the result of what was triggered in the event will be manifested, whether successful or unsuccessful:

part of 'Something_bloc.dart';

@immutable
abstract class SomethingState{}

class SomethingInitial extends SomethingState{}

class SomethingLoading extends SomethingState{}

class SomethingSuccess extends SomethingState{
  final String success;
  SomethingSuccess({this.success});
}

The "bloc" is where to manage these events and states:

part 'something_event.dart';
part 'something_state.dart';

class SomethingBloc extends Bloc<SomethingEvent,SomethingState>{
 final ServiceFacade service;
  SomethingBloc({this.service});

  @override
  SomethingState get initialState => SomethingInitial();

  @override
  Stream<SomethingState> mapEventToState(SomethingEvent event) async* {
    if(event is SomethingEvent){
      final failureOrSuccess = await service.call(event.cardId);
      yield failureOrSuccess.fold(
              (failure) => (failure is GeneralFailure)
                  ? SomethingErrorState(error: failure.message)
                  : null,
              (list) => SomethingState(success: list)
      );
    }
   
  }

}

The screen will look something like this, you can trigger the event in an OnPressed , or initialize it in the initState() :

    BlocConsumer<SomethingBloc, SomethingState>(
                    listener: (context, state) {
                      if (state is SomethingLoadingState) {
                       
                      } else if (state is SomethingErrorState) {
                        
                      } else if (state is SomethingSuccess) {
                        
                      }
                    },
                    builder: (context, state) {
                      if (state is SomethingSuccess) {
                        return Padding(
                          padding: paddingHorizontal,
                            child: Column(
                              children: <Widget>[
                                for (var item in state.list)
                                 Container(

                                 child: Text('${item}')
                                   )
                       ]
                            ),
                        );
                      } else {
                        return Container();
                      }
                    },
                  ),

I hope I've helped in general terms.