How to navigate to another page within a stack in flutter? - 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.