Flutter: IconButton does not receive onPressed function()

Question

I created a custom layout below:

class CustomLayout extends StatelessWidget {
  final Widget leading;
  final String title;
  final Widget body;
  final List<Widget> bottomBar;

  const CustomLayout({
    Key key,Widget leading, String title, Widget body, this.bottomBar
  }):leading = leading ?? const SizedBox(height: 0,),
    title = title ?? "",
    body = body ?? const SizedBox(),
    super(key: key)
  ;

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Stack(
          alignment: Alignment.topLeft,
          children: [
            /// Background
            Container(
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage("images/background.jpg"),
                  fit: BoxFit.cover
                )
              ),
            ),
            /// custom
            Column(
              children: [
                /// SimpleAppbar
                SizedBox(
                  height: (title == "")? 0 : 50,
                  width: MediaQuery.of(context).size.width,
                  child: Stack(
                    alignment: Alignment.centerLeft,
                    children: [
                      Center(
                        child: Text(
                          title,
                          style: TextStyle(
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                            fontSize: 24
                          ),
                        ),
                      ),
                      Container(
                        padding: const EdgeInsets.only(left:4.0,top: 4.0),
                        child: leading,
                      ),
                    ],
                  ),
                ),
                /// body
                Expanded(child: body),
                /// bottomBar
                SizedBox(
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: bottomBar == null ? [SizedBox()]:bottomBar,
                  ),
                )
              ],
            )
          ],
        ),
      ),
    );
  }
}

and use this layout:

CustomLayout(
  leading: IconButton(
    icon: Icon(
      Icons.arrow_back,
      color: Colors.white,
    ),
    onPressed: (){
      Navigator.of(context).pop();
    },
  ),
  body: // my code
);

leading parameter can't be pressed, I searched and got some hints that would be my Stack but I've checked many times. the bottom bar and body parameters still work fine. Help me!....................................................................................................................................................................................................................................................................

Answer 1

Generally the stack is used for layered format so you have used an expanded to the body in the custom layout that's why its taking over the complete screen width and height and it on the top of the leading icon, that's why the icon never gets pressed so I have changed some things in you layout check it out.

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: SampleApp(),
      debugShowCheckedModeBanner: false,
    );
  }
}

class SampleApp extends StatefulWidget {
  @override
  _SampleAppState createState() => _SampleAppState();
}

class _SampleAppState extends State<SampleApp> {
  

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Your app'),
        ),
        body: Container(
          child: CustomLayout(
              leading: IconButton(
                icon: Icon(
                  Icons.arrow_back,
                  color: Colors.black,
                  size: 20,
                ),
                onPressed: () {
                  print('This is the tap');
                },
              ),
              body: Text('This is your body') // my code
              ),
        ));
  }
}

class CustomLayout extends StatelessWidget {
  final Widget leading;
  final String title;
  final Widget body;
  final List<Widget> bottomBar;

  const CustomLayout(
      {Key key, Widget leading, String title, Widget body, this.bottomBar})
      : leading = leading ??
            const SizedBox(
              height: 0,
            ),
        title = title ?? "",
        body = body ?? const SizedBox(),
        super(key: key);

  @override
  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        body: Container(
          child: Stack(
            alignment: Alignment.topLeft,
            children: [
              /// Background
              Container(
                decoration: BoxDecoration(),
              ),

              /// custom
              Column(
                children: [
                  /// SimpleAppbar
                  SizedBox(
                    height: (title == "") ? 0 : 50,
                    width: MediaQuery.of(context).size.width,
                    child: Stack(
                      alignment: Alignment.centerLeft,
                      children: [
                        Center(
                          child: Text(
                            title,
                            style: TextStyle(
                                color: Colors.white,
                                fontWeight: FontWeight.bold,
                                fontSize: 24),
                          ),
                        ),
                      ],
                    ),
                  ),

                  /// body
                  Expanded(child: body),

                  /// bottomBar
                  SizedBox(
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      children: bottomBar == null ? [SizedBox()] : bottomBar,
                    ),
                  ),
                ],
              ),
              Container(
                padding: const EdgeInsets.only(left: 4.0, top: 5.0),
                child: leading,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Let me know if it works