title: How to navigate to another page within a stack in flutter?
body: <p><strong>I am currently trying to manage the navigation logic within the flutter stack I have created.</strong>
  <strong>I would like to add separate page navigation to each of the list items listed:</strong></p>
  
  <pre><code> List&lt;String&gt; images = [
    "assets/berries-chocolates-delicious-918327.jpg",
    "assets/adult-beauty-cosmetic-1029896.jpg",
    "assets/aerial-shot-architecture-beach-1488515.jpg",
    "assets/brush-brushes-cosmetics-212236.jpg",
  ];
  
  List&lt;String&gt; title = [
    "Cadbury",
    "Biotherme",
    "Trip Advisor",
    "L'Oreal Paris",
  ];
  </code></pre>
  
  <p><strong>> This is the associated stack logic code in another file:</strong></p>
  
  <pre><code>              Stack(
                  children: &lt;Widget&gt;[
                    CardScrollWidget(currentPage),
                    Positioned.fill(
                      child: PageView.builder(
                        itemCount: images.length,
                        controller: controller,
                        reverse: true,
                        itemBuilder: (context, index) {
                          return Container();
                        },
                      ),
                    )
                  ],
                ),
  //              SizedBox(
  //                height: 10.0,
  //              ),
  </code></pre>
  
  <blockquote>
    <p>This is the associated widget file code:</p>
  </blockquote>
  
  <pre><code>import 'package:flutter/material.dart';
  import '../screens/introductory_screen.dart';
  import 'data.dart';
  import 'dart:math';
  import '../constants/constants.dart';
  
  class CardScrollWidget extends StatefulWidget {
    var currentPage;
  
    CardScrollWidget(this.currentPage);
  
    @override
    _CardScrollWidgetState createState() =&gt; _CardScrollWidgetState();
  }
  
  class _CardScrollWidgetState extends State&lt;CardScrollWidget&gt; {
    var padding = 20.0;
  
    var verticalInset = 20.0;
  
    @override
    Widget build(BuildContext context) {
      return new AspectRatio(
        aspectRatio: widgetAspectRatio,
        child: LayoutBuilder(builder: (context, contraints) {
          var width = contraints.maxWidth;
          var height = contraints.maxHeight;
  
          var safeWidth = width - 2 * padding;
          var safeHeight = height - 2 * padding;
  
          var heightOfPrimaryCard = safeHeight;
          var widthOfPrimaryCard = heightOfPrimaryCard * cardAspectRatio;
  
          var primaryCardLeft = safeWidth - widthOfPrimaryCard;
          var horizontalInset = primaryCardLeft / 2;
  
          List&lt;Widget&gt; cardList = List();
  
          for (var i = 0; i &lt; images.length; i++) {
            var delta = i - widget.currentPage;
            bool isOnRight = delta &gt; 0;
  
            var start = padding +
                max(
                    primaryCardLeft -
                        horizontalInset * -delta * (isOnRight ? 15 : 1),
                    0.0);
  
            var cardItem = Positioned.directional(
              top: padding + verticalInset * max(-delta, 0.0),
              bottom: padding + verticalInset * max(-delta, 0.0),
              start: start,
              textDirection: TextDirection.rtl,
              child: ClipRRect(
                borderRadius: BorderRadius.circular(16.0),
                child: Container(
                  decoration: BoxDecoration(
                      color: Colors.deepPurpleAccent,
                      boxShadow: [
                        BoxShadow(
                            color: Colors.black12,
                            offset: Offset(3.0, 6.0),
                            blurRadius: 10.0)
                      ]),
                  child: AspectRatio(
                    aspectRatio: cardAspectRatio,
                    child: Stack(
                      fit: StackFit.expand,
                      children: &lt;Widget&gt;[
                        Image.asset(
                          images[i],
                          fit: BoxFit.cover,
                        ),
                        Align(
                          alignment: Alignment.bottomLeft,
                          child: Column(
                            mainAxisSize: MainAxisSize.min,
                            crossAxisAlignment: CrossAxisAlignment.start,
                            children: &lt;Widget&gt;[
                              Padding(
                                padding: EdgeInsets.symmetric(
                                    horizontal: 16.0, vertical: 8.0),
                                child: Container(
                                  decoration: BoxDecoration(
                                    color: Colors.deepPurpleAccent,
                                    borderRadius: BorderRadius.circular(10.0),
                                  ),
                                  child: Padding(
                                    padding: const EdgeInsets.all(6.0),
  </code></pre>
  
  <blockquote>
    <p>This is where a gesture detector will be added to create a navigation link</p>
  </blockquote>
  
  <pre><code>                         child: Text(
                                      title[i],
                                      style: kCampaignLabelStyle,
                                    ),
                                  ),
                                ),
                              ),
  </code></pre>
  
  <blockquote>
    <p>This is where a gesture detector will be added to create a navigation link</p>
  </blockquote>
  
  <pre><code>    //                            SizedBox(
  //                              height: 10.0,
  //                            ),
  //                            Padding(
  //                              padding: const EdgeInsets.only(
  //                                  left: 12.0, bottom: 12.0),
  //                              child: Container(
  //                                padding: EdgeInsets.symmetric(
  //                                    horizontal: 22.0, vertical: 6.0),
  //                                decoration: BoxDecoration(
  //                                    color: Colors.deepPurpleAccent,
  //                                    borderRadius: BorderRadius.circular(20.0)),
  //                                child: Text(
  //                                  "Read More",
  //                                  style: TextStyle(color: Colors.white),
  //                                ),
  //                              ),
  //                            )
                            ],
                          ),
                        )
                      ],
                    ),
                  ),
                ),
              ),
            );
            cardList.add(cardItem);
          }
          return Stack(
            children: cardList,
          );
        }),
      );
    }
  }
  </code></pre>
  
  <blockquote>
    <p>If anyone can help with the navigation logic, I would appreciate it.</p>
  </blockquote>