I have been trying to achieve a listview as shown in the image below

I am actually using Card right now and this is how it looks.

Here is the code:

 child: Card(
              child: Row(
                children: <Widget>[

                  Container(
                  margin: const EdgeInsets.only(left: 40,top: 10,right: 1,bottom: 10)                
                      
                    width: 80,
                    height: 80,
                child: CircleAvatar(
                  backgroundImage:
                  NetworkImage("https://picsum.photos/500/300"),
                  maxRadius: 15,
                  minRadius: 15,
                )

                  ),
                  Padding(
                    padding: const EdgeInsets.all(10.0),
                    //padding: EdgeInsets.symmetric(vertical: 20.0, horizontal: 35.0),
                    child: Column(
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(

                          titleList[index],
                          textAlign: TextAlign.center,
                          style: TextStyle(

                            fontSize: 19,
                            color: Colors.blueAccent,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        SizedBox(
                          height: 10,
                        ),

                      ],
                    ),
                  )
                ],
              ),
            ),

I really need some help to make it look similar to the rows on the first image

CodePudding user response：

Hopefully this helps..

Widget:

class CircularCard extends StatelessWidget {
  final VoidCallback? onPressed;
  final String? title;
  final String? image;
  const CircularCard({Key? key, this.onPressed, this.image,           this.title})
      : super(key: key);

  @override
  Widget build(BuildContext context) {
    final cardImage = Container(
      alignment: FractionalOffset.centerLeft,
      child: CircleAvatar(
        radius: 50.0,
        backgroundImage: NetworkImage(image ?? ''),
        backgroundColor: Colors.red,
      ),
    );

    final cardContent = Container(
      margin: const EdgeInsets.fromLTRB(60, 22, 10, 10),
      constraints: const BoxConstraints.expand(),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: <Widget>[
          Container(height: 4.0),
          Text(
            title ?? '',
            style: const TextStyle(
              fontSize: 19,
              color: Colors.red,
              fontWeight: FontWeight.bold,
            ),
          ),
          Container(height: 10.0),
        ],
      ),
    );

    final cardDesign = Container(
      child: cardContent,
      height: 80.0,
      margin: const EdgeInsets.only(left: 46.0, top: 12.0),
      decoration: BoxDecoration(
        color: Colors.white,
        shape: BoxShape.rectangle,
        border: Border.all(
          color: Colors.red,
          width: 3,
        ),
        borderRadius: BorderRadius.circular(8.0),
        boxShadow: const <BoxShadow>[
          BoxShadow(
            color: Colors.black12,
            blurRadius: 10.0,
            offset: Offset(0.0, 10.0),
          ),
        ],
      ),
    );

    return GestureDetector(
      onTap: () => onPressed,
      child: Container(
        margin: const EdgeInsets.symmetric(
          vertical: 2.0,
          horizontal: 8.0,
        ),
        child: Stack(
          children: <Widget>[
            cardDesign,
            cardImage,
          ],
        ),
      ),
    );
  }
}

Using widget:

child: Container(
          margin: const EdgeInsets.symmetric(
            vertical: 14.0,
            horizontal: 10.0,
          ),
          child: CircularCard(
            title: 'Business',
           image:'https://picsum.photos/500/300',
          ),

This is what the widget would look like: https://i.stack.imgur.com/wCJ22.png