Flutter position fixed equivalent - dart

Question

Is it possible to fix an object in the screen that stays fixed regardless of scrolling?
Something similar to CSS position fixed.

Answer 1

You can absolutely position a child of a Stack widget using the Positioned widget.
The minimal example below places the red box above the list view, by placing the child in a Positioned widget after the ListView in the Stack's children.
List<String> todos = [...];
return new Stack(
children: <Widget>[
new ListView(
children: todos
.map((todo) => new ListTile(title: new Text(todo)))
.toList(),
),
new Positioned(
left: 30.0,
top: 30.0,
child: new Container(
width: 100.0,
height: 80.0,
decoration: new BoxDecoration(color: Colors.red),
child: new Text('hello'),
)
),
],
);
And here it is inside of a Scaffold body. If you add more items you'll find that the list scrolls without moving the red box.

Answer 2

You could use Positioned widget in a Stack Widget with AspectRatio widget and use the % distance like the below code.
#override
Widget build(BuildContext context) {
Size size = MediaQuery.of(context).size; //get the screen size
List<String> todos = [...];
//the below if to get the aspect ratio of the screen i am using the app only in landscape
//if you need to use it in portrait you should add the sizes below
if((size.width / size.height) > 1.76){
aspect = 16 / 9;
}else if((size.width / size.height) < 1.77 && (size.width / size.height) >= 1.6){
aspect = 16 / 10;
}else{
aspect = 4 /3;
}
return new Scaffold(
body: new Center(
//layoutBuilder i can use the constraints to get the width and height of the screen
child: new LayoutBuilder(builder: (context, constraints) {
return new AspectRatio(
aspectRatio: aspect,
child: new Column(
children: <Widget>[
new ListView(
children: todos
.map((todo) => new ListTile(title: new Text(todo)))
.toList(),
),
new Positioned(
//constraints.biggest.height to get the height
// * .05 to put the position top: 5%
top: constraints.biggest.height * .05,
left: constraints.biggest.width * .30,
child: new Container(
width: 100.0,
height: 80.0,
decoration: new BoxDecoration(color: Colors.red),
child: new Text('hello'),
),
),
],
),
),
}),
),
);
}
}
Hope it will help you....

Answer 3

I prefer this solution:
Stack(
children: [
Column(
children: [
Container(...),
Container(...),
]
),
Positioned(top:50, child: Card(...))
]
)

Answer 4

Widget build(BuildContext context) {
return Column(
children: [
Container(
// covers 20% of total height
height: 200,
child: Stack(
children: [
Container(
height: 300,
decoration: BoxDecoration(
color: Colors.red,
),
),
Positioned(
bottom: 0,
left: 0,
width: 100,
height: 100,
child: Container(
height: 54,
decoration: BoxDecoration(
color: Colors.blue,
),
),
)
],
),
),
],
);
}
Adding a width and height to your Positioned widget will make it appear if you want to use top/left/bottom/right