android – Calling image and descriptions with using flutter


my problem is this, I want to call images and descriptions but I have more than 200 images and I don’t know how to do it. I already call images but how can I add the description of these images and how can I call descriptions? I know these codes are very long but I still want to show it because for you to understand better.

Summary: I want to call different description for each picture.

This HomePage at a cross section

slide('World of Classics', [
                'peter pan in kensington gardens.jpg',
                'peter pan.jpg',
                'odysey.jpg',
                'sherlock holmes.jpg',
                'the idiot.jpg',
                'anna karenina.jpg',
                'Around the World in 80 Days.jpg',
                'art of war.jpg',
                'robinson crouse.jpg',
                'Gullivers travel.jpg',
              ]),
              slide('Full of Love Novels', [
                'aski memnu.jpg',
                'ruh adam.jpg',
                'mor salkimli ev.jpg',
                'ask batagi.jpg',
                'aydakı kadın.jpg',
                'emma.jpg',
                'kurk mantolu madonna.jpg',
                'Love and Mr Lewisham.jpg',
                'madame bovary.jpg',
                'simdi sevisme vakti.jpg',
                // orther images
              ]),
            ],
          ),
        ),
      ),
    );
  }

  Widget slide(String info, List<String> imageList) {
    return Container(
      margin: EdgeInsets.fromLTRB(
        screenWidth * 0.05,
        screenHeight * 0.02,
        screenWidth * 0.05,
        0.0,
      ),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            info,
            style: TextStyle(
              color: Colors.white,
              fontSize: screenWidth * 0.04,
              fontWeight: FontWeight.bold,
            ),
          ),
          SizedBox(height: 8.0),
          Container(
            height: screenHeight * 0.2,
            child: ListView.builder(
              scrollDirection: Axis.horizontal,
              itemCount: imageList.length,
              itemBuilder: (context, index) {
                return GestureDetector(
                  onTap: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (context) =>
                            DetailsPage(imageName: imageList[index]),
                      ),
                    );
                  },
                  child: Container(
                    width: screenWidth * 0.20, // box lenght
                    height: screenHeight * 0.1,
                    margin: EdgeInsets.symmetric(horizontal: 5.0),
                    decoration: BoxDecoration(
                      color: Colors.white,
                      borderRadius: BorderRadius.circular(12.0),
                      image: DecorationImage(
                        image: AssetImage('assets/pics/${imageList[index]}'),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  }

ThisDetailsPage at a cross section

class DetailsPage extends StatefulWidget {
  final String imageName;

  const DetailsPage({
    Key? key,
    required this.imageName,
  }) : super(key: key);

  @override
  State<DetailsPage> createState() => _DetailsPageState();
}

class _DetailsPageState extends State<DetailsPage> {
  late double screenWidth;
  late double screenHeight;
  @override
  Widget build(BuildContext context) {
    screenWidth = MediaQuery.of(context).size.width;
    screenHeight = MediaQuery.of(context).size.height;
    return Scaffold(
      body: SingleChildScrollView(
        child: Container(
          decoration: BoxDecoration(
            gradient: LinearGradient(
              begin: Alignment.topCenter,
              end: Alignment.bottomCenter,
              colors: [
                Color.fromRGBO(0, 0, 0, 1.0),
                Color.fromRGBO(69, 60, 60, 1.0),
              ],
            ),
          ),
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                margin: EdgeInsets.only(
                    top: screenHeight * 0.04,
                    left: screenWidth * 0.05,
                    right: screenWidth * 0.03),
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [
                    IconButton(
                      icon: Icon(Icons.arrow_back),
                      color: Colors.white,
                      iconSize: screenWidth * 0.06,
                      onPressed: () {
                        Navigator.push(
                            context,
                            MaterialPageRoute(
                                builder: (context) => HomePage()));
                      },
                    )
                  ],
                ),
              ),
              Container(
                height: screenHeight * 0.5,
                color: Colors.white,
                child: Align(
                  alignment: Alignment.center,
                  child: SizedBox(
                    width: screenWidth, // Image size settings
                    child: Image.asset(
                      'assets/pics/${widget.imageName}', // here is images
                      fit: BoxFit.fill,
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.only(left: 10.0),
                child: Text(
                  'data', // here is descriptions
                  style: TextStyle(
                      fontSize: screenWidth * 0.1 / 3, color: Colors.grey),
                ),
              ),

I want to make the image descriptions pop up with Flutter but I can’t do it, I tried map and list but it didn’t work.

Latest articles

spot_imgspot_img

Related articles

Leave a reply

Please enter your comment!
Please enter your name here

spot_imgspot_img