创建自定义文本框

Question

我正在尝试创建自定义，textformfield因此我只能在一个地方轻松设置样式。但目前我被困在如何通过验证和保存过程。有人可以给我一个textformfield我可以使用的自定义小部件的工作示例吗？我一整天都在寻找它，但找不到一个。谢谢你的帮助。

这里的例子是凸起的按钮：

import 'package:flutter/material.dart';
import 'package:wkndr/resources/constants.dart';

class CustomButton extends StatelessWidget {
  CustomButton({@required this.text, @required this.onPressed});

  final String text;
  final GestureTapCallback onPressed;

  @override
  Widget build(BuildContext context) {
    return RaisedButton(
      color: colorPrimary,
      child: Text(text, style: TextStyle(fontSize: 17.0, color: colorWhite)),
      onPressed: onPressed,
      shape: new RoundedRectangleBorder(
          borderRadius: new BorderRadius.circular(30.0)),
    );
  }
}

调用自定义凸起按钮：

final _signUpButton = Container(
      child: CustomButton(
          text: sign_up,
          onPressed: () {
            _signUp();
          }),
    );

Answer 1

您可以为样式制作通用的 InputDecoration，而不是制作自定义的 textformfield

class CommonStyle{
  static InputDecoration textFieldStyle({String labelTextStr="",String hintTextStr=""}) {return InputDecoration(
    contentPadding: EdgeInsets.all(12),
    labelText: labelTextStr,
    hintText:hintTextStr,
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10),
    ),
  );}
}

例子：-

TextFormField(
        controller: usernameController,
        keyboardType: TextInputType.text,
        textInputAction: TextInputAction.next,
        focusNode: userFocus,
        onFieldSubmitted: (_) {
          FocusScope.of(context).requestFocus(passFocus);
        },
        validator: (value) => emptyValidation(value),
        decoration: CommonStyle.textFieldStyle(labelTextStr:"Username",hintTextStr:"Enter Username"),
      )

Answer 2

您可以InputDecorationTheme在应用主题中定义以设置文本字段的全局样式。

MaterialApp(
  title: title,
  theme: ThemeData(
    brightness: Brightness.dark,
    ...
    inputDecorationTheme: InputDecorationTheme(
        fillColor: Colors.blue,
        filled: true,
        focusedBorder: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.white)),
        border: OutlineInputBorder(
            borderSide: BorderSide(color: Colors.blue)),
        hintStyle: TextStyle(color: Colors.white.withAlpha(80)),
    ),
  )
);

您还可以使用 Theme 小部件更改特定小部件的主题属性：

Theme(
  data: Theme.of(context).copyWith(inputDecorationTheme: /*new decoration theme here*/),
  child: Scaffold(
    body: ...,
  ),
);

在Flutter 文档中查看有关主题的更多信息。