flutter - 自定义 Button 在子 Widget 上有默认的大写文本

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

更新 build 方法。我使用 if 条件来检查传递的子项是否是 Text，如果是，我们从中获取 data，并将其分配给 newChild 并使其成为 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,
    );
  }
}

---

这就是您应该如何使用它。

DemoButton(
   onPressed: () {},
   color: Colors.blue,
   upperCase: false, // set it to false 
   child: Text(
     "button",
     style: TextStyle(fontSize: 40, color: Colors.orange),
   ),
 )