flutter 创建自定义textformfield

46scxncf 于 2023-04-22 发布在 Flutter

关注(0)|答案(4)|浏览(176)

我试图创建自定义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();
          }),
    );

flutter

来源：https://stackoverflow.com/questions/57442056/create-custom-textformfield

4条答案

按热度按时间

ct3nt3jp1#

您可以使用通用的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"),
      )

赞(0）回复(0）举报 2023-04-22

vhipe2zx2#

您可以在应用主题中定义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中主题的更多信息。

赞(0）回复(0）举报 2023-04-22

mzmfm0qo3#

您可以尝试自定义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')

赞(0）回复(0）举报 2023-04-22

tyky79it4#

class AppTextFormField extends StatelessWidget {
 final TextEditingController? ctrl;
 final String? hintText;
 final TextInputType? keyboardType;
 final Function? validator;
 final FocusNode? focusNode;
 final Function? onFieldSubmitted;

 const AppTextFormField(
  {Key? key,
  this.ctrl,
  this.hintText,
  this.keyboardType,
  this.onFieldSubmitted,
  this.focusNode,
  this.validator})
  : super(key: key);

@override
Widget build(BuildContext context) {
 return TextFormField(
  controller: ctrl,
  keyboardType: keyboardType,
  focusNode: focusNode,
  onFieldSubmitted: (value) => onFieldSubmitted!(value),
  validator: (input) => validator!(input),
  decoration: InputDecoration(
      hintText: hintText,
      label: Text(hintText.toString()),
      hintStyle: const TextStyle(color: Colors.grey),
      labelStyle: const TextStyle(color: Colors.black),
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
      ),
      focusedBorder: OutlineInputBorder(
        borderRadius: BorderRadius.circular(12),
        borderSide: const BorderSide(color: Colors.black),
      ),
      enabledBorder: OutlineInputBorder(
          borderRadius: BorderRadius.circular(12),
          borderSide: const BorderSide(color: Colors.grey))),
   );
 }}

赞(0）回复(0）举报 2023-04-22

我来回答

flutter 创建自定义textformfield

4条答案

相关问题

热门标签

最新问答