Question

当我在不到5英寸的手机上运行时，我的应用程序的进入页面如下所示，当出现底部溢出，图像大小问题，文本字体问题时，

如果我在5英寸以上的地方运行同一个应用程序，我将像下面这样

从事过Flutter应用开发工作的人可以帮助我如何根据屏幕进行调整吗？

还如何根据屏幕大小调整文本大小，图像大小？

下面是我的代码：

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';

Color colorTheme;

class LoginPage extends StatefulWidget {
  @override
  _LoginPageState createState() => new _LoginPageState();
}

class _LoginPageState extends State<LoginPage> {
  TextEditingController controllerEmail = TextEditingController();
  TextEditingController controllerPassword = TextEditingController();
  String username, password;
  Widget loginButtonChild = const Text(
    "Log in",
    textAlign: TextAlign.center,
    style: TextStyle(
        color: Colors.white, fontFamily: "OpenSans-Regular", fontSize: 16),
  );

  Widget loginButtonWithCircle = Row(
    children: <Widget>[
      const Text(
        "Log in",
        style: TextStyle(
          color: Colors.white,
          fontFamily: "OpenSans-Regular",
        ),
      ),
      CircularProgressIndicator(),
    ],
  );



  @override
  Widget build(context) {
    double maxHeight = MediaQuery.of(context).size.height;
    // ScreenUtil.instance = ScreenUtil.getInstance()..init(context);
    return Scaffold(
      resizeToAvoidBottomPadding: true,
      body: SingleChildScrollView(
        child: LimitedBox(
          maxHeight: maxHeight * 1,
          child: Stack(
            //fit: StackFit.expand,
            children: <Widget>[
              Container(
                child: Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    Padding(
                      padding: EdgeInsets.only(
                          top: MediaQuery.of(context).size.height * 0.05,
                          left: MediaQuery.of(context).size.width * 0.05),
                      child: Image.asset('assets/Heat Map.png',
                          width: 100, height: 20, fit: BoxFit.fill),
                    )
                  ],
                ),
              ),
              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  Stack(
                    children: <Widget>[
                      Container(
                        decoration: BoxDecoration(
                            borderRadius:
                                BorderRadius.all(Radius.circular(15))),
                        padding: EdgeInsets.all(
                          // MediaQuery.of(context).size.width * 0.09,
                          MediaQuery.of(context).size.width * 0.1,
                        ),
                        child: Image.asset(
                          'assets/layer_1_3.png',
                          // color: Color(0xFFe31735),
                          // width: 300,
                          width: MediaQuery.of(context).size.width * 0.72,
                          // height: 300,
                          height: MediaQuery.of(context).size.height * 0.5,
                          fit: BoxFit.contain,
                        ),
                      ),
                      Positioned(
                        left: 78.0,
                        bottom: 10.0,
                        child: RichText(
                          text: TextSpan(
                            text: 'APP',
                            style: TextStyle(
                                fontWeight: FontWeight.bold, color: Colors.black),
                            children: <TextSpan>[
                              TextSpan(
                                text: '\nDevelopment',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontWeight: FontWeight.normal,
                                ),
                              ),
                              TextSpan(
                                text: '\nFlutter',
                                style: TextStyle(
                                  color: Colors.black,
                                  fontWeight: FontWeight.normal,
                                ),
                              ),
                            ],
                          ),
                          maxLines: 3,
                          overflow: TextOverflow.ellipsis,
                          softWrap: true,
                        ),
                      ),
                    ],
                  ),
                  SingleChildScrollView(
                    child: new Container(
                      padding: const EdgeInsets.fromLTRB(20.0, 0.0, 40.0, 40.0),
                      child: new Form(
                        child: new Column(
                          mainAxisAlignment: MainAxisAlignment.start,
                          children: <Widget>[
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.only(top: 20),
                                  child: Icon(Icons.person_outline,
                                      size: 38, color: Colors.black),
                                ),
                                SizedBox(width: 10.0),
                                new Expanded(
                                  child: new TextFormField(
                                    style: TextStyle(color: Colors.black),
                                    controller: controllerEmail,
                                    //cursorColor: , make it yellow later TODO
                                    decoration: new InputDecoration(
                                        labelText: "Username",
                                        enabledBorder: new UnderlineInputBorder(
                                            borderSide: new BorderSide(
                                          color: Colors.red,
                                        ))),
                                    keyboardType: TextInputType.text,
                                  ),
                                ),
                              ],
                            ),
                            Row(
                              children: <Widget>[
                                Padding(
                                  padding: EdgeInsets.only(top: 20),
                                  child: Icon(
                                    Icons.lock_outline,
                                    size: 38,
                                    color: Colors.black,
                                  ),
                                ),
                                SizedBox(width: 10.0),
                                new Expanded(
                                  child: new TextFormField(
                                    controller: controllerPassword,
                                    style: TextStyle(color: Colors.red),
                                    decoration: new InputDecoration(
                                        labelText: "Password",
                                        enabledBorder: new UnderlineInputBorder(
                                            borderSide: new BorderSide(
                                          color: Colors.red,
                                        ))),
                                    obscureText: true,
                                    keyboardType: TextInputType.text,
                                  ),
                                ),
                              ],
                            ),
                            Padding(
                              padding: EdgeInsets.only(
                                top: 0,
                              ),
                              child: Row(
                                mainAxisAlignment: MainAxisAlignment.end,
                                children: <Widget>[
                                  FlatButton(
                                    onPressed: () {

                                    },
                                    child: Text(
                                      "Forgot password?",
                                      style: TextStyle(
                                        color: Colors.grey,
                                        fontFamily: "OpenSans-Regular",
                                      ),
                                    ),
                                  )
                                ],
                              ),
                            ),
                            SizedBox(
                              height: MediaQuery.of(context).size.width * 0.04,
                            ),
                            RaisedButton(
                                shape: RoundedRectangleBorder(
                                    borderRadius:
                                        new BorderRadius.circular(25.0),
                                    side: BorderSide(color: Colors.red)),
                                color: Colors.red,
                                child: Row(
                                  mainAxisSize: MainAxisSize.min,
                                  children: <Widget>[
                                    Padding(
                                      padding: EdgeInsets.only(left: 48),
                                      child: loginButtonChild,
                                    ),
                                    const SizedBox(
                                      width: 45.0,
                                      height: 45.0,
                                    ),
                                    Icon(Icons.arrow_forward,
                                        color: Colors.white),
                                  ],
                                ),
                                onPressed: () {
                                }),
                          ],
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Answer 1

您可以使用SingleChildScrollView避免溢出错误，只需将您的小部件包装成SingleChildScrollView 示例：-

application.properties

在Flutter应用中处理应用布局

1 个答案: