how can I push page content up like the effect that happens when the keyboard appear?? something like this in the image enter image description here

CodePudding user response：

Use the showModalBottomSheet here.

showModalBottomSheet(
  backgroundColor: Colors.transparent,
  context: context,
  builder: ((context) {
    return Container(
      decoration: BoxDecoration(
        color: Theme.of(context).cardTheme.color,
        borderRadius: BorderRadius.only(
          topLeft: Radius.circular(20),
          topRight: Radius.circular(20),
        ),
      ),
      child: const Container(), // Child content
    );
  }),
);

CodePudding user response：

Create a bool to know if the button has been pressed.

bool buttonPushed = false;

Then when the button is pressed do this:

setState(() {
buttonPressed = true;
});

Show a Stack as your Scaffold body with the first child being the opening screen with the button. Then as the second child put an AnimatedContainer with the height: buttonPressed ? <height you want for the sheet> : 0 and inside that AnimatedContainer put the sheet content.

It would look something like this:

Widget scaffold() {
  return Scaffold(
    body: Stack(
      children: [
        screenWithButton(),
        Align(
          alignment: Alignment.bottomCenter,
          child: AnimatedContainer(
            duration: Duration(seconds: 1),
            height: buttonPressed ? 500 : 0, //Edit this height as you want
            child: loginFormSheet(),
          ),
        ),
      ],
    ),
  );
}