Положение флаттера фиксированный эквивалент

Можно ли зафиксировать объект на экране, который остается фиксированным независимо от прокрутки?

Что-то похожее на CSS position fixed.

2 3
dart

2 ответа:

Вы можете абсолютно позиционировать дитя a Stack виджет с помощью Positioned виджет.

Минимальный пример ниже помещает Красное поле над представлением списка, помещая дочерний элемент в расположенный виджетпосле представления списка в дочерних элементах стека.

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

И вот оно внутри тела Scaffold. Если вы добавите больше элементов, вы обнаружите, что список прокручивается без перемещения Красного поля.

абсолютно позиционированный пример

6

Вы можете использоватьрасположенный виджет встеке виджет сAspectRatio виджетом и использовать % distance, как показано ниже.

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

Надеюсь, что это поможет вам....

1