CODEWITHSUNDEEP
flutterflutter-layout
Shyju
Shyju

Reputation: 63

The layout breaks when the keypad pops up

The layout breaks when I select the textbox on the screen. How can it possible to make the screen scrollable with the stack

enter image description here

Is there any way to scroll the entire content to the bottom when users start typing in the textbox

The code : Gist

Upvotes: 0

Views: 70

Answers (1)

Arnold Parge
Arnold Parge

Reputation: 6867

You have used the Stack in the wrong place. You need to use the Stack in the upper(scanPortion) widget. The CircleAvatar should overlap the scanPortion and make the overflow visible. This way the CircleAvatar will be stuck to scanPortion and will scroll along with it.

Remove the CircleAvatar from the current place and change the scanPortion into following:

var scanPortion = new Stack(
  children: <Widget>[
    new Container(
      height: MediaQuery.of(context).size.height / 2 - 40,
      width: MediaQuery.of(context).size.width,
      color: new Color(0xFF4A4A4C).withOpacity(0.5),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: <Widget>[
          qrCode,
          SizedBox(
            height: 10.0,
          ),
          new RaisedButton.icon(
            color: Colors.blueAccent,
            textColor: Colors.white,
            shape: new RoundedRectangleBorder(
                borderRadius: new BorderRadius.circular(30.0)),
            onPressed: () async {},
            icon: new Icon(
              Icons.camera_alt,
              color: Colors.white,
            ),
            label: Text('Scan'),
          )
        ],
      ),
    ),
    Positioned(
      top: (MediaQuery.of(context).size.height / 2 - 40.0) - 20.0,
      left: (MediaQuery.of(context).size.width) / 2 - 20.0,
      child: Center(
        child: CircleAvatar(
          backgroundColor: Colors.pink,
          child: Text('OR'),
          radius: 20.0,
        ),
      ),
    ),
  ],
  overflow: Overflow.visible,
);

Later remove the older Stack carefully, as it wont be of any use.

Upvotes: 1

Related Questions