Flutter position fixed equivalent

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....