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