Flutter：出现键盘时如何缩小图像或滚动到底部

Question

I would like to shrink the image when the keyboard appears to be able to click on the button "continuer"

The code I'm using :

// EnterEmailScreen extends StatelessWidget
Widget build(BuildContext context) {
    // This size provide us total height and width of our screen
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(height: size.height * 0.19),
            Image.asset(
              'assets/images/login.png',
              height: size.height * 0.45,
            ),
            SizedBox(height: size.height * 0.05),
            EmailForm(),
          ],
        ),
      ),
    );
  }

Answer 1

Use an Expanded :)

return Scaffold(
     body: Column(
       children: <Widget>[
         Expanded(child: Image.network('https://i.stack.imgur.com/y0V0Y.png')),
         TextField(),
         RaisedButton(
           onPressed: () {},
           child: Text('Email'),
         ),
         SizedBox(height: 50)
       ]
    ),
);

Answer 2

You can copy paste run full code below
To shrink image, you can check MediaQuery.of(context).viewInsets.bottom == 0 to change height
code snippet

Image.network(
          'https://via.placeholder.com/600/',
          height: MediaQuery.of(context).viewInsets.bottom == 0
              ? size.height * 0.45
              : size.height * 0.2,
        ),

working demo

full code

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  @override
  Widget build(BuildContext context) {
    print(MediaQuery.of(context).viewInsets.bottom);
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: SingleChildScrollView(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(height: size.height * 0.19),
            Image.network(
              'https://via.placeholder.com/600/',
              height: MediaQuery.of(context).viewInsets.bottom == 0
                  ? size.height * 0.45
                  : size.height * 0.2,
            ),
            SizedBox(height: size.height * 0.05),
            EmailForm(),
          ],
        ),
      ),
    );
  }
}

class EmailForm extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        TextField(),
        RaisedButton(
          child: Text('Continue'),
          onPressed: () {},
        ),
      ],
    );
  }
}

Answer 3

I found an alternative to my problem, instead of resizing the images.

I'm scrolling directly to the bottom (with the reverse ) when the keyboard appears.

  Widget build(BuildContext context) {
    // This size provide us total height and width of our screen
    Size size = MediaQuery.of(context).size;
    return Scaffold(
      body: SingleChildScrollView(
        reverse: true,
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            SizedBox(height: size.height * 0.19),
            Image.asset(
              'assets/images/enter_email.png',
              height: size.height * 0.35,
            ),
            SizedBox(height: size.height * 0.05),
            AuthenticateEmailForm()
          ],
        ),
      ),
    );
  }