Question 75026 in Flutter Question posted in
The official Flutter documentation can be found here.

How to make the images in list each take you to a different page when you tap on them in flutter?

So i have a list with images and i added the images with ${index+1} and added ontap but every image i tap on sends me to the same page and i want every image to send me to it’s own page that im gonna make for each one.

body: SafeArea(
        child: Padding(
          padding: EdgeInsets.symmetric(vertical: 30),
          child: Column(children: [
            Row(
              children: [
                Expanded(child: Container(
                  height: 200,
                  child: Center(
                    child: ListView.builder(
                        itemCount: 8,
                        scrollDirection: Axis.horizontal,
                        shrinkWrap: true,
                        itemBuilder: (BuildContext context, int index){
                          return GestureDetector(
                       onTap:(){
                         Navigator.push(context, MaterialPageRoute(
                           builder: (context)=>PostScreen(),
                         ));

                       },

                       child: Center(
                         child: Container(
                           width: 160,
                           padding: EdgeInsets.all(20),
                           margin: EdgeInsets.only(left: 15),
                           decoration: BoxDecoration(
                             color: Colors.black,
                             borderRadius: BorderRadius.circular(15),
                             image: DecorationImage(
                               //city1.jpg
                               image: AssetImage("images/city${index+1}.jpg"),
                               fit: BoxFit.cover,
                               opacity: 0.7,
                             ),
                           ),
                           child: Column(
                             children: [
                               Container(
                                 alignment: Alignment.topRight,
                                 child: Icon(
                                   Icons.bookmark_border_outlined,
                                   color: Colors.white,
                                   size: 30,
                                 ),
                               ),
                               Spacer(),
                               Container(
                                   alignment: Alignment.bottomLeft,
                                   child: Text(
                                       "city Name",
                                       style: TextStyle(
                                         color: Colors.white,
                                         fontSize: 15,
                                         fontWeight: FontWeight.w600,
                                       )
                                   )
                               ),
                             ],
                           ),
                         ),
                       ),
                     );
                        } ),
                  ),),
                ),
              ],

I tried to put the images separately without the index and it just broke the app

Tags:

2

Answers


  1. 0

    Right now you’ve the following code :

      Navigator.push(context, MaterialPageRoute(
                           builder: (context)=>PostScreen(),
  ));

    So when any image is clicked, it will redirect to PostScreen.

    Now, if you want to make it redirect to screens as per image selection, you can use the index here.

    I will show it using pushNamed() method.

    You should make a list of screen names, each one per image and use the same index as image to navigate to that screen inside your GestureDetector.

    For example, create a list as follows inside your widget :

    List screens = [‘image_1_screen’, ‘image_2_screen’, ‘image_3_screen’];

    Now, use it like :

    return GestureDetector(
        onTap:(){
                Navigator.pushNamed(context, screens[index]);
        }
);

    So, it will redirect to relevant screen as per the image selected.

    In short, make a list of the screens and use the same index as an image to navigate to that particular screen.

    Login or Signup to reply.
  2. 0

    First of all, create a list of your image files. before your build

    final List imagesPath = ["images/1.png","images/2.png", "images/3.png"];

    Now, make these changes in listView.builder:

    itemCount: 8 to itemCount: imagesPath.length
AssetImage("images/city${index+1}.jpg") to AssetImage(imagesPath[index])

    Then In your PostScreen class you need to create a final String variable name assetPath and make it as required in its contructor. and in your PostScreen build return Image.asset(path). The code should look like this.

    import 'package:flutter/material.dart';

class PostScreen extends StatelessWidget {

  final String assetPath;

  const PostScreen({Key? key, required this.assetPath}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: SizedBox(
          child: Image.asset(assetPath),
        ),
      ),
    );
  }
}

    now, inside gesture detector you need to pass "assetPath":

    onTap: () {
            Navigator.push(
                        context,
                        MaterialPageRoute(
                          builder: (context) =>
                              const PostScreen(assetPath: imagesPath[index]),
                        ));
           },

    So, lets just say. you click on the 3rd image its index will be 2. then it will pass the path of 2nd image from the list to your PostScreen().

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search