Question 75210 in Flutter Question posted in
The official Flutter documentation can be found here.

Widget Stack not showing top levels – Flutter

I make the Stack widget as usual, but the InkWell widget doesn’t appear on top of the blue Container. For the experiment, I put other widgets in its place and everything works. What did I do wrong? Here is the part of the code:

          Stack(
            children: [
            Container(height: 280, color: Colors.blue,),
            Row(
              children: [
                InkWell(
                  onTap: () {
                    Navigator.of(context).pushReplacement(
                        MaterialPageRoute(
                            builder: (context) =>
                                Mainpage()));
                  }, 
                  splashColor: Colors.brown.withOpacity(0.5),
                  child: Ink(
                    height: 48,
                    width: 48,
                    decoration: const BoxDecoration(
                      image: DecorationImage(
                        image:
                        AssetImage('assets/dagger.png'),
                        fit: BoxFit.cover,
                      ),
                    ),
                  ),
                ),
              ],
            ),

Here I made the container transparent and you can see that InkWell is there and is located under the container:

Screenshot

Tags:

2

Answers


  1. 0

    You can wrap InkWell to Positioned and set the position with the Stack and wrap your InkWell to a Material widget. This is for making sure that InkWell has a parent that can handle the tap event:

    Stack(
  children: [
    Container(height: 280, color: Colors.blue,),
    Positioned(
      top: 0,
      left: 0,
      child: Material(
        color: Colors.transparent,
        child: InkWell(
          onTap: () {
            Navigator.of(context).pushReplacement(
              MaterialPageRoute(
                builder: (context) => Mainpage()
              )
            );
          }, 
          splashColor: Colors.brown.withOpacity(0.5),
          child: Ink(
            height: 48,
            width: 48,
            decoration: const BoxDecoration(
              image: DecorationImage(
                image: AssetImage('assets/dagger.png'),
                fit: BoxFit.cover,
              ),
            ),
          ),
        ),
      ),
    ),
  ],
),

    happy coding…

    Login or Signup to reply.
  2. 0

    Make your Inc widget in Material widget :

    child: Material(
   child: Ink(
   height: 48,
   width: 48,
   decoration: const BoxDecoration(
     image: DecorationImage(
        image: AssetImage('assets/dagger.png'),
        fit: BoxFit.cover,
    ),
   ),
  )
),
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search