Flutter Images in a List (Flutter)

Question

so I want to have a List/Array that contains images and where each image has his own title. The image and the title should be shown in two different buttons and the title should change when I tap on the image. I already could solve the first two points (to show in different places and that the title changes) But I don't know how to add images to my List, could you help me? In addition to that, the List should be randomized, but the title should always "stay" with his image. I hope you understand what I want and thank you for your help.

class Sachen {

  String title;
  String image;

  Sachen(this.title, this.image);
}

---

final List<Sachen> infoBank = [
    Sachen("Chips", "images/snack1.png",),
    Sachen("Erdnussflips", "images/snack2.png",),

  ];

  int bankNumber = Random().nextInt(2) +1;

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Column(
        children: [
          Card(
            margin: EdgeInsets.fromLTRB(50, 35, 50, 0),
            elevation: 8,
            color: Color(0xFF4caf50),
            child: SizedBox(
              height: 80,
              width: 150,
              child: Center(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 18),
                  child: GestureDetector(
                    onTap: () {
                      Navigator.of(context).push(
                        MaterialPageRoute(
                          builder: (context) => Rezept('Rezept'),
                        ),
                      );
                    },
                    child: SizedBox(
                      height: 125,
                      width: 150,
                      child: Center(
                        child: Padding(
                          padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 18),
                          child: Text(
                            infoBank[bankNumber].title,
                            style: GoogleFonts.rubik(
                              fontSize: 20,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ),
              ),
            ),
          ),
          Row(
            children: [
              Expanded(
                child: TextButton(
                  onPressed: () {
                    setState(() {
                      bankNumber++;
                    });
                    changeDiceNumber();
                    print('LeftDiceNumber = $DiceNumber');
                  },
                  child: Container(
                    margin: EdgeInsets.fromLTRB(10, 20, 10, 20),
                    decoration: BoxDecoration(
                      border: Border.all(
                        width: 2,
                        color: Colors.grey.shade700,
                      ),
                    ),
                    height: 350,
                    width: 350,
                    child: Image.asset('images/snack$DiceNumber.png',
                      fit: BoxFit.cover,
                    ),
                  ),
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Answer 1

have you tried using Flutter's ListViewBuilder ?

Answer 2

Like alread said ListView().builder will be a good usage. Instead of building the widget you can just use ListTile or Card there you already have trailing, leading, and title for the positioning of your images. Althou i would change the class Sachen with a final Icon or IconData to directly add it to your List. In The Constructor please use required for the parameters its for better reading and don't do mistakes

This is my first idea to use this

class Sachen {
  final String title;
  final String image;

  Sachen({
    required this.title,
    required this.image,
  });
}



 final List<Sachen> liste = [
    Sachen(title: "title", image: "name"),
    Sachen(title: "title1", image: "name1"),
  ];
     return ListView.builder(itemBuilder: (context, index) {
          return ListTile(
            leading: Image.asset(liste[index].image),
            title: Text(liste[index].title),
            onTap: (){
              //Do On Tap
              //remember to use SetState when you want to rebuild some changes
            },
          );
        });

Other Idea maybe a little bit better:

class Sachen {
  final String title;
  final Image image;

  Sachen({
    required this.title,
    required this.image,
  });
}

final List<Sachen> liste = [
    Sachen(title: "title", image: Image.asset("name")),
    Sachen(title: "title1", image: Image.asset("name1")),
  ];

  @override
  Widget build(BuildContext context) {
    return ListView.builder(itemBuilder: (context, index) {
      return ListTile(
        leading: liste[index].image,
        title: Text(liste[index].title),
        onTap: () {
          //Do On Tap
          //remember to use SetState when you want to rebuild some changes
        },
      );
    });
  }