Блог

У меня есть этот код в моем проекте Flutter:

 Row(
   children: <Widget>[
     Align(
         alignment: Alignment.centerLeft,
         child: Icon(
             Icons.face,
             size: _mediaWidth*0.09,
             color: Colors.grey[600],
         )
     ),
     Container(
       margin: EdgeInsets.symmetric(
         vertical: 10,
         horizontal: _mediaWidth*0.03
       ),
       child: Stack(
         children: <Widget>[
             Text(
               "A",
               style: TextStyle(
                 fontSize: _mediaWidth*0.08,
                 color: Colors.grey[600]
               ),
           ),
           Align(
             alignment: Alignment.centerRight,
             child: Icon(Icons.add)
           ),
           Divider(height:10)
         ]
       ),
       width: _mediaWidth*0.85,
       height: _mediaHeight*0.05,
       decoration: BoxDecoration(
         border: Border(
           bottom: BorderSide(
               color: Colors.grey[400],
               width: 1,
           )
         )
       ),
     ),
   ]
 ),
 

И я получаю это:

Я хочу увеличить пробел между текстом и подчеркиванием. Я попытался добавить в контейнер нижнее заполнение, однако оно только скрыло текст:

Как я могу правильно добавить пробел между текстом и нижней границей контейнера?

Согласно вашему коду, Container имеет жестко запрограммированное height свойство:

 height: _mediaHeight*0.05
 

Добавление a padding без увеличения высоты Widget приводит к обрезке содержимого.

Полный пример приведен ниже:

 Row(
  children: <Widget>[
    Align(
        alignment: Alignment.centerLeft,
        child: Icon(
            Icons.face,
            size: _mediaWidth*0.09,
            color: Colors.grey[600],
        )
    ),
    Container(
      margin: EdgeInsets.symmetric(
        vertical: 10,
        horizontal: _mediaWidth*0.03
      ),
      padding: EdgeInsets.only(bottom: 10),
      child: Stack(
        children: <Widget>[
            Text(
              "A",
              style: TextStyle(
                fontSize: _mediaWidth*0.08,
                color: Colors.grey[600]
              ),
          ),
          Align(
            alignment: Alignment.centerRight,
            child: Icon(Icons.add)
          ),
          Divider(height:10)
        ]
      ),
      width: _mediaWidth*0.85,
      height: _mediaHeight*0.10, // we should modify the height as well
      decoration: BoxDecoration(
        border: Border(
          bottom: BorderSide(
              color: Colors.grey[400],
              width: 1
          )
        )
      ),
    ),
  ],
),