Блог

При использовании текста Unicode в flutter кажется, что в каждом символе много пробелов, что затрудняет выравнивание. В коде и на рисунке ниже я пытаюсь расположить 35 метров на перекрестных стрелках без пробелов между ними. Я также пытаюсь выровнять три звезды в начале по центру по вертикали со словом starburst, а затем выровнять по центру (35 м и стрелки), starburst и thee звезды, чтобы выровнять по центру друг с другом по вертикали.

 Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              children: [
                Text(
                  'u{2605}' * 3,
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                Text(
                  'Starburst',
                  style: TextStyle(
                    fontSize: 28.0,
                  ),
                ),
                Column(
                  children: [
                    Text(
                      '35m',
                      style: TextStyle(
                        fontSize: 18.0,
                      ),
                    ),
                    Text(
                      'u{2194}',
                      style: TextStyle(fontSize: 35.0),
                    ),
                  ],
                )
              ],
            ),
          ],
        ),
      ),
    );
 

Присвоить свойству crossAxisAlignment строки значение CrossAxisAlignment.center

 Row(
    crossAxisAlignment: CrossAxisAlignment.center
    children: [....
 

И

Присвоить свойству mainAxisAlignment столбца MainAxisAlignment.center

 Column(
    mainAxisAlignment: MainAxisAlignment.center
    children: [...
 

Вы можете использовать Stack вместо Column и выровнять текст в соответствии с вашими спецификациями пользовательского интерфейса:

Вывод с использованием столбца:

Вывод с использованием стека:

Полный код:

 return Scaffold(
      body: SafeArea(
        child: Column(
          children: [
            Row(
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Text(
                  'u{2605}' * 3,
                  style: TextStyle(
                    fontSize: 18.0,
                  ),
                ),
                Text(
                  'Starburst',
                  style: TextStyle(
                    fontSize: 28.0,
                  ),
                ),
//                 SizedBox(width: 5.0),
                Container(
                  width: 50.0,
                  child: Center(
                    child: Stack(
                      children: [
                        Positioned(
                          top: 4,
                          child: Text(
                            '35m',
                            style: TextStyle(
                              fontSize: 18.0,
                            ),
                          ),
                        ),
                        Text(
                          'u{2194}',
                          style: TextStyle(fontSize: 40.0),
                        ),
                      ],
                    ),
                  ),
                ),
              ],
            ),
          ],
        ),
      ),
    );
 

Возможно, вам придется немного настроить Stack дочерние элементы виджета, но я надеюсь, что этот ответ дает идею.