How to put background images in the same listtitle in this Flutter image

Question

return Card(
      margin: EdgeInsets.all(5.0),
      elevation: 2,
      child: Container(
        child: ListTile(
          leading: task.situacao == true
              ? Icon(
                  Icons.thumb_up,
                  color: Colors.green,
                  size: 30,
                )
              : Icon(
                  Icons.thumb_down,
                  color: Colors.red,
                  size: 30,
                ),
          title: Text(
            task.nome.toUpperCase(),
            style: TextStyle(fontSize: 15),
          ),
          trailing: Text(
            task.pontos.toString(),
            style: TextStyle(
              fontSize: 35,
              color: Colors.teal,
            ),
          ),
          subtitle: Text(
            "01" +
                '   ' +
                "02"  +
                '   ' +
                "03"  +
                '   ' +
                "04"  +
                '   ' +
                "05"  +
                '          ' +
                "06"  +
                '   ' +
                "07"  +
                '   ' +
                "08"  +
                '   ' +
                "09" +
                '   ' +
                "10",
            style: TextStyle(
              fontSize: 20,
            ),
          ),
        ),
      ),
    );
  }

Answer 1

I advise you to create a custom Widget to do such an operation, I will give an example using an image of the internet and you make the necessary adaptations to what you need.

Create the following custom widget:

class BallNumber extends StatelessWidget {
  
  BallNumber(this.text);
  
  final String text;
  
    @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      margin: EdgeInsets.all(5),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTIToUO9YMmuFoc2peIAK5mzk8xUz7K4IkY3A&usqp=CAU")
        )
      ),
      child: Center(
        child: Text(text)
      )
    );
  }
  
}

This way your code gets cleaner. As you can see, the Widget has a property called text which is where you will enter the number the ball should receive.

To use the custom Widget that was created, you can do it as follows:

class _MyHomePageState extends State<MyHomePage> {

  final minhaLista = {
    "primeiroJogo": [
      "10",
      "23",
      "34",
      "47",
      "59",
    ],
    "segundoJogo": [
      "02",
      "32",
      "45",
      "60",
      "16",
    ],
  };
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: minhaLista.entries.map((item) => 
          ListTile(
            title: Text(item.key),
            subtitle: Container(
              height: 100,
              width: 100,
              child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: item.value.length,
              itemBuilder: (_, index) {
                return BallNumber(item.value[index]);
               }
              ),
            )
          )
        ).toList()
      )
    );
  }
}

Explaining

The custom widget we created, the BallNumber, will return us a Container who owned a Text to display the ball number and in the background set the image that will give the circle effect. As you can see, I used the property shape: BoxShape.circle that leaves the Container with a circle effect, which you can take advantage of and just change your color, so you don’t need to use an image that takes further processing to be displayed.

Complete code:

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) => MaterialApp(
    home: MyHomePage(),
  );
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  final minhaLista = {
    "primeiroJogo": [
      "10",
      "23",
      "34",
      "47",
      "59",
    ],
    "segundoJogo": [
      "02",
      "32",
      "45",
      "60",
      "16",
    ],
  };
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: ListView(
        children: minhaLista.entries.map((item) => 
          ListTile(
            title: Text(item.key),
            subtitle: Container(
              height: 100,
              width: 100,
              child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: item.value.length,
              itemBuilder: (_, index) {
                return BallNumber(item.value[index]);
               }
              ),
            )
          )
        ).toList()
      )
    );
  }
}

class BallNumber extends StatelessWidget {
  
  BallNumber(this.text);
  
  final String text;
  
    @override
  Widget build(BuildContext context) {
    return Container(
      height: 100,
      width: 100,
      margin: EdgeInsets.all(5),
      decoration: BoxDecoration(
        shape: BoxShape.circle,
        image: DecorationImage(
          image: NetworkImage("https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcTIToUO9YMmuFoc2peIAK5mzk8xUz7K4IkY3A&usqp=CAU")
        )
      ),
      child: Center(
        child: Text(text)
      )
    );
  }
  
}

Note: You can run the code here on Dartpad to test, just copy and paste.