Flutter TextField's are not clickable inside Stack

user_15963607 0
Viewed 349

I'm trying to practice on Custom Shape implementation on flutter.

As a summary: I cannot click the TextFields,Buttons etc. because that widget is located at the end of the stack.

Here is my code :

 child: Container(
        child: Stack(
          fit: StackFit.expand,
          children: [
            Center(
              child: child,
            ),
            Align(
              alignment: Alignment.topCenter,
              child: RotatedBox(
                quarterTurns: 2,
                child: CustomPaint(
                  painter: CurvePainter(),
                  child: Container(),
                ),
              ),
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: CustomPaint(
                painter: CurvePainter(),
                child: Container(),
              ),
            ),

          ],
        ),
      ),

enter image description here

Any suggestion is appreciated.

flutter
2 Answers

Use IgnorePointerwhich prevents their children’s widget from pointer-events which are taping, clicking, dragging, scrolling, and hover.

Container(
      child: Stack(
        fit: StackFit.expand,
        children: [
          Center(
            child: child,
          ),
          IgnorePointer(
            child: Align(
              alignment: Alignment.topCenter,
              child: RotatedBox(
                quarterTurns: 2,
                child: CustomPaint(
                  painter: CurvePainter(),
                  child: Container(),
                ),
              ),
            ),
          ),
          IgnorePointer(
            child: Align(
              alignment: Alignment.bottomCenter,
              child: CustomPaint(
                painter: CurvePainter(),
                child: Container(),
              ),
            ),
          ),
        ],
      ),
    );

Check the docs here.

user_180726510

Try with this, set your Textfields at last.

child: Container(
    child: Stack(
      fit: StackFit.expand,
      children: [
        Align(
          alignment: Alignment.topCenter,
          child: RotatedBox(
            quarterTurns: 2,
            child: CustomPaint(
              painter: CurvePainter(),
              child: Container(),
            ),
          ),
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: CustomPaint(
            painter: CurvePainter(),
            child: Container(),
          ),
        ),
        Center(
          child: child,
        ),
      ],
    ),
  ),
user_164677630
Related