CODEWITHSUNDEEP
flutterflutter-layout
Badai Ardiat
Badai Ardiat

Reputation: 757

How create List button like this Image in flutter

I am confused about using the widget that is most appropriate for this display enter image description here

Upvotes: 1

Views: 550

Answers (2)

key
key

Reputation: 1402

You can use a ListView widget this is best for this. like so

Scaffold(
        appBar: AppBar(title: Text('Something'),),
        body: ListView(
          children: <Widget>[
            buildListTile(Icons.phone, 'Telepon', "Kode verfikasi akan dikirim melalui telepon", Icons.arrow_forward_ios),
Divider(), // <-- this is added
            buildListTile(Icons.chat_bubble, 'SMS', "Lorem ipsum dolor sit amet, consectetur", Icons.arrow_forward_ios),
Divider(), // <-- this is added
          ],
        ),
      )
    );
  }

  ListTile buildListTile(leadingIcon, titleText, subtitleText, trailingIcon) {
    return ListTile(
            leading: Icon(leadingIcon),
            title: Text(titleText),
            subtitle: Text(subtitleText),
            trailing: Icon(trailingIcon),
          );
  }

Upvotes: 1

Andrii Turkovskyi
Andrii Turkovskyi

Reputation: 29468

You can use ListTile for each element and Divider between them

ListView.builder(
  itemBuilder: (context, i) {
    if (i.isOdd)
      return Divider();
    final index = i ~/ 2;
    return buildRow(index);
  },
  itemCount: [your_items].length * 2,
  controller: controller,
);

Widget buildRow(int index) {
  return ListTile(
    leading: /* your icon */,
    title: /* title */,
    subtitle: /* subtitle */,
    trailing: /* right arrow */,
  )
}

Upvotes: 4

Related Questions