Flutter указывает тему кнопки для каждого типа кнопки

Я работаю над приложением Flutter, и мне нужно указать пользовательский ButtonTheme для каждого типа кнопки, т.е. приподнятой, очерченной и плоской.

Параметр, который я нашел в классе ThemeData, — это только buttonTheme, а у него есть ButtonThemeData, который определен для всех кнопок:

static ThemeData darkTheme = ThemeData(
   buttonTheme: const ButtonThemeData(
      colorScheme: ColorScheme(
        primary: Color(Constants.PrimaryColor),
        primaryVariant: Color(Constants.PrimaryVariant),
      ),
      textTheme: ButtonTextTheme.normal,
    ),
)

Вопрос теперь, как я могу определить отдельную тему для каждого типа кнопки, чтобы изменить, например, фон и цвет текста?


flutter flutter-theme
person Amani Elsaed    schedule 23.09.2020    source источник
comment
Как насчет создания отдельного виджета для разных типов кнопок, которые вам нужны (выпуклые, контурные и плоские), оберните эти виджеты Theme и присвойте им предпочтительный ThemeData. Теперь вы можете повторно использовать эти автономные виджеты там, где это необходимо.   -  person void    schedule 23.09.2020
comment
привет @Amani, @void прав, ты можешь использовать theme. если вам нужен пример, пожалуйста, дайте мне знать, я поделюсь с вами. Спасибо   -  person Abhishek Ghaskata    schedule 23.09.2020
comment
Привет @AbhishekGhaskata, ты уже можешь добавить пример. :)   -  person void    schedule 23.09.2020

Ответы (2)


arrow_upward
2
arrow_downward 

class SubmitButton extends StatelessWidget {
  final String title;
  final Function onPressed;
  const SubmitButton({Key key, this.title, this.onPressed}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Theme(
      data: ThemeData(
      buttonTheme: const ButtonThemeData(
      colorScheme: ColorScheme(
        primary: Color(Constants.PrimaryColor),
        primaryVariant: Color(Constants.PrimaryVariant),
      ),
      textTheme: ButtonTextTheme.normal,
    ),   
   ),
      child: RaisedButton(
        shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(18.0),
          side: BorderSide(color: Colors.red),
        ),
        color: Colors.red,
        // color: Colors.transparent,
        // disabledColor: Colors.grey
        textColor: Colors.white,
        onPressed: onPressed,
        child: Container(
          child: Text(title),
        ),
      ),
    );
  }
}

здесь вы можете заменить RaisedButton на FlatButton или контурную кнопку и придать определенную тему всем типам кнопок. так что вы можете использовать его повторно.

и вы можете использовать его так:

   SubmitButton(
                  title: "View Details",
                  onPressed: () {
                    Navigator.push(
                      context,
                      MaterialPageRoute(
                        builder: (_) => GeneratePDF(),
                      ),
                    );
                  },
                ),
person Abhishek Ghaskata    schedule 23.09.2020

arrow_upward
2
arrow_downward

На мой взгляд, лучший способ — создать свой собственный виджет, работающий как кнопка. У вас будет больше контроля над тем, что будет делать кнопка. https://flutter.dev/docs/development/ui/interactive Таким образом вы сможет определить пользовательские обратные вызовы и избежать стандартного поведения обычных кнопок. Например, если вы хотите другую анимацию для определенной кнопки.

class MyFlatButtonCustomWidget extends Stateless/Stateful {

  @override
  Widget build(BuildContext context) {
   return Container{
      // create the shape of a button and add your custom widget tree and behavior
    } 
  }

}

Другим способом может быть создание пользовательского виджета, расширяющего виджет по умолчанию:

class MyFlatButton extends FlatButton {

}

Но вы также можете просто иметь

class MyFlatButton {

  @override
  Widget build(BuildContext context) {
   return FlatButton{
      // put your stylings here
    } 
  }

}

Если вы хотите, вы можете определить тему кнопок при определении ThemeData https://api.flutter.dev/flutter/material/ThemeData-class.html

theme: ThemeData(
       primarySwatch: Colors.green,
       splashColor: Colors.pink,
       buttonTheme: ButtonThemeData(
        // splashColor:Colors.pink,   //we don't define the splashColor in ButtonThemeDaa
        height:60
      )
   ),

В качестве источника я использовал: https://www.ernegonzal.com/theme-flutter-buttons/ хорошая статья на эту тему.

person Romeo    schedule 23.09.2020