将星号定位在 Flutter TextField 中的提示文本旁边

Question

我在 Flutter 中开发了一个自定义输入小部件，以简化在注册表单中添加输入字段的过程。该小部件提供了一系列可自定义的参数，允许灵活配置以满足各种表单要求。

但是，我在输入字段中定位星号 (*) 时遇到了问题。目的是让星号立即出现在文本输入之后，通常表明该字段是必填的。但是，在实现后，星号始终出现在输入字段的最右侧部分，而不是按预期与文本输入相邻。

import 'package:flutter/material.dart';

enum InputRestriction {
  text,
  number,
  textAndNumber,
}

Widget Input({
  double borderRadius = 16,
  double width = double.infinity,
  double height = 60,
  double left = 0,
  double right = 0,
  double top = 0,
  double bottom = 0,
  String hint = "",
  double fontSize = 16,
  bool prefixIconShow = false,
  bool suffixIconShow = false,
  IconData prefixIconName = Icons.person,
  IconData suffixIconName = Icons.lock,
  TextInputType textInputType = TextInputType.text,
  Color color = AppColors.black,
  required TextEditingController controller,
  bool password = false,
  Color containerBackgroundColor = AppColors.white,
  Color textFieldBackgroundColor = AppColors.white,
  double contentPaddingLeft = 0,
  double contentPaddingRight = 0,
  TextAlign textalign = TextAlign.left,
  RichText? suffix,
  List<String>? autofillHints,
  int maxLines = 1,
  TextOverflow overflow = TextOverflow.clip,
  required InputRestriction inputRestriction,
}) {
  TextInputType getTextInputType() {
    switch (inputRestriction) {
      case InputRestriction.text:
        return TextInputType.text;
      case InputRestriction.number:
        return TextInputType.number;
      case InputRestriction.textAndNumber:
        return TextInputType.text;
      default:
        return TextInputType.text;
    }
  }

  return Visibility(
    visible: true,
    child: Container(
      width: width,
      height: height,
      padding:
          EdgeInsets.only(left: left, right: right, top: top, bottom: bottom),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
        color: containerBackgroundColor,
      ),
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
          color: textFieldBackgroundColor,
        ),
        child: Stack(
          alignment: Alignment.centerRight,
          children: [
            TextField(
              textAlign: textalign,
              keyboardType: getTextInputType(),
              controller: controller,
              obscureText: password,
              cursorColor: color,
              maxLines: maxLines,
              style: TextStyle(
                fontSize: fontSize,
                fontFamily: "Poppins",
                fontWeight: FontWeight.w400,
                color: AppColors.black,
              ),
              decoration: InputDecoration(
                border: InputBorder.none,
                hintText: hint,
                contentPadding: EdgeInsets.only(
                  left: contentPaddingLeft,
                  right: contentPaddingRight,
                ),
                suffixIcon: suffixIconShow
                    ? Icon(
                        suffixIconName,
                        color: color,
                      )
                    : null,
              ),
              autofillHints: autofillHints,
            ),
            Visibility(
              visible: suffix != null,
              child: Padding(
                padding: const EdgeInsets.only(right: 8.0),
                child: suffix ?? Container(),
              ),
            ),
          ],
        ),
      ),
    ),
  );
}

我想要 。但是当我使用它时，星号出现在输入的最右侧。

我就是这么称呼它的

Expanded(
      child: Input(
    inputRestriction: InputRestriction.text,
    controller: name,
    fontSize: responsive.screenWidth / 30,
    hint: "İsim",
    textFieldBackgroundColor:
        AppColors.RegisterPageTextFieldColor,
    contentPaddingLeft: responsive.screenWidth / 32.72,
    suffix: RichText(
      softWrap: true,
      text: TextSpan(
        text: '* ',
        style: TextStyle(
          color: AppColors.darkMagenta,
        ),
        children: [
          TextSpan(
            text: '',
            style: TextStyle(
              color: AppColors.darkMagenta,
            ),
          ),
        ],
      ),
    ),
  )),

Answer 1

import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: Input(hint: "İsim"),
        ),
      ),
    );
  }
}

Widget Input({
  double borderRadius = 16,
  double width = double.infinity,
  double height = 60,
  double left = 0,
  double right = 0,
  double top = 0,
  double bottom = 0,
  String hint = "",
  double fontSize = 16,
  bool prefixIconShow = false,
  bool suffixIconShow = false,
  IconData prefixIconName = Icons.person,
  IconData suffixIconName = Icons.lock,
  TextInputType textInputType = TextInputType.text,
  Color color = Colors.black,
  bool password = false,
  Color containerBackgroundColor = Colors.white,
  Color textFieldBackgroundColor = Colors.white,
  double contentPaddingLeft = 0,
  double contentPaddingRight = 0,
  TextAlign textalign = TextAlign.left,
  RichText? suffix,
  List<String>? autofillHints,
  int maxLines = 1,
  TextOverflow overflow = TextOverflow.clip,
}) {
  return Visibility(
    visible: true,
    child: Container(
      width: width,
      height: height,
      padding:
          EdgeInsets.only(left: left, right: right, top: top, bottom: bottom),
      decoration: BoxDecoration(
        borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
        color: containerBackgroundColor,
      ),
      child: Container(
        alignment: Alignment.center,
        decoration: BoxDecoration(
          borderRadius: BorderRadius.all(Radius.circular(borderRadius)),
          color: textFieldBackgroundColor,
        ),
        child: TextField(
          textAlign: textalign,
          obscureText: password,
          cursorColor: color,
          maxLines: maxLines,
          style: TextStyle(
            fontSize: fontSize,
            fontWeight: FontWeight.w400,
            color: Colors.black,
          ),
          decoration: InputDecoration(
            label: RichText(
              softWrap: true,
              text: TextSpan(
                text: hint,
                style: TextStyle(
                  color: Colors.black,
                ),
                children: [
                  TextSpan(
                    text: '* ',
                    style: TextStyle(
                      color: Colors.blue,
                    ),
                  ),
                ],
              ),
            ),
            floatingLabelBehavior: FloatingLabelBehavior.never,
            border: InputBorder.none,
            contentPadding: EdgeInsets.only(
              left: contentPaddingLeft,
              right: contentPaddingRight,
            ),
            suffixIcon: suffixIconShow
                ? Icon(
                    suffixIconName,
                    color: color,
                  )
                : null,
          ),
          autofillHints: autofillHints,
        ),
      ),
    ),
  );
}

我使用输入装饰器的标签小部件作为示例，删除了一些我不喜欢颜色的组件，但当然你不需要，所以现在你必须应用一些逻辑来解析 Textspan 而不是小部件，或者也许只是让它们通过一种颜色和一个

bool isRequired

（或

enum Required {asterisk, check, exclamation}

），您将为它们绘制一个重要的支票