How do I assign an index to list of buttons in the listview?

Viewed 98
Widget inEngTaskBody(BuildContext context) {

return ListView(
scrollDirection: Axis.vertical,
children: <Widget>[

  Center(
    child: Text(
      'General Condition',
      style: TextStyle(
        decoration: TextDecoration.underline,
        fontSize: 25,
      ),
    ), //Text
  ), // Center

  OutlinedButton(
    child: Text(inEngTaskList().genCond[0]),
    onPressed: () {},
  ), //GCbutton1
  SizedBox(height: 10),

  OutlinedButton(
    child: Text(inEngTaskList().genCond[1]),
    onPressed: () {},
  ), //GCbutton2
  SizedBox(height: 10),

  OutlinedButton(
    child: Text(inEngTaskList().genCond[2]),
    onPressed: () {},
  ), //GCbutton3
  SizedBox(height: 10),

How do I assign each button an index? Was thinking of using the scrolltoindex() function. I have seen many examples using listview.builder, however, I am making a customized list view. I do not intend to use builder as each button will have a specific task upon onpressed(). Many of the examples are of non-button listview.

Appreciate the help thank you.

This code is to be assigned to the

body: inEngTask(context)

in my main.dart.

Using Bernard Hur's suggestion: Using Bernard Hur's suggestion

What I am trying to achieve. enter image description here

EDIT The texts in each button is stored in a list. If I could index each button, I can create a search bar to compare with the list and scroll to the index of the button. However, I do require some texts as header to some of the buttons, hence the looping listview.builder is a challenge.

3 Answers

you can use ListView.builder instead of ListView(children:...) version as follow:

ListView.builder(
  padding: const EdgeInsets.all(8),
  itemCount: NumberOfButtons, // for example 3
  itemBuilder: (BuildContext context, int index) {
    return Column(
      children:[
         Text("your header"),
         // you can add other widgets as well
         OutlinedButton(
            child: Text(inEngTaskList().genCond[index]),
            onPressed: ()=>mainFunction(index),
         ), 
      ]
    );
  }
);

see [this][1] for more examples. Also, about the main function you have two options:

  1. having a list of functions like functionList and use them based on an index of the item in list view as onClick:functionList[index].
  2. or use a mainFunction that decides the operation based on given index like the above example. You can handle different events based on this function:
void mainFunction(int index){
   if(index==0){//do sth}
   else if(index==1){//do sth else}
   // and so on...
}


  [1]: https://api.flutter.dev/flutter/widgets/ListView-class.html

I'm not sure you wanted auto-scroll listview or a just listview built by index. The below is the listview made by index.

ListView.builder(
  itemCount: inEngTaskList().length,
  itemBuilder: (context, index) {
  final String text = inEngTaskList().genCond[index] as String;

  return Column(
    children: [
      const Center(
      child: Text(
        'General Condition',
        style: TextStyle(
        decoration: TextDecoration.underline,
        fontSize: 25,
        ),
       ), //Text
      ), // Center

      OutlinedButton(
        child: Text(text),
        onPressed: () {},
      ),
      const SizedBox(height: 10),

      ],
    );
   },
  );

try this using index based Condition ..!!

 ListView.builder(
            itemCount: 8,
            itemBuilder: (context, index) {
              if (index == 0) {
                return Container(
                  child: Text('Text$index'),
                );
              }
              if (index == 1) {
                return Container(
                  child: Text('Text$index'),
                );
              }
              if (index == 2) {
                return Container(
                  child: Text('Text$index'),
                );
              }
              if (index == 3) {
                return Container(
                  child: Text('Text$index'),
                );
              }
              if (index == 4) {
                return Container(
                  child: Text('Text$index'),
                );
              }
              if (index == 5) {
                return Container(
                  child: Text('Text$index'),
                );
              }
              if (index == 6) {
                return Container(
                  child: Text('Text$index'),
                );
              }
              if (index == 7) {
                return Container(
                  child: Text('Text$index'),
                );
              } else {
                return Container(
                  child: Text('Text'),
                );
              }
            },
          ),
Related