文本字段中标签文本的周围颜色

Question

有人可以帮我吗

这是我的下面的代码

TextField(
    decoration: InputDecoration(
        filled: true,
        fillColor: Colors.white,
        focusedBorder: OutlineInputBorder(
          borderRadius:
              BorderRadius.all(Radius.circular(13)),
          borderSide: BorderSide(
              color: Colors.white,
              width: 2,
              style: BorderStyle.solid),
        ),
        border: OutlineInputBorder(),
        labelText: 'Username',
        labelStyle: TextStyle(
          color: Colors.black,
          fontSize: 20,
        ),
        hintText: 'Enter Name Here',
        hintStyle: TextStyle(
          color: Colors.black,
        )),
  )

这是我要求的屏幕截图：

Answer 1

Flutter在构建user interfaces方面提供了极大的灵活性，您可以结合各种已经提供的widgets来实现所需的设计。

我添加了您要实现的演示代码：

import 'package:flutter/material.dart';

class SO extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        // the parent widget of the custom textfield
        child: Container(
          padding: EdgeInsets.symmetric(horizontal: 10),
          height: 75,
          child: Stack(
            children: [
              // places the text field in the center of the stack widget
              Center(
                child: TextFormField(
                  decoration: InputDecoration(
                    border: OutlineInputBorder(
                      borderSide: BorderSide.none,
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    hintText: 'Shrek',
                    fillColor: Colors.white,
                    filled: true,
                  ),
                  textCapitalization: TextCapitalization.sentences,
                ),
              ),
              // use a positioned widget to achive the custom label
              Positioned(
                left: 15,
                child: AnimatedContainer(
                  duration: Duration(milliseconds: 300),
                  height: 21,
                  width: 93,
                  decoration: BoxDecoration(
                    borderRadius: BorderRadius.circular(20),
                    color: Colors.red,
                  ),
                  child: Center(
                    child: Text(
                      'Username',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 12,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

输出：