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

Я пытаюсь создать данные настраиваемой темы примерно так.

    class CustomTheme {
      static ThemeData get lightTheme {
        return ThemeData(
          textTheme: TextTheme(
            headline1: h1.copyWith(color: Color(0xff444444)),
            headline2: h2.copyWith(color: Color(0xff444444)),
            headline3: h3.copyWith(color: Color(0xff444444)),
            headline4: h4.copyWith(color: Color(0xff444444)),
            headline5: h5.copyWith(color: Color(0xff444444)),
            headline6: h6.copyWith(color: Color(0xff444444)),
            subtitle1: TextStyle(color: Color(0xff444444)),
            subtitle2: TextStyle(color: Color(0xff444444)),
            bodyText1: TextStyle(color: Color(0xff444444)),
            bodyText2: TextStyle(color: Color(0xff444444)),
          ),
textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(color: kButtonBorderColor)),
    backgroundColor: kButtonBackgroundColor,
  ),
),
        );
      }
      static ThemeData get darkTheme {
        return ThemeData(
          textTheme: TextTheme(
            headline1: h1.copyWith(color: Color(0xffebebeb)),
            headline2: h2.copyWith(color: Color(0xffebebeb)),
            headline3: h3.copyWith(color: Color(0xffebebeb)),
            headline4: h4.copyWith(color: Color(0xffebebeb)),
            headline5: h5.copyWith(color: Color(0xffebebeb)),
            headline6: h6.copyWith(color: Color(0xffebebeb)),
            subtitle1: TextStyle(color: Color(0xffebebeb)),
            subtitle2: TextStyle(color: Color(0xffebebeb)),
            bodyText1: TextStyle(color: Color(0xffebebeb)),
            bodyText2: TextStyle(color: Color(0xffebebeb)),
          ),
textButtonTheme: TextButtonThemeData(
  style: TextButton.styleFrom(
    shape: RoundedRectangleBorder(
          borderRadius: BorderRadius.circular(0.0),
          side: BorderSide(color: kButtonBorderColor)),
    backgroundColor: kButtonBackgroundColorDark,
  ),
),
        );
      }
    }

Мое требование: у меня есть два разных стиля кнопок (по 2 для каждого светлого и темного режима), как показано ниже.

2 разные кнопки для светлой темы

Для темной темы

Как вы можете видеть из моего кода, я могу указать только один цвет фона для своего стиля кнопки для светлой и темной темы. Я не могу установить дополнительную текстовую кнопку в теме данных. Как я могу установить эти 2 стиля кнопок в данных моей темы? или есть ли какой-либо другой способ обработки двух разных стилей как для светлой, так и для темной темы?


flutter dart flutter-theme darkmode
person Midhun Murali    schedule 10.06.2021    source источник
comment
попробуйте этот itnext.io/   -  person ghost deathrider    schedule 10.06.2021
comment
@ghostdeathrider вопрос не в том, как сделать светлую и темную тему, а в том, как иметь 2 разные темы кнопок одновременно в светлом или темном режиме.   -  person Guillaume Roux    schedule 10.06.2021

Ответы (1)


arrow_upward
1
arrow_downward

Вы не можете этого сделать. Как вы уже сами видели, класс ThemeData имеет только 1 свойство для каждого типа темы кнопок. Мой совет для вас - создать собственный виджет для вашей кнопки, используя виджет TextButtonTheme, чтобы переопределить тему по умолчанию, и Theme.of(context).brightness, чтобы определить, находитесь ли вы в светлом или темном режиме.

Вот пример кода, который может вам помочь:

class MyStyledButton extends StatelessWidget {
  final Widget child;
  final VoidCallback? onPressed;

  MyStyledButton({
    required this.child,
    required this.onPressed,
  });

  @override
  Widget build(BuildContext context) {
    final currentTheme = Theme.of(context);
    final isDarkTheme = currentTheme.brightness == Brightness.dark;
    return TextButtonTheme(
      data: TextButtonThemeData(
        style: TextButton.styleFrom(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(0.0),
          ),
          backgroundColor: isDarkTheme ? Color(0xffebebeb) : Color(0xff444444),
        ),
      ),
      child: TextButton(
        child: child,
        onPressed: onPressed,
      ),
    );
  }
}
person Guillaume Roux    schedule 10.06.2021