Flutter - How can I design List Tile & List View

Question

This is the result that I want.

This is the current output that I have.

How can I achieve this result specifically the lines that are present in between the list tiles? I am using a ListView to show the rules. Below is the code for the ListTile that I am using.

Widget ruleTile(String title) {
    return ListTile(
      contentPadding: EdgeInsets.zero,
      leading: Image.asset(
        "assets/images/sun.png",
        width: 40.w,
      ),
      title: Text(
        title,
        style: MyTextStyle.littlesmaller,
      ),
    );
  }

i think you can create it with timeline package. – pmatatias Jan 16 '23 at 06:06 — pmatatias, Jan 16 '23 at 06:06

score 0 · Answer 1 · answered Jan 16 '23 at 06:08

You can use Stack and dotted_line package combo to create something like that:

         Stack(children: [
            DottedLine(
              direction: Axis.vertical,
              lineLength: linelength,
              lineThickness: 1.0,
            )
            // You ListTile Code
          ],)

score 0 · Answer 2 · answered Jan 16 '23 at 06:27

Thanks to @pmatatias comment, I figured it out. This is the updated code I used to get the desired output.

Widget ruleTile(String title, num index) {
    Widget connector = const DashedLineConnector(
      color: Color(0xFFFACC15),
      gap: 3,
    );

    return TimelineTile(
      node: TimelineNode(
        indicator: Image.asset(
          "assets/images/sun.png",
          width: 40.w,
        ),
        startConnector: index == 0 ? null : connector,
        endConnector: index == rulesList.length - 1 ? null : connector,
      ),
      nodeAlign: TimelineNodeAlign.start,
      contents: ListTile(
        contentPadding: EdgeInsets.zero,
        title: Text(
          title,
          style: MyTextStyle.littlesmaller,
        ),
      ),
    );
  }

Flutter - How can I design List Tile & List View

2 Answers2