在我的堆叠图像文件 (Flutter) 之后，我有不需要的 space

Question

这是我遇到问题的 dart 文件：根据我的说法，白色额外 space 是因为这个。看看最后的文字。

import 'dart:ffi';

import 'package:flutter/material.dart';
import 'package:hexcolor/hexcolor.dart';
import 'package:lint/lint.dart';
import 'package:simple_shadow/simple_shadow.dart';

class WelcomeLettersDart extends StatefulWidget {
  @override
  _WelcomeLettersDartState createState() => _WelcomeLettersDartState();
}

class _WelcomeLettersDartState extends State<WelcomeLettersDart> {
  @override
  Widget build(BuildContext context) {
    return SizedBox(
      width: 340,
      child: Center(
        child: Stack(
          children: [
            Center(
              child: SimpleShadow(
                opacity: 0.7,
                color: Colors.amber,
                offset: Offset(0.0, 2.0),
                sigma: 6.0,
                child: Image.asset(
                  "assets/images/WelcomeLetterD.png",
                  height: 340,
                ),
              ),
            ),
            Center(
              child: Positioned(
                child: Padding(
                  padding: const EdgeInsets.symmetric(vertical: 32),
                  child: Text(
                    "WELCOME",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 18,
                      color: Colors.white,
                    ),
                    textAlign: TextAlign.center,
                  ),
                ),
              ),
            ),
            Center(
              child: Positioned(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 88,
                    horizontal: 63,
                  ),
                  child: Text(
                    "Greeting from Letters. This  is a chat application with an old theme of sending letters.",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.15,
                    ),
                  ),
                ),
              ),
            ),
            Center(
              child: Positioned(
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 200,
                    horizontal: 63,
                  ),
                  child: Text(
                    "Lets look together what we have got :)",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.10,
                    ),
                  ),
                ),
              ),
            ),

看看这里我在这里有一个 280 的垂直填充，我想这是造成所有问题的原因。我还可以使用什么将文本堆叠在图像上所需的位置？

            Positioned(
              child: Align(
                alignment: Alignment.bottomRight,
                child: Padding(
                  padding: const EdgeInsets.symmetric(
                    vertical: 280,
                    horizontal: 65,
                  ),
                  child: Text(
                    "- Nishan",
                    style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.15,
                    ),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 1

用中心小部件包裹堆栈。另外，请格式化代码以便于阅读。

Answer 2

是的，所以我对这个问题的看法是正确的，我已经解决了。所以，一直以来我都以错误的方式使用“定位”小部件。应该是这样-

Positioned(
   right: 64,
   bottom: 32,
   child: Text(
           "- Nishan",
            style: TextStyle(
                      fontWeight: FontWeight.w500,
                      fontSize: 13,
                      color: Colors.white,
                      height: 2.15,
                    ),
                 ),
              ),

我使用了 paddings 和 alignments inside positioned widget 以在图像上实现所需的位置。但是 Positioned 小部件本身有其“left:”、“right:”、“top:” & "bottom:" 用于在对象上实现所需的位置。

我从 flutter.io 中看到了正确的用法。它用额外的白色 space 解决了我的问题。 现在我需要用定位的小部件清理很多东西。

在我的堆叠图像文件 (Flutter) 之后，我有不需要的 space

I am having unwanted space after my stacked image file (Flutter)

whitespace

infinite-scroll

flutter

flutter-test

flutter-layout