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.

Answer 1

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