Question 77704 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – How can I design List Tile & List View

This is the result that I want.

Result Wanted

This is the current output that I have.

Current Output

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,
      ),
    );
  }
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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,
        ),
      ),
    );
  }

  2. 0

    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
          ],)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search