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

您可以在应用程序主题中定义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(
  data: Theme.of(context).copyWith(inputDecorationTheme: /*new decoration theme here*/),
  child: Scaffold(
    body: ...,
  ),
);

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

Answer 2

您可以使用通用的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 3

您可以尝试自定义TextFormField。您可以轻松地使通用的TextFormField用于自定义TextFormField。您可以尝试这样。

第1步：首先创建一个dart类，即EditTextUtils
第2步：创建一个函数或方法，即getCustomEditTextArea

class EditTextUtils {
  TextFormField getCustomEditTextArea(
      {String labelValue = "",
      String hintValue = "",
      bool validation,
      TextEditingController controller,
      TextInputType keyboardType = TextInputType.text,
      TextStyle textStyle,
      String validationErrorMsg}) {
    TextFormField textFormField = TextFormField(
      keyboardType: keyboardType,
      style: textStyle,
      controller: controller,
      validator: (String value) {
        if (validation) {
          if (value.isEmpty) {
            return validationErrorMsg;
          }
        }
      },
      decoration: InputDecoration(
          labelText: labelValue,
          hintText: hintValue,
          labelStyle: textStyle,
          border: OutlineInputBorder(borderRadius: BorderRadius.circular(5.0))),
    );
    return textFormField;
  }
}

示例：您可以尝试这样

EditTextUtils().getCustomEditTextArea(
                    labelValue: 'label',
                    hintValue: 'hint',
                    validation: true,
                    controller: controller_name,
                    keyboardType: TextInputType.number,
                    textStyle: textStyle,
                    validationErrorMsg: 'error_msg')

创建自定义textformfield

3 个答案: