Flutter Textformfield 前缀文本

发布于 2025-01-11 08:35:53 字数 1800 浏览 1 评论 0原文

我正在尝试创建一个带有前缀文本的文本表单字段，如下图所示。这是在输入任何文本之前

这是输入文本后的

这是我编写的代码

                TextFormField(
                  decoration: InputDecoration(
                    prefixIcon: Text(
                      '+254',
                      textAlign: TextAlign.center,
                      style: theme.textTheme.bodyText2!.copyWith(
                          color: Color(0xff000000),
                          fontWeight: FontWeight.w500),
                    ),
                    hintText: getTranslated(context, "label_hint")!,
                    hintStyle: theme.textTheme.bodyText2!.copyWith(
                      color: primaryLight.withOpacity(0.75),
                      fontWeight: FontWeight.w400,
                    ),
                    fillColor: const Color(0xffF5F5F5),
                    enabledBorder: OutlineInputBorder(
                      borderSide:
                          const BorderSide(width: 1, color: Color(0xffCCCCCC)),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(width: 1, color: Color(0xffF38E30)),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),

这是我的尝试的样子

我想实现接近前两张图片的效果，我可以在代码中更改什么

原文

I am trying to create a textformfield with a prefix text that looks the images below. This one is before entering any text

and this is after entering text

This is the code I have written

                TextFormField(
                  decoration: InputDecoration(
                    prefixIcon: Text(
                      '+254',
                      textAlign: TextAlign.center,
                      style: theme.textTheme.bodyText2!.copyWith(
                          color: Color(0xff000000),
                          fontWeight: FontWeight.w500),
                    ),
                    hintText: getTranslated(context, "label_hint")!,
                    hintStyle: theme.textTheme.bodyText2!.copyWith(
                      color: primaryLight.withOpacity(0.75),
                      fontWeight: FontWeight.w400,
                    ),
                    fillColor: const Color(0xffF5F5F5),
                    enabledBorder: OutlineInputBorder(
                      borderSide:
                          const BorderSide(width: 1, color: Color(0xffCCCCCC)),
                      borderRadius: BorderRadius.circular(5),
                    ),
                    focusedBorder: OutlineInputBorder(
                      borderSide: const BorderSide(width: 1, color: Color(0xffF38E30)),
                      borderRadius: BorderRadius.circular(5),
                    ),
                  ),
                ),

This is how my attempt looks

I'd like to achieve something close to the first two images, what can I change in my code

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

我不在是我 2025-01-18 08:35:53

将 Text 小部件包装在 Row 小部件中，并将其 mainAxisSize 属性分配给 MainAxisSize.min 和 mainAxisAlignment< /code> 属性到 mainAxisAlignment.center 以实现带有提示文本的 prefixText 内联

尝试此代码 -

   TextFormField(
      decoration: InputDecoration(
        prefixIcon: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              '+254',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
        hintText: 'mobile number',
        hintStyle: const TextStyle(
          color: Colors.grey,
          fontWeight: FontWeight.w400,
        ),
        fillColor: const Color(0xffF5F5F5),
        enabledBorder: OutlineInputBorder(
          borderSide:
              const BorderSide(width: 1, color: Color(0xffCCCCCC)),
          borderRadius: BorderRadius.circular(5),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide:
              const BorderSide(width: 1, color: Color(0xffF38E30)),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    ),

Wrap Text widget in a Row widget and assign it's mainAxisSize property to MainAxisSize.min and mainAxisAlignment property to mainAxisAlignment.center to achieve the prefixText inline with hint text

try this code -

   TextFormField(
      decoration: InputDecoration(
        prefixIcon: Row(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Text(
              '+254',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.w400,
              ),
            ),
          ],
        ),
        hintText: 'mobile number',
        hintStyle: const TextStyle(
          color: Colors.grey,
          fontWeight: FontWeight.w400,
        ),
        fillColor: const Color(0xffF5F5F5),
        enabledBorder: OutlineInputBorder(
          borderSide:
              const BorderSide(width: 1, color: Color(0xffCCCCCC)),
          borderRadius: BorderRadius.circular(5),
        ),
        focusedBorder: OutlineInputBorder(
          borderSide:
              const BorderSide(width: 1, color: Color(0xffF38E30)),
          borderRadius: BorderRadius.circular(5),
        ),
      ),
    ),

回复收藏 0 原文