The page displays the US states as a list. And when you click on the ListTile, a checkmark appears next to the state. The user can only select one state. How to track the state on which the click was made and transfer it to another screen? Send on button click "Save".

List < UsaStatesModel > _statesList = [];
late final _checkedValue =
  List < bool > .generate(_statesList.length, (index) => false);

@override
Widget bodyWidget(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: 'States'
      actions: GestureDetector(
        onTap: () {},
        child: Icon(
          Icons.save,
          size: 26.0,
        ),
      ),
    ),
    body: BlocConsumer < BlocA, BlocAState > (
      listener: (context, state) {
        if (state is StatesLoadedState) {
          _statesList = state.states;
        }
      },
      builder: (context, state) {
        if (state is StatesLoadedState) {
          return Padding(
            padding: const EdgeInsets.only(top: 142),
              child: ListView.separated(
                itemCount: _statesList.length,
                itemBuilder: (context, index) {
                  return ListTile(
                    trailing: !_checkedValue[index] ?
                    const SizedBox.shrink(): Image.asset(
                        Assets.assetsCheckmark,
                        width: 13,
                        height: 10,
                      ),
                      title: Text(
                        _statesList[index].name,
                      ),
                      onTap: () => _checkState(index),
                  );
                },
                separatorBuilder: (context, index) {
                  return const Divider();
                },
              ),
          ),
        ),
      );
    }
  }
)
}

void _checkState(int index) {
  setState(
    () {
      for (var i = 0; i < _checkedValue.length; i  ) {
        _checkedValue[i] = false;
      }
      _checkedValue[index] = true;
    },
  );
}
}

CodePudding user response：

Create a variable like this on top

int currentIndex = 0;

Whenever a list is selected update this index

void _checkState(int index) {
  setState(
    () {
      for (var i = 0; i < _checkedValue.length; i  ) {
        _checkedValue[i] = false;
      }
      _checkedValue[index] = true;
     currentIndex = index; //update here
    },
  );
}

Now

_stateList[currentIndex]

Will give you the currently selected state

CodePudding user response：

You can not pass Listtile and it will occupied memory so i think you have to pass only data from one to another screen using parameter to another screen like this.

import 'package:flutter/src/foundation/key.dart';
import 'package:flutter/src/widgets/framework.dart';

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

  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
body: Container(
  child: ElevatedButton(onPressed: () {  

    Navigator.of(context).push(MaterialPageRoute(builder: (context){
      return secondscreen(data:"hello");
    }));
  },
  child: Text("hwllo"),),
),
    );
  }
}

class secondscreen extends StatefulWidget {

  String data;
   secondscreen({Key? key,required this.data}) : super(key: key);

  @override
  State<secondscreen> createState() => _secondscreenState();
}

class _secondscreenState extends State<secondscreen> {
  @override
  Widget build(BuildContext context) {
    return Text('${widget.data}');
  }
}```

CodePudding user response：

We can have selectedIndex property in this screen on top and assign value to it inside _checkState method. And in our second screen (Screen to which we have to pass the selected state), we need to create a UsaStatesModel variable and assign value to it on navigation.

 int? selectedIndex;


void _checkState(int index) {
  selectedIndex = index; // Assigning selected index value
  setState(
    () {
      for (var i = 0; i < _checkedValue.length; i  ) {
        _checkedValue[i] = false;
      }
      _checkedValue[index] = true;
    },
  );
}

// Call this method on save to pass selected state to another screen
    goToAnotherScreen(BuildContext context) {
      if (selectedIndex != null) {
        final selectedState = _statesList[selectedIndex!];
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => SecondScreen(selectedState: selectedState),
          ),
        );
      }
    }

Second screen

class SecondScreen extends StatelessWidget {
      const SecondScreen({
        Key? key,
        required this.selectedState,
      }) : super(key: key);
    
      UsaStatesModel selectedState;
    
      @override
      Widget build(BuildContext context) {
        return Container();
      }
    }