虚拟键盘出现时如何向上移动内容

Question

I created a simple project illustrating my problem.

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  const MyHomePage({Key? key}) : super(key: key);

  // method call to show the modal
  showModal(BuildContext context) {
    showDialog(
      context: context,
      builder: (BuildContext context) {
        // This will call the class Modal
        return const MyModal();
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: ElevatedButton(
          onPressed: () => showModal(context),
          child: const Text('Click To Show Modal'),
        ),
      ),
    );
  }
}

class MyModal extends StatelessWidget {
  const MyModal({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // This get the screen height and width
    final size = MediaQuery.of(context).size;
    return Dialog(
      child: Scaffold(
        body: SizedBox(
          height: size.height,
          width: size.width,
          child: Column(
            children: const [
              // This sizebox will simulate the space the header takes
              SizedBox(
                height: 400,
              ),
              TextField(
                obscureText: true,
                decoration: InputDecoration(
                  border: OutlineInputBorder(),
                  labelText: 'Password',
                ),
              )
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

In MyModal , you can try wrapping SizedBox inside a SingleChildScrollView .

class MyModal extends StatelessWidget {
  const MyModal({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    // This get the screen height and width
    final size = MediaQuery.of(context).size;
    return Dialog(
      child: Scaffold(
        body: SingleChildScrollView( // <<<<< HERE
          child: SizedBox(
            height: size.height,
            width: size.width,
            child: Column(
              children: const [
                // This sizebox will simulate the space the header takes
                SizedBox(
                  height: 400,
                ),
                TextField(
                  obscureText: true,
                  decoration: InputDecoration(
                    border: OutlineInputBorder(),
                    labelText: 'Password',
                  ),
                )
              ],
            ),
          ),
        ),
      ),
    );
  }
}