How to mange state in flutter in dropdown items selection

Question

enter image description hereHello im new at flutter platform can anyone tell me about how to manage sate in flutter i made an app where it have three dropdown items selection . What i need is when im selected all three items its gona save and reflect to next screen.. As per image my drop down data comming from rest api and need to select them one by one and goes for next screen where the selected data is been displayed... So please guide me how to manage state in this condition.

Answer 1

If is it some kind of form in my opinion best way is create Flutter bloc dedicated to this form. https://pub.dev/packages/flutter_bloc

You can keep state directly in bloc or create repository. By calling events witch each change of selection you can redraw selected parts of form.

STATE

abstract class ParkingState extends Equatable {
  @override
  List<Object?> get props => [];
}

class ParkingIdleState extends ParkingState {}

class PlateSelectedState extends ParkingState {
  final String? selectedPlate;

  PlateSelectedState(this.selectedPlate);

  @override
  List<Object?> get props => [this.selectedPlate];
}

EVENTS

abstract class ParkingEvent extends Equatable {}

class SelectPlateEvent extends ParkingEvent {
  String plate;
  @override
  List<Object?> get props => [this.plate];

  SelectPlateEvent(this.plate);
}

BLOC

class ParkingOrderBloc extends Bloc<ParkingEvent, ParkingState> {
  String? selectedPlate = "";


  ParkingOrderBloc() : super(ParkingIdleState()) {
    on<SelectPlateEvent>(_dealWithSelectPlateEvent);
  }

  FutureOr<void> _dealWithSelectPlateEvent(SelectPlateEvent event, Emitter<ParkingState> emit) {
    this.selectedPlate = event.plate;
    emit(PlateSelectedState(this.selectedPlate));

  }
}

then in form class wrapped in blocbuilder you can call

context.read<ParkingOrderBloc>().add(SelectPlateEvent("PLATNUMBER"));

then read value:

String plate = context.read<ParkingOrderBloc>().selectedPlate;

Answer 2

If you are new to Flutter, it is advisable to use setState.

class MyStatefulWidget extends StatefulWidget {
  const MyStatefulWidget({Key? key}) : super(key: key);

  @override
  State<MyStatefulWidget> createState() => _MyStatefulWidgetState();
}

class _MyStatefulWidgetState extends State<MyStatefulWidget> {
  String dropdownValue = 'One';

  @override
  Widget build(BuildContext context) {
    return DropdownButton<String>(
      value: dropdownValue,
      icon: const Icon(Icons.arrow_downward),
      elevation: 16,
      style: const TextStyle(color: Colors.deepPurple),
      underline: Container(
        height: 2,
        color: Colors.deepPurpleAccent,
      ),
      onChanged: (String? newValue) {
        setState(() {
          dropdownValue = newValue!;
        });
      },
      items: <String>['One', 'Two', 'Free', 'Four']
          .map<DropdownMenuItem<String>>((String value) {
        return DropdownMenuItem<String>(
          value: value,
          child: Text(value),
        );
      }).toList(),
    );
  }
}

Answer 3

Concatenate the user journey steps in the sample with the user journey you have. And concatenate the technical profiles in that sample into the policy file you are currently using (eg TrustframeworkExtensions).

Now you will have sign in -> rest api call -> display dynamic drop down box page.