Home > Back-end >  Navigate back from page flutter
Navigate back from page flutter

Time:01-22

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

CodePudding user response:

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
       ),
)

CodePudding user response:

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(),
      ),

CodePudding user response:

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

CodePudding user response:

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()));
                  },
            ),
  •  Tags:  
  • Related