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

Flutter – How to make Outer part of the box to be clickable?

Please help me with this. I am new to flutter

Visual Example

The amber colored container/box is clickable/hyperlink. How do I make the white part to be also clickable?

Here is the code snippet :

Row(children: [
Expanded(
      flex: 3,
      child: InkWell(
        onTap: onTap,
        child: Container(
          color: Colors.amber,
          child: Padding(
            padding: EdgeInsets.only(
              top: 15,
              bottom: 15,
            ),
            child: Column(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  label ?? '',
                  maxLines: 1,
                  overflow: TextOverflow.ellipsis,
                  style: StyleKit.getWordStyle(
                    'b2bk',
                    color: labelColor,
                  ),
                ),
              ],
            ),
          ),
        ),
      ),
    );])
Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    My solution is that I stack a container on top of the widget :

    Stack (
  children : [
              Row(children: [
               Expanded(...))
              Position( 
                //adjust suitable position here
                child : Container ( same size as the yellow box))
              ]
)

  2. 0

    You can give fix height to the buttons in Row and wrap in an Clickable widget like below.

      InkWell(
      onTap: () => debugPrint("White area tapped"),
      child: Container(
        width: double.infinity,
        height: 120,
        color: Colors.purple.shade300,
        child: Row(....),
      ),
    )

    By doing this your outer area will also get clickable.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search