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),
        ),
      ),
    ),
  ],
)

我不认为有一个开箱即用的小部件可以做到这一点，但你可以使用一个变通方案，我有两个建议在这里，但你可能需要照顾固定的测量：

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将其向上拉，以便使用以下命令跨越行：

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

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

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/