Flutter布局问题：如何不移动Logo和输入框将图片放到页面右上角

解决方法 #

你当前的top.png放在居中的Column布局列表中，所以会跟随整体内容居中展示。要在不改动Logo、输入框原有位置的前提下把图片移到右上角，只需通过Stack+Positioned组件做绝对定位即可，改动量极小。

具体修改步骤：

1. 移除login_screen.dart中Column内部的top.png对应代码块：

SizedBox(
  width: 130,
  child: SizedBox(
    child: Image.asset("assets/top.png",
    fit: BoxFit.contain,
    ),
  ),
),

2. 将Scaffold的body部分用Stack包裹，在原有布局外追加定位到右上角的图片组件，同时补上原代码遗漏的loginButton变量声明前缀final避免语法报错。

修改后的完整login_screen.dart代码：

import 'package:flutter/material.dart';

class LoginScreen extends StatefulWidget {
  const LoginScreen({ Key? key }) : super(key: key);

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

class _LoginScreenState extends State<LoginScreen> {
 // form key
 final _formKey = GlobalKey<FormState>();

 // Editing Controller
final TextEditingController emailController = new TextEditingController();
final TextEditingController passwordController = new TextEditingController();
final TextEditingController locationController = new TextEditingController();

  @override
  Widget build(BuildContext context) {

    //Name field
    final emailField = TextFormField(
      autofocus: false,
      controller: emailController,
      keyboardType: TextInputType.emailAddress,
    //validator: {} {},
    onSaved: (value)
    {
        emailController.text = value!;

    },
    textInputAction: TextInputAction.next,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.account_circle_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашето име",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    );

    //password field
    final passwordField = TextFormField(
      autofocus: false,
      controller: passwordController,
    //validator: {} {},
    onSaved: (value)
    {
        passwordController.text = value!;

    },
    textInputAction: TextInputAction.next,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.call_end_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашиот телефонски број",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),
      ),
    ),
    );

    //Location field
    final locationField = TextFormField(
      autofocus: false,
      controller: locationController,

    //validator: {} {},
    onSaved: (value)
    {
        locationController.text = value!;

    },
    textInputAction: TextInputAction.done,
    decoration: InputDecoration(
      prefixIcon: Icon(Icons.add_location_alt_outlined),
      contentPadding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      hintText: "Вашата локација",
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(20),

      ),
    )),

    // button
   final loginButton = Material(
    elevation: 5,
    borderRadius: BorderRadius.circular(30),
    color: Colors.redAccent,
    child: MaterialButton(
      padding: EdgeInsets.fromLTRB(20, 15, 20, 15),
      minWidth: MediaQuery.of(context).size.width,
      onPressed: () {},
      child: Text(
        "Логирање", 
      textAlign: TextAlign.center, 
      style: TextStyle(fontSize: 20,
      color: Colors.white,
      fontWeight: FontWeight.bold,
       ),
      ),
    ),
  );        

    return Scaffold(
      backgroundColor: Colors.white,
      body: Stack(
        children: [
          // 原有居中布局完全保留，不改动任何元素位置
          Center(
            child: SingleChildScrollView(
              child: Container(
                color: Colors.white,
                child: Padding(
                  padding: const EdgeInsets.all(35.0),
                  child: Form(
                    key: _formKey,
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.center,
                      children: <Widget> [
                        SizedBox(
                          height: 250,
                          child: Image.asset(
                            "assets/logo.png",
                            fit: BoxFit.contain,
                          )
                        ),
                        emailField,
                        SizedBox(height: 30),
                        passwordField,
                        SizedBox(height: 30),
                        locationField,
                        SizedBox(height: 30),
                        loginButton,
                        SizedBox(height: 30),
                      ],
                    ),
                  ),
                ),
              ),
            ) ,
          ),
          // 右上角定位的top图片
          Positioned(
            top: 30,
            right: 20,
            child: SizedBox(
              width: 130,
              child: Image.asset(
                "assets/top.png",
                fit: BoxFit.contain,
              ),
            ),
          )
        ],
      ),
    );
  }
}

如果觉得位置不对，直接调整Positioned的top、right数值即可适配不同屏幕的显示效果。

内容的提问来源于stack exchange，提问作者Leonid Boskoski