Navigate back from page flutter - flutter

Question

I want to navigate to the previous page using the arrow icon I have added in this code. to where I want to add that code and tell me how to code that part. want to navigate from detail_screen.dart to home_page.dart using the arrow icon I have added. can someone please provide a proper answer for this?
detail_screen.dart
import 'package:flutter/material.dart';
class DetailsScreen extends StatelessWidget {
const DetailsScreen({Key? key}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.white,
//shadowColor: Colors.transparent,
leading: Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
actions: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: const [
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child:
Icon(Icons.favorite_border_outlined, color: Colors.black),
),
CircleAvatar(
radius: 40,
backgroundColor: Colors.white,
child: Icon(Icons.shopping_bag_outlined, color: Colors.black),
)
],
),
),
],
),
body: Column(
children: <Widget>[
Stack(
alignment: Alignment.bottomRight,
children: <Widget>[
Padding(
padding: const EdgeInsets.only(top: 0),
child: Container(
height: MediaQuery.of(context).size.height * 0.9,
width: MediaQuery.of(context).size.width * 0.9,
padding: const EdgeInsets.only(left: 20),
decoration: const BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/image23.png"),
fit: BoxFit.contain,
),
),
),
),
Padding(
padding: const EdgeInsets.only(
left: 20,
),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.grey.shade100,
),
alignment: const Alignment(1, 1),
height: 310,
width: 375,
child: Column(
children: [
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.only(left: 10),
child: Text(
"Crop Top",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
SizedBox(
height: 30,
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.blueAccent,
child: null),
),
),
SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.amber,
child: null),
),
Padding(
padding: const EdgeInsets.all(10.0),
child: SizedBox(
width: 25,
height: 25,
child: FloatingActionButton(
onPressed: () {},
backgroundColor: Colors.lightGreen,
child: null),
),
),
]),
],
),
Padding(
padding: const EdgeInsets.fromLTRB(0, 0, 270, 10),
child: Text(
"Sizes",
style: TextStyle(
fontSize: 16,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.left,
),
),
// SizedBox(
// height: 30,
// ),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XS');
},
child: Text('XS'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('X');
},
child: Text('S'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('M');
},
child: Text('M'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('L');
},
child: Text('L'),
),
TextButton(
style: TextButton.styleFrom(
side: BorderSide(
color: Colors.black,
),
),
onPressed: () {
print('XL');
},
child: Text('XL'),
),
],
),
SizedBox(
height: 30,
),
Row(
children: [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"30% off",
style: TextStyle(
fontSize: 25,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
],
),
SizedBox(
height: 30,
),
Row(
children: const [
Padding(
padding: const EdgeInsets.all(8.0),
child: Text(
"Rs.2950",
style: TextStyle(
fontSize: 18,
color: Color(0xff8399A9),
fontWeight: FontWeight.w700,
decoration: TextDecoration.lineThrough),
),
),
Text(
"Rs.2750",
style: TextStyle(
fontSize: 24,
color: Color(0xff0DA75F),
fontWeight: FontWeight.w700,
),
),
],
),
],
),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 0),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Add to Cart ",
),
style: ElevatedButton.styleFrom(
primary: Colors.pinkAccent,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20),
),
),
padding: const EdgeInsets.all(28),
),
),
),
],
),
],
),
);
}
}
home_page.dart
import 'package:flutter/material.dart';
import 'package:fashion_app/details_screen.dart';
import 'package:flutter/services.dart';
class HomePage extends StatefulWidget {
#override
_HomePageState createState() => _HomePageState();
}
class _HomePageState extends State<HomePage> {
//final double _borderRadious = 24;
#override
#override
void initState() {
// TODO: implement initState
super.initState();
SystemChrome.setEnabledSystemUIMode(SystemUiMode.manual, overlays: []);
}
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
backgroundColor: Colors.pinkAccent,
),
body: ListView(
padding: const EdgeInsets.only(top: 40, left: 20, right: 20),
children: [
HelloText(),
Name(),
SizedBox(
height: 10,
),
buildSearchInput(),
SizedBox(
height: 10,
),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Summer Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressone.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(10, 45, 10, 0),
child: TextButton(
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.red.shade50,
),
height: 137,
width: 327,
child: Column(
children: const [
Padding(
padding: const EdgeInsets.fromLTRB(20, 40, 100, 40),
child: Text(
"Winter Collections",
style: TextStyle(
fontSize: 24,
color: Color(0xff262626),
fontWeight: FontWeight.w700),
textAlign: TextAlign.justify,
),
),
],
)),
onPressed: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (context) => const DetailsScreen()));
},
),
),
const Padding(
padding: EdgeInsets.fromLTRB(200, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dresstwo.png"),
),
),
]),
Stack(children: [
Padding(
padding: const EdgeInsets.fromLTRB(5, 20, 10, 0),
child: Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(30.0),
color: Colors.blue.shade50,
),
height: 137,
width: 327,
child: Row(
children: const [
Padding(
padding: EdgeInsets.fromLTRB(150, 40, 0, 40),
child: Text(
"Get",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
),
Padding(
padding: EdgeInsets.all(5.0),
child: Text(
"30%",
style: TextStyle(
fontSize: 24,
color: Colors.purple,
fontWeight: FontWeight.w700),
),
),
Text(
"Off",
style: TextStyle(
fontSize: 24,
color: Colors.black,
fontWeight: FontWeight.w700),
),
],
)),
),
const Padding(
padding: EdgeInsets.fromLTRB(15, 0, 10, 0),
child: Image(
image: AssetImage("assets/images/dressthree.png"),
),
),
Padding(
padding: const EdgeInsets.fromLTRB(230, 110, 0, 40),
child: ElevatedButton(
onPressed: () {},
child: const Text(
"Know More",
),
style: ElevatedButton.styleFrom(
primary: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(30),
bottomRight: Radius.circular(20))),
padding: const EdgeInsets.all(15)),
),
),
]),
],
),
);
}
Widget HelloText() => Container(
child: Row(children: [
Text(
'Hello,',
style: TextStyle(
fontSize: 28,
color: Colors.black,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget Name() => Container(
child: Row(children: [
Text(
'Nirasha',
style: TextStyle(
fontSize: 28,
color: Colors.amber,
fontWeight: FontWeight.w500,
),
),
]),
);
Widget buildSearchInput() => Container(
decoration: BoxDecoration(
color: Colors.grey[300], borderRadius: BorderRadius.circular(20)),
child: Padding(
padding: const EdgeInsets.only(left: 20.0, right: 20),
child: Row(
children: [
Icon(
Icons.search,
size: 30,
color: Colors.grey,
),
Flexible(
child: TextField(
decoration: InputDecoration(border: InputBorder.none),
),
),
],
),
),
);
}

Answer 1

use following Structure in detail_screen.dart scaffold:
body : SafeArea(
child: Column(
children: <Widget>[
Container(child: IconButton(
icon: Icon(
Icons.chevron_left_sharp, //backIcon
color: Colors.indigo,
size: 30,
),
onPressed: () {
Navigator.pop(context);
},
),
-------------------- //other Elements Of body
]
),
)

Answer 2

Please use this : Navigator.of(context).pop();

Answer 3

In your detail_screen.dart, use this code in Appbar leading.
IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),

Answer 4

Used this code now it is working.
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () {Navigator.push(
context,
MaterialPageRoute(
builder: (context) => HomePage()));
},
),

Answer 5

In your DetailScreen, your leading widget should be IconButton and handle onpressed event of that IconButton to pop the activity from stack.
Here it is:
leading: IconButton(
icon: new Icon(
Icons.arrow_back_rounded,
color: Colors.black,
),
onPressed: () => Navigator.pop(context),
),