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 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()
      ),
    );
  }
}

Answer 2

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()),
               );
             },
           ),
          );
        }