Как выровнять значок OutlineButton по левому краю во Flutter

Как выровнять по левому краю значок OutlineButton во Flutter? Icon можно добавить следующим образом, но значок и текст на кнопке выровнены по центру. Есть ли способ выровнять значок по левому краю, а текст по центру?

return new OutlineButton.icon(
  onPressed: onPressed,
  label: new Text(title),
  icon: icon,
  highlightedBorderColor: Colors.orange,
  color: Colors.green,
  borderSide: new BorderSide(color: Colors.green),
  shape: new RoundedRectangleBorder(
      borderRadius: new BorderRadius.circular(5.0)));

flutter dart flutter-layout button alignment
person Chatura Dilan    schedule 04.10.2018    source источник

Ответы (3)


arrow_upward
33
arrow_downward

Есть много способов сделать это, но невозможно использовать конструктор фабрики, о котором вы упомянули OutlineButton.icon, вы можете пойти глубже и проверить исходный код, чтобы увидеть, как он строит виджет.

Вы можете создать свой собственный Widget, чтобы поместить значок слева и текст по центру.

Также вы можете использовать виджет OutlineButton и передать Stack / Row в качестве дочернего элемента, проверьте этот образец

OutlineButton(
    onPressed: () => null,
    child: Stack(
        children: <Widget>[
            Align(
                alignment: Alignment.centerLeft,
                child: Icon(Icons.access_alarm)
            ),
            Align(
                alignment: Alignment.center,
                child: Text(
                    "Testing",
                    textAlign: TextAlign.center,
                )
            )
        ],
    ),
    highlightedBorderColor: Colors.orange,
    color: Colors.green,
    borderSide: new BorderSide(color: Colors.green),
    shape: new RoundedRectangleBorder(
        borderRadius: new BorderRadius.circular(5.0)
    )
)
person diegoveloper    schedule 04.10.2018

arrow_upward
2
arrow_downward

Есть общие подходы, которые вы можете попробовать, я реализовал это:

   OutlineButton(
        onPressed: () => null,
        child: Stack(
          alignment: Alignment.centerLeft,
          children: <Widget>[
            Icon(Icons.save_alt_rounded),
            Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Text('Title'),
              ],
            ),
          ],
        ),
        highlightedBorderColor: Colors.orange,
        color: Colors.green,
        borderSide: new BorderSide(color: Colors.green),
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(5.0)
        )
    );

введите описание изображения здесь

person Paresh Mangukiya    schedule 03.11.2020

arrow_upward
0
arrow_downward

Я оборачиваю текстовый виджет расширенным виджетом.

         OutlinedButton.icon(

                      icon: Icon(
                        Icons.lock,
                        color: MyAppTheme.accentColor,
                        size: 20,
                      ),
                      label: Expanded(
                        child: Text(
                          '      Login',
                          style: TextStyle(
                              color: MyAppTheme.primaryColor,
                              fontSize: 16),
                        ),
                      ),
                      style: OutlinedButton.styleFrom(
                          shape: RoundedRectangleBorder(
                              borderRadius: new BorderRadius.circular(5.0)),
                          side: BorderSide(color: MyAppTheme.primaryColor)
                      ),
                     
                    ),
person Shan Mk    schedule 06.07.2021