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

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

我认为没有开箱即用的小部件可以做到这一点，但您可以使用解决方法，我这里有两个建议，但您可能需要注意固定的测量值：

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-另一种方法是将标题设置为内容中的第一个元素（列或其他元素），然后使用〜负填充将其向上拉以跨线：

// 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
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Answer 3

Stack(
children: <Widget>[
Container(
  margin: EdgeInsets.symmetric(horizontal: 15, vertical: 10),
  decoration: BoxDecoration(
    border: Border.all(color: Colors.black, width: 1),
    borderRadius: BorderRadius.circular(20),
    shape: BoxShape.rectangle,
  ),
  alignment: Alignment.center,
  child: DefaultTextStyle(
    style: const TextStyle(decoration: TextDecoration.none),
    child: Text(
      'Watch lesson',
      style: TextStyle(
        fontSize: 20,
        fontWeight: FontWeight.w400,
        fontFamily: 'Fredoka',
        color: Colors.black,
      ),
    ),
  ),
),
Positioned(
  left: 30,
  top: 3,
  child: Container(
    color: Colors.white,
    child: DefaultTextStyle(
      style: const TextStyle(decoration: TextDecoration.none),
      child: Text(
        'Coming soon...',
        style: TextStyle(
          fontSize: 12,
          fontWeight: FontWeight.w400,
          fontFamily: 'Fredoka',
          color: Colors.black,
        ),
      ),
    ),
  ),
 ),
],
[enter image description here][1]

Answer 4

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

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/