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

Question

This is dart file I am having issue with: According to me the white extra space is because of this. Take a look at the last text.

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,
                    ),
                  ),
                ),
              ),
            ),

Take a Look here I have a vertical padding of 280 here, I guess that's creating all there problem. What else can I use to stack the text over the image in the desired location?

            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

Yes, so I was right about the problem and I have fixed it. So, all this time I was using the "Positioned" widget the wrong way. Here's how it should be-

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

I used paddings and alignments inside positioned widget to achieve the required location over the image. But Positioned widget itself has its "left:", "right:", "top:" & "bottom:" for achieving the required location over an object.

I saw the correct use from flutter.io. It solved my issue with the extra white space. Now just got a lot to clean up with my positioned widgets.

Answer 2

Wrap the stack with a centre widget. Also, please format the codes so it becomes easy to read.