Создать виджет точно в центре строки - Flutter

#flutter #dart #flutter-layout

#flutter #дротик #flutter-макет #dart

Вопрос:

Я хочу сделать кнопку «Нравится» и «Не нравится» (зеленый контейнер) точно в центре строки

Вот мой код

 Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
  children: <Widget>[
    Icon(Icons.comment),
    Container(
      width: 150,
      color: Colors.greenAccent,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Icon(Icons.keyboard_arrow_up),
          Stack(
            children: <Widget>[
              Container(
                width: 30,
                height: 10,
                color: Colors.black,
              ),
            ],
          ),
          Icon(Icons.keyboard_arrow_down),
        ],
      ),
    ),

Как это сделать?

Ответ №1:

Вы можете использовать стек с первым дочерним элементом в качестве строки, а вторым — в виде зеленого прямоугольника, выровненного по центру экрана. Проверьте это: код Dartpad

 Stack(fit: StackFit.expand, children: [
  // The icon and text in this row
  Row(
      mainAxisAlignment: MainAxisAlignment.spaceBetween,
      crossAxisAlignment: CrossAxisAlignment.center, // Align the items to the center vertically
      children: [Icon(Icons.message), Text('Current Date')]),
  // Draw the green container in the next layer of the stack above the row layer
  // Align it to center
  Align(
    alignment: Alignment.center,
    child: Container(
      width: 150,
      color: Colors.greenAccent,
      child: Row(
        mainAxisAlignment: MainAxisAlignment.spaceBetween,
        children: <Widget>[
          Icon(Icons.keyboard_arrow_up),
          Container(
            width: 30,
            height: 10,
            color: Colors.black,
          ),
          Icon(Icons.keyboard_arrow_down),
        ],
      ),
    ),
  )
]);

Примечание: Это гарантирует, что ваш зеленый прямоугольник все время находится точно в центре, но если размер экрана достаточно мал, зеленый прямоугольник будет скрывать элементы строки позади. Попробуйте уменьшить размер экрана в примере с dartpad, чтобы увидеть это поведение.