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

Question

Does anyone know how to create a border with text at the top like the following where is says "Create an account?

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

If you are using the material package, there is already a built-in solution. For example if you are designing a form and want one of the text fields to have the style you mentioned, you can do something like this for the text field:

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

Emulator screenshot:

Sources:

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

Answer 3

I don't think there's an Out-of-the-box widget to do so, but you can use a workaround, I have two suggestions here, but you may need to take care of the fixed measurements:

1- To use Stack/Positioned. here's the code:

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- Another way is to set the Title as the first element in the Content(Column or what ever) then use ~negative padding to pull it up to cross the line using:

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

here's an example:

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