Заполнение Flutter TextButton

В выпуске Flutter 2.0 FlatButton был заменен на TextButton.

Следовательно, свойство padding больше не доступно напрямую, а как ButtonStyle свойство.

Моя проблема в том, как я могу его установить, поскольку он больше не доступен как EdgeInsets?

      TextButton(
   style: new ButtonStyle(
     padding: ???,
   ),
   //padding: const EdgeInsets.all(0),   //NOT AVAILABLE
   child: Text("Support", style: Theme.of(context).textTheme.headline2),
      onPressed: () => {Navigator.pushNamed(context, SupportScreen().routeName)},
   ),

3 ответа

Вот мой код для TextButton

      Container(
    child: TextButton(
    style: ButtonStyle(
        backgroundColor:
            MaterialStateProperty.all<Color>(Colors.green),
        padding: MaterialStateProperty.all<EdgeInsets>(
            EdgeInsets.all(10)),
    ),
    child: Text(
        "Login",
        style: TextStyle(
        height: 1.0,
        fontSize: 30,
        color: Colors.white,
        ),
    ),
    onPressed: () => {print("login")},
    ),  
),

см. Я использовал свойство стиля для виджета TextButton, чтобы вставить отступы и фон, и для обоих я использовал MaterialStateProperty.all

Сделать это можно, например, так:

      TextButton(
              onPressed: () {},
              child: Text('Hello World'),
              style: TextButton.styleFrom(
                padding: EdgeInsets.fromLTRB(10, 10, 10, 10),
                primary: Colors.teal,
              ),
            ),

TextButton.styleFrom () ссылка на документ: https://api.flutter.dev/flutter/material/TextButton-class.html

пример и варианты игры с новой кнопкой: https://www.woolha.com/tutorials/flutter-using-textbutton-widget-examples

Вы можете установить разные значения для MaterialStates:

      class TextButtonPadding extends StatelessWidget {
  EdgeInsets _getPadding(Set<MaterialState> states) {
    const interactiveStates = <MaterialState>{
      MaterialState.pressed,
      MaterialState.hovered,
    };
    if (states.any(interactiveStates.contains)) {
      return EdgeInsets.all(30.0);
    }
    return EdgeInsets.zero;
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextButton(
          style: ButtonStyle(
            padding: MaterialStateProperty.resolveWith(_getPadding),
          ),
          onPressed: () {},
          child: Text(
            'Text Button',
          ),
        ),
      ),
    );
  }
}

Или установите одно значение для всех MaterialStates:

      class TextButtonPadding extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Container(
        child: TextButton(
          style: ButtonStyle(
            padding: MaterialStateProperty.all(
              EdgeInsets.all(30.0),
            ),
          ),
          onPressed: () {},
          child: Text(
            'Text Button',
          ),
        ),
      ),
    );
  }
}

См. Https://api.flutter.dev/flutter/material/MaterialStateProperty-class.html.

Другие вопросы по тегам