Flutter 基于 figma 创建小部件到代码插件

Question

我有一个 figma 设计，我使用 figma 编写插件。这是link。正如您所料，该插件不会生成Buttons、TextFields 或任何其他小部件。它只生成文本。

现在我从 Figmna 获得了我的电子邮件字段的代码：

Container(
   width: 327,
   height: 56,
   child: Row(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
         children: [
              SizedBox(
                 width: 327,
                 height: 56,
                     child: Material(
                         color: Color(0xfff8f8fa),
                         borderRadius: BorderRadius.circular(18),
                         child: Padding(
                            padding: const EdgeInsets.only(
                               left: 24,
                                  right: 178,
                            ),
                            child: Row(
                                mainAxisSize: MainAxisSize.min,
                                mainAxisAlignment: MainAxisAlignment.start,
                                  crossAxisAlignment: CrossAxisAlignment.center,
                                  children: [
                                    Text(
                                      "sag7@gmail.com",
                                      style: TextStyle(
                                        color: Color(0xff18172b),
                                        fontSize: 14,
                                        fontFamily: "Poppins",
                                        fontWeight: FontWeight.w500,
                                      ),
                                    ),
                                  ],
                                ),
                          ),
                     ),
             ),
       ],
   ),
),

我需要将其转换为文本框。现在这是我迄今为止尝试过的，而不是行：

TextFormField(
  decoration: InputDecoration(
    border: UnderlineInputBorder(),
  ),
);

但我不想要边框，当我将 Text 转换为 TextField 时，当我想将整个容器转换为文本字段时，它只会给我一个简单的带下划线的文本字段。

我在这里错过了什么？

这是我想要的视觉示例：

Answer 1

如果您想删除TextField 的下划线，您需要使用InputBorder.none 而不是UnderlineInputBorder()。

关于您尝试实现的布局，我制作了一个非常基本的代码示例，您可以尝试对其进行编辑以获得您想要的结果。

截图：

您可以使用文本字段并单击Signin 和Register 按钮可单击。

示例中使用的完整代码：

import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      home: MyWidget(),
    );
  }
}

class MyWidget extends StatefulWidget {
  @override
  State<MyWidget> createState() => _MyWidgetState();
}

class _MyWidgetState extends State<MyWidget> {
  Widget _buildEmailField() => Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.2),
          borderRadius: BorderRadius.circular(18),
        ),
        child: TextField(
          decoration: InputDecoration(border: InputBorder.none),
        ),
      );

  Widget _buildPasswordField() => Container(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 4),
        decoration: BoxDecoration(
          color: Colors.grey.withOpacity(0.2),
          borderRadius: BorderRadius.circular(18),
        ),
        child: TextField(
          decoration: InputDecoration(border: InputBorder.none),
          obscureText: true,
          style: TextStyle(
            letterSpacing: 5.4,
            fontSize: 20,
            fontWeight: FontWeight.bold,
          ),
        ),
      );

  Widget _buildLabel(String label) => Align(
        alignment: Alignment.center,
        child: Padding(
          padding: const EdgeInsets.symmetric(vertical: 8),
          child: Text(label, style: TextStyle(fontWeight: FontWeight.bold)),
        ),
      );

  Widget _buildButton() => Container(
        padding: const EdgeInsets.symmetric(vertical: 12),
        decoration: BoxDecoration(
          color: Colors.green,
          borderRadius: BorderRadius.circular(18),
        ),
        child: TextButton(
          child: Text('Signin', style: TextStyle(color: Colors.white)),
          onPressed: () => print('Signin'),
        ),
      );

  Widget _buildRegisterBtn() => Align(
        alignment: Alignment.center,
        child: TextButton(
          onPressed: () => print('Register'),
          child: Text(
            "Don't have an account? Register",
            style: TextStyle(color: Colors.black),
          ),
        ),
      );

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      body: ListView(
        padding: const EdgeInsets.all(16),
        children: [
          _buildLabel('Email'),
          _buildEmailField(),
          _buildLabel('Password'),
          _buildPasswordField(),
          const SizedBox(height: 28),
          _buildButton(),
          const SizedBox(height: 20),
          _buildRegisterBtn(),
        ],
      ),
    );
  }
}

Try the code on DartPad