How to navigate to another page within a stack in flutter?

Question

I am currently trying to manage the navigation logic within the flutter stack I have created. I would like to add separate page navigation to each of the list items listed:

 List<String> 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<String> title = [
  "Cadbury",
  "Biotherme",
  "Trip Advisor",
  "L'Oreal Paris",
];

> This is the associated stack logic code in another file:

              Stack(
                children: <Widget>[
                  CardScrollWidget(currentPage),
                  Positioned.fill(
                    child: PageView.builder(
                      itemCount: images.length,
                      controller: controller,
                      reverse: true,
                      itemBuilder: (context, index) {
                        return Container();
                      },
                    ),
                  )
                ],
              ),
//              SizedBox(
//                height: 10.0,
//              ),

This is the associated widget file 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() => _CardScrollWidgetState();
}

class _CardScrollWidgetState extends State<CardScrollWidget> {
  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<Widget> cardList = List();

        for (var i = 0; i < images.length; i++) {
          var delta = i - widget.currentPage;
          bool isOnRight = delta > 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: <Widget>[
                      Image.asset(
                        images[i],
                        fit: BoxFit.cover,
                      ),
                      Align(
                        alignment: Alignment.bottomLeft,
                        child: Column(
                          mainAxisSize: MainAxisSize.min,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: <Widget>[
                            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),

This is where a gesture detector will be added to create a navigation link

                         child: Text(
                                    title[i],
                                    style: kCampaignLabelStyle,
                                  ),
                                ),
                              ),
                            ),

This is where a gesture detector will be added to create a navigation link

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

If anyone can help with the navigation logic, I would appreciate it.

Answer 1

create seperate files

Cadbury.dart

class Cadbury extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return CadburyState();
  }
}

class CadburyState extends State<DashboardApp> {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: AppBar(
          title: Text("Cadbury Screen"),
          backgroundColor: MyColor.colorRed,
        ),
        backgroundColor: MyColor.colorRed,
        body: new Center());
  }
}

Biotherme.dart

class Biotherme extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return BiothermeState();
  }
}

class BiothermeState extends State<Biotherme> {

  @override
  Widget build(BuildContext context) {

    return new Scaffold(
        appBar: AppBar(
          title: Text("Biotherme Screen"),
          backgroundColor: MyColor.colorRed,
        ),
        backgroundColor: MyColor.colorRed,
        body: new Center());
  }
}

and make the redirections like this

// common function to create button and redirects the page which is in callback name
Widget buttonBuilder(
    String buttonText, BuildContext context, Widget callbackName) {
  return new RaisedButton(
      child: Text(buttonText),
      onPressed: () {
        Navigator.push(
            context, MaterialPageRoute(builder: (context) => callbackName));
      });
}


// home redirection screen which redirects to the cadbury and Biotherme screen
class RedirectionScreen extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: AppBar(title: Text("Home Screen")),
        body: Center(
          child: new Column(
            mainAxisSize: MainAxisSize.max,
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              buttonBuilder('Cadbury Screen', context, Cadbury()),
              buttonBuilder('Biotherme Screen', context, Biotherme()),
            ],
          ),
        ));
  }
}

Answer 2

try this below code for Navigation, it works for me

If you want to navigate the page on the button's click event then write code

return new RaisedButton(
  child: Text(buttonText),
  onPressed: () {
    Navigator.push(
        context, MaterialPageRoute(builder: (context) => redirection_page_name));
  });

Note: Here redirection_page_name is the page or widget name which you want to be load on the button's click event.

The original syntax is

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

here context is the current screen widget context which is built, and redirection_page_name is the new page/widget which is being loaded.