How to make this design in flutter , shape of listview-CodePudding

this exampleI have some data from api ، and i ŵant to fetch data like this design , how to make it and how to custom list view to view this shape i got try this but the shape of listview is fixed

CodePudding user response：

You might want to base your Row() alignment on the parity of the index of said Row().

One way to implement this is by using the ListView.builder() widget:

ListView.builder(
          itemCount: _yourItemCount,
          shrinkWrap: true,
          itemBuilder: (context, index) {
            List<Widget> children = [
              yourWidget()
            ];

            if (index % 2 != 0 && index != 0) {  
             // Checking the parity of the index
              children.add(yourWidget());
            }

            return Padding(
                padding: const EdgeInsets.all(8.0),
                child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    crossAxisAlignment: CrossAxisAlignment.center,
                    children: children));
          }),

You can read more about it here.

As to how to make the level widget design, you could use image assets, combined with a CustomPaint() widget (for the outside circle).