flutter carousel slider with text

Question

class my_page extends StatefulWidget {
  @override
  _my_pageState createState() => _my_pageState();
}

class _my_pageState extends State<my_page> {

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('mypage'),),
      body: CarouselSlider(
        autoPlay: true,
        items:['assets/images/0.jpg','assets/images/1.jpg',
            'assets/images/2.jpg',
          'assets/images/3.jpg',
          'assets/images/4.jpg',
          'assets/images/5.jpg'].map((i){
          return Builder(
            builder:(BuildContext context){
             return Container(

                width: MediaQuery.of(context).size.width,
               child: GestureDetector(
                child:Stack(
                  children: <Widget>[
                    Image.asset(i,fit: BoxFit.fill,),
                    Align(
                      alignment: Alignment.topCenter,
                        child: Text('foodname',style: TextStyle(fontSize: 30,color: Colors.white,fontWeight: FontWeight.bold),)
                    )
                  ],
                ),
                 onTap: (){
                   Navigator.push(
                     context,
                     MaterialPageRoute(builder: (context) => HomePage()),
                   );
                 },
               ),
              );
            }
          );
        }).toList()
      ),
    );
  }
}

this is my code. I want to add text on each image. the text food name should be changed. Is there some way to do it? It is in stack form and text needs to be on the image. for 1st image 'burger' for 2nd image 'pizza' and so on.

please help me guys

Answer 1

Create List of List:

List myList = [['image url', 'burger'], [''image', 'pizza'] , ..etc];

Now u can use them:

myList.map((i){
      return Builder(
        builder:(BuildContext context){
         return Container(
            width: MediaQuery.of(context).size.width,
           child: GestureDetector(
            child:Stack(
              children: <Widget>[
                Image.asset(i[0],fit: BoxFit.fill,),
                Align(
                  alignment: Alignment.topCenter,
                    child: Text(i[1],style: TextStyle(fontSize: 30,color: Colors.white,fontWeight: FontWeight.bold),)
                )
              ],
            ),
             onTap: (){
               Navigator.push(
                 context,
                 MaterialPageRoute(builder: (context) => HomePage()),
               );
             },
           ),
          );
        }

Answer 2

create a model list and assign values for image and text from the model list

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: 
          my_page(),

      ),
    );
  }
}
class MyPageItem{
  String itemName;
  String path;
  MyPageItem(this.itemName,this.path);
}
class my_page extends StatefulWidget {
  @override
  _my_pageState createState() => _my_pageState();
}

class _my_pageState extends State<my_page> {
  List<MyPageItem> items=[
    MyPageItem("item 1",'assets/images/1.jpg'),
    MyPageItem("item 2",'assets/images/2.jpg'),
    MyPageItem("item 3",'assets/images/3.jpg'),
    MyPageItem("item 4",'assets/images/4.jpg'),
    MyPageItem("item 5",'assets/images/5.jpg'),


  ];

 @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('mypage'),),
      body: CarouselSlider(
        autoPlay: true,
        items:items.map((i){
          return Builder(
            builder:(BuildContext context){
             return Container(

                width: MediaQuery.of(context).size.width,
               child: GestureDetector(
                child:Stack(
                  children: <Widget>[
                    Image.asset(i.path,fit: BoxFit.fill,),
                    Align(
                      alignment: Alignment.topCenter,
                        child: Text(i.itemName,style: TextStyle(fontSize: 30,color: Colors.white,fontWeight: FontWeight.bold),)
                    )
                  ],
                ),
                 onTap: (){
                   Navigator.push(
                     context,
                     MaterialPageRoute(builder: (context) => HomePage()),
                   );
                 },
               ),
              );
            }
          );
        }).toList()
      ),
    );
  }
}