My aim is to postion a text centrally on top of a picture by using a Stack widget. I want that the text stays in the middle independet of how the window is resized. Based on my research should the solution be a the following structure:

• Stack Widget
• Impage Widget
• Layout Builder
• Text Widget

However when trying this my Text sticks to the top left corner. So i create a simpler version of the code and am still unable to reach the desired outcome. My current thinking is that maybe my Layoutbuilder does not correctly receive the size input of the window.

My example code is as follows

main.dart

import 'package:flutter/material.dart';
import 'package:imdb/screens/home_screen.dart';

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

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
       home: HomeScreen());
  }
}

home_screen.dart

import 'package:flutter/material.dart';

class HomeScreen extends StatelessWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        backgroundColor: Color(0xfff3f3f3),
        body: Stack(
          children: [
            Container(
              height: 200,
              width: 200,
              color: Colors.red,
            ),
 
            LayoutBuilder(builder: (context, constraints) {
              return Positioned(
                left: constraints.maxWidth * 0.5,
                top: constraints.maxHeight*0.5,
                child: Container(
                  height: 10,
                  width: 10,
                  color: Colors.yellowAccent
                ),
              );
            }),
          ],
        ));
  }
}

As output I would expect that the yellow container is placed centrally on the Red box. However the output looks as follows:

Screenshot of output

CodePudding user response：

If you just want to center something, you can use the Center widget - no need to use LayoutBuilder.

So your code would look something like this:

Stack:
[
  Image,
  Center:
    Text,
]

This way, your stack will match the size of your image, and the Text widget will be centered in the image.

CodePudding user response：

I would suggest directly setting alignment on Stack.

Scaffold(
          body: Container(
            color: Colors.blue,
            child: Stack(alignment: Alignment.center, children: [
              Container(
                height: 200,
                width: 200,
                color: Colors.red,
              ),
              Container(
                height: 10,
                width: 10,
                color: Colors.yellow,
              ),
            ],
           ),
          ),
        );

Stacks that are not explicitly sized (via SizedBox, for example) will be the size of their largest child, unless they have constraints placed upon them ("Size goes up, constraints go down").

To answer your question though, Stacks must have positioned elements as direct children.