How to Position inside a Stack widget

Question

I have this Stack widget and a Positioned widget inside it. But the position of it doesn't change according to the properties of Positioned.

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Graphs'),
      ),
      body: Stack(
        children: [
          const Text(
            'test text',
            style: TextStyle(
                fontSize: 20.0,
                fontWeight: FontWeight.w400,
                color: Colors.lightBlue),
          ),
          TextField(
            onChanged: (input) {
              setState(() {
                inEquation = input;
              });
            },
            decoration: const InputDecoration(
              border: OutlineInputBorder(),
              labelText: 'Enter equation',
            ),
          ),
          Positioned(      //the positioned widget I wanna position
            bottom : 50,
            right: 30,
            child: MaterialButton(
              onPressed: () {
                setState(() {
                  toggled = !toggled;
                });
              },
            child: const Text('Enter'),),
          )],
      ),
    );
  }

I feel like it's getting positioned into the bigger widget in the children list of the Stack.

I'm running your exact code with the widget being built in a `StatefulWidget`, and the `MaterialButton` in `Positioned` is changing position accordingly to the `bottom` and `right` properties. Is there more context or a specific issue with the positioning? — raw-chicken, Apr 27 '23 at 18:02
@raw-chicken try changing the `bottom` property of the `MaterialButton` into something like 50... It won't show. Thank you for your time — Pulina Hansana, Apr 27 '23 at 18:06
When the `bottom` property is 50, it's positioned out of the stack widget. Where are you trying to place the button? — raw-chicken, Apr 27 '23 at 18:15

score 1 · Accepted Answer · answered Apr 27 '23 at 19:45

The problem is occuring because Stack widget does not have any constraints. Due to no constraints, the Positioned() widget TextButton() is not visible.

To solve this wrap your Stack widget with constraints by using SizedBox() or Container() widget and set its height property.

body: SizedBox(
        height: MediaQuery.of(context).size.height,
        child: Stack(
          children: [
            const Text(
              'test text',
              style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.w400,
                  color: Colors.lightBlue),
            ),
            TextField(
              onChanged: (input) {
                setState(() {
                  inEquation = input;
                });
              },
              decoration: const InputDecoration(
                border: OutlineInputBorder(),
                labelText: 'Enter equation',
              ),
            ),
            Positioned(
              //the positioned widget I wanna position
              bottom: 50,
              right: 30,
              child: MaterialButton(
                onPressed: () {
                  setState(() {
                    toggled = !toggled;
                  });
                },
                child: const Text('Enter'),
              ),
            )
          ],
        ),
      ),

How to Position inside a Stack widget

1 Answers1