自定义按钮在子窗口小部件上具有默认的upperCase文本

Question

我正在尝试构建一个自定义按钮，默认情况下该文本为大写。

但是普通的RawMaterialButton带孩子时，我该如何修改它，因此文本始终是大写。

这是我的按钮

import 'package:flutter/material.dart';


class DemoButton extends MaterialButton {

  final BorderRadius borderRadius;

  const DemoButton ({
    this.borderRadius,
    Key key,
    @required VoidCallback onPressed,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    double elevation,
    Widget child,
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
  }) : assert(elevation == null || elevation >= 0.0),
  super(
        key: key,
        onPressed: onPressed,
        textColor: textColor,
        disabledTextColor: disabledTextColor,
        color: color,
        disabledColor: disabledColor,
        elevation: elevation,
        child: child,
        padding: padding,
        shape: shape,
      );

  Widget build(BuildContext context) {

    final ThemeData theme = Theme.of(context);
    final ButtonThemeData buttonTheme = ButtonTheme.of(context);

    return RawMaterialButton(
        onPressed: onPressed,
        clipBehavior: clipBehavior ?? Clip.none,
        fillColor: buttonTheme.getFillColor(this),
        textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),
        padding: buttonTheme.getPadding(this),
        shape: buttonTheme.getShape(this) == shape ? buttonTheme.getShape(this) : RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
        child: child,
      );

这是我尝试过的方法，但显然是错误的。

child: Text(''.toUpperCase()),

我也尝试过使用if条件作为形状，但无法将其概括化。

Answer 1

您可以在构造函数中使用String代替Widget

class DemoButton extends MaterialButton {

  final BorderRadius borderRadius;

  DemoButton({ // remove `const` keyword
    this.borderRadius,
    Key key,
    @required VoidCallback onPressed,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    double elevation,
    String text, // change this field
    EdgeInsetsGeometry padding,
    ShapeBorder shape,
  })
      : assert(elevation == null || elevation >= 0.0),
        super(
        key: key,
        onPressed: onPressed,
        textColor: textColor,
        disabledTextColor: disabledTextColor,
        color: color,
        disabledColor: disabledColor,
        elevation: elevation,
        child: Text(text.toUpperCase()),  // and set here `Text` with upperCase
        padding: padding,
        shape: shape,
      );
}

Answer 2

更新build方法。我使用if条件来检查通过的孩子是否为Text，如果是，我们从中取出data，将其分配给newChild并使其为{{1} }。

UpperCase

---

这是应该使用它的方式。

class DemoButton extends MaterialButton {
  final BorderRadius borderRadius;
  final bool upperCase;

  DemoButton({
    this.borderRadius,
    Key key,
    @required VoidCallback onPressed,
    Color textColor,
    Color disabledTextColor,
    Color color,
    Color disabledColor,
    double elevation,
    Widget child,
    EdgeInsetsGeometry padding,
    this.upperCase = true,
    ShapeBorder shape,
  })  : assert(elevation == null || elevation >= 0.0),
        super(
          key: key,
          onPressed: onPressed,
          textColor: textColor,
          disabledTextColor: disabledTextColor,
          color: color,
          disabledColor: disabledColor,
          elevation: elevation,
          child: child,
          padding: padding,
          shape: shape,
        );

  Widget build(BuildContext context) {
    var newChild = child;
    if (child is Text && upperCase) {
      Text text = child as Text;
      newChild = Text(text.data.toUpperCase(), style: text.style);
    }

    final ThemeData theme = Theme.of(context);
    final ButtonThemeData buttonTheme = ButtonTheme.of(context);

    return RawMaterialButton(
      onPressed: onPressed,
      clipBehavior: clipBehavior ?? Clip.none,
      fillColor: buttonTheme.getFillColor(this),
      textStyle: theme.textTheme.button.copyWith(color: buttonTheme.getTextColor(this)),
      padding: buttonTheme.getPadding(this),
      shape: buttonTheme.getShape(this) == shape ? buttonTheme.getShape(this) : RoundedRectangleBorder(borderRadius: BorderRadius.all(Radius.circular(20.0))),
      child: newChild,
    );
  }
}