颤振，如何创建嵌入文本的边框？

Question

有人知道如何创建顶部带有文本的边框，如下所示“创建帐户？”

Answer 1

        Stack(
          children: <Widget>[
            Container(
              width: double.infinity,
              height: 200,
              margin: EdgeInsets.fromLTRB(20, 20, 20, 10),
              padding: EdgeInsets.only(bottom: 10),
              decoration: BoxDecoration(
                border: Border.all(
                    color: Color.fromARGB(255, 51, 204, 255), width: 1),
                borderRadius: BorderRadius.circular(5),
                shape: BoxShape.rectangle,
              ),
            ),
            Positioned(
                left: 50,
                top: 12,
                child: Container(
                  padding: EdgeInsets.only(bottom: 10, left: 10, right: 10),
                  color: Colors.white,
                  child: Text(
                    'Create an account',
                    style: TextStyle(color: Colors.black, fontSize: 12),
                  ),
                )),
          ],
        )

Answer 2

如果您使用的是材料包，则已经有内置的解决方案。例如，如果您正在设计表单，并且希望其中一个文本字段具有您提到的样式，则可以对文本字段执行以下操作：

TextFormField(
  style: TextStyle(fontSize: 20),
  decoration: InputDecoration(
    hintText: "Last Name",
    hintStyle: TextStyle(fontSize: 14),
    border: OutlineInputBorder(), // <-- This is the key
    labelText: "Last Name",
  ),
  validator: _FormValidators.validateName,
),

仿真器屏幕截图：

来源：

https://flutter-examples.com/create-text-input-textfield-widget-in-flutter/

Answer 3

我认为没有现成的小部件可以这样做，但是您可以使用一种解决方法，这里有两个建议，但是您可能需要注意固定的度量：

1-使用堆栈/定位。这是代码：

import 'package:flutter/material.dart';

class Demo extends StatelessWidget {
  // To be sure that Scaffold Background & text background always the same.
  Color backgroundColor = Colors.white;

  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: backgroundColor,
        body: Stack(
          children: <Widget>[
            Container(
              height: 300,
              margin: EdgeInsets.all(20.0),
              decoration:
                  BoxDecoration(border: Border.all(color: Colors.black26)),
            ),
            Positioned(
              top: 5.0,
              left: 30.0,
              right: 0.0,
              child: Row(
                children: <Widget>[
                  Flexible(
                    child: Container(
                      padding: EdgeInsets.symmetric(
                        horizontal: 8.0,
                      ),
                      decoration: new BoxDecoration(
                        color: backgroundColor,
                      ),
                      child: Text(
                        'مرحباً',
                        style: TextStyle(
                          color: Colors.black45,
                          fontSize: 18.0,
                          fontWeight: FontWeight.w500
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

---

2-另一种方法是将Title设置为Content（列或其他内容）中的第一个元素，然后使用〜负填充将其拉到横过线的位置：

// Negative padding
transform: Matrix4.translationValues(5.0, -14.0, 0.0),

这是一个例子：

import 'package:flutter/material.dart';

class Demo extends StatelessWidget {
  Color backgroundColor = Colors.white;

  Widget build(BuildContext context) {
    return SafeArea(
      child: Scaffold(
        backgroundColor: backgroundColor,
        body: Stack(
          children: <Widget>[
            Container(
              height: 300,
              width: 400,
              margin: EdgeInsets.all(20.0),
              decoration:
                BoxDecoration(border: Border.all(color: Colors.black26),),
              child: Column(
                crossAxisAlignment: CrossAxisAlignment.start,
                children: <Widget>[
                  Container(
                    // Negative padding
                    transform: Matrix4.translationValues(5.0, -14.0, 0.0),
                    padding: EdgeInsets.symmetric(
                      horizontal: 8.0,
                    ),
                    decoration: new BoxDecoration(
                      color: backgroundColor,
                    ),
                    child: Text(
                      'مرحباً',
                      style: TextStyle(
                          color: Colors.black45,
                          fontSize: 18.0,
                          fontWeight: FontWeight.w500
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}