Repository: flutter
Issue: Better textFormField label placement customization when focused and when value input- vertical floatingLabelAlignment feature.
Labels: a: text input,c: new feature,framework,f: material design,c: proposal,P2,team-design,triaged-design

## Use case

I want some fine tuned, detailed customization for my textFormField. Currently, when the field becomes focused (and permanently when a value is input) the floating label floats up to the border & cuts it. The label sits vertically in the centre of the border and  the label cuts the border. While this does look okay for some field configurations, such as some rectangular fields, it looks horrible for others. Specifically mine looks gross. I have a beautiful design from my designer and I want to keep with this.

This is a problem for me and my design, not specifically a problem with the textFormField.

Haven't found a package that does this but, here is some code that does solve this problem. It is a bit of a hack because it requires external state and container wrapping logic to exteriorly handle a textFormFields border outline. This is definitely NOT OPTIMUM and I do NOT want to have to use this solution. The full SO post can be found [here.](https://stackoverflow.com/questions/71053346/flutter-textfield-or-textformfield-label-inside-border-using-themedata/71056785?noredirect=1#comment129819628_71056785)
```
class TextFieldDesignPage extends StatefulWidget {
  TextFieldDesignPage({Key? key}) : super(key: key);

  @override
  _TextFieldDesignPageState createState() => _TextFieldDesignPageState();
}

class _TextFieldDesignPageState extends State<TextFieldDesignPage> {
  // Use it to change color for border when textFiled in focus
  FocusNode _focusNode = FocusNode();

  // Color for border
  Color _borderColor = Colors.grey;

  @override
  void initState() {
    super.initState();
    // Change color for border if focus was changed
    _focusNode.addListener(() {
      setState(() {
        _borderColor = _focusNode.hasFocus ? Colors.orange : Colors.grey;
      });
    });
  }

  @override
  void dispose() {
    _focusNode.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          margin: EdgeInsets.all(8),
          decoration: BoxDecoration(
            border: Border.all(color: _borderColor),
            borderRadius: BorderRadius.circular(4),
          ),
          child: TextField(
            focusNode: _focusNode,
            style: TextStyle(color: Colors.grey),
            keyboardType: TextInputType.number,
            decoration: InputDecoration(
              contentPadding: EdgeInsets.zero,
              border: InputBorder.none,
              labelText: "Amount",
              prefixIconConstraints: BoxConstraints(minWidth: 0, minHeight: 0),
              prefixIcon: Padding(
                padding: EdgeInsets.symmetric(vertical: 18, horizontal: 8),
                child: Text("₦", style: TextStyle(fontSize: 16, color: Colors.grey)),
              ),
            ),
          ),
        ),
      ),
    );
  }
}
```

Please take note that the label "Amount" floats to the TOP of the textFormField but does NOT touch or intercept the top border. This is EXACTLY what I would want and I think could be very useful. While this works, the code is hacky and not streamlined. This would also not work with theme for Outline borders for error, at least without the state that is proposed in the  hacky solution.
The hacky solution looks like this, PLEASE NOTE, this is exactly what is desired effect visually and functionally but the code aspect needs working into the very fabric of the textFormField API.
[![Solution](https://i.stack.imgur.com/iUK3E.gif)

Here is the default field behaviour and what I DO NOT WANT, please notice how the label cuts the border and is moved too high. 🤮 
[![](https://miro.medium.com/max/1176/1*nqBwbjdO9iwV2ATayY5oFw.png)

## Proposal

Here is my design example:
[![Screen-Shot-2022-08-27-at-8-44-52-PM.png](https://i.postimg.cc/RVhLhpPk/Screen-Shot-2022-08-27-at-8-44-52-PM.png)](https://postimg.cc/bsXtFgfg)<!--

The solution I can see (non code descriptive) is to provide a verticalFloatingAlignment property to customize the height the label floats to when focused or filled out. This would also require the textFormFields content to be slightly lower than normal to allow space for the floating label to share space in an aesthetic fashion.

No package does this that I could find.

Also [this](https://github.com/flutter/flutter/issues/63317) is very much the same issue/feature request. It has been closed and looks to be HUGELY misunderstood. The issue has NOT been solved and the feature does NOT exist.

Thank you for taking the time to help with this feature.