如何将文本字段的标签转移到前缀图标的顶部而不是文本

Question

在flutter的textField中，当我们使用prefixIcon和label时，在focus模式下label的动画会转移到文本的顶部（而不是图标的顶部）。我不想使用 prefix 而不是 prefixIcon，因为当 textField 未处于焦点模式时 prefix 会隐藏。我需要我的前缀始终可见。喜欢 material designs text fields part 中的这些图片：

Answer 1

虽然有一些固定位置值，
这是我的实现，

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: MyHomePage(title: 'Flutter Demo Home Page'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  FocusNode _focusNode = FocusNode();
  bool textEditHasFocus = false;
  @override
  void initState() {
    super.initState();
    _focusNode.addListener(() {
      setState(() {
        textEditHasFocus = _focusNode.hasFocus;
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: _buildBody(),
      floatingActionButton: FloatingActionButton(
        onPressed: () {},
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }

  Widget _buildBody() {
    return Container(
      decoration: BoxDecoration(color: Colors.white),
      padding: new EdgeInsets.symmetric(
        vertical: 40.0,
        horizontal: 20,
      ),
      child: Stack(
        clipBehavior: Clip.none,
        children: <Widget>[
          Container(
            child: TextField(
              focusNode: _focusNode,
              decoration: InputDecoration(
                // hintText: textEditHasFocus ? '' : 'Label',
                // hintStyle: TextStyle(
                //   color: Colors.grey,
                // ),
                border: OutlineInputBorder(),
                focusedBorder: OutlineInputBorder(),
                contentPadding: EdgeInsets.only(left: 40),
              ),
            ),
          ),
          AnimatedPositioned(
            duration: Duration(milliseconds: 200),
            left: textEditHasFocus ? 10 : 40,
            top: textEditHasFocus ? -10 : 13,
            child: InkWell(
              onTap: () {
                _focusNode.requestFocus();
              },
              child: Container(
                padding: EdgeInsets.only(left: 3),
                color: Colors.white,
                child: Text('Label'),
              ),
            ),
          ),
          Positioned.fill(
            child: Align(
              alignment: Alignment.centerLeft,
              child: Container(
                padding: EdgeInsets.only(left: 10),
                color: Colors.transparent,
                child: Icon(Icons.favorite),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

Answer 2

你的 material designs text fields part link 如果我尝试相同的设计和你的需要，当你专注于 TextField labelText 显示在 prefixIcon 很多我发现他们的解决方案不正确

参考 prefixIcon 小部件文档 here 并查看给定的示例

参考 prefix 小部件文档 here

参考InputDecorationclasshere

当图标显示在 TextField 之外时尝试下面的代码

   TextFormField(
                decoration: InputDecoration(
                  icon: Icon(
                    Icons.favorite,
                  ),
                  border: OutlineInputBorder(),
                  labelText: 'Brand Description',
                  hintText: 'Brand Description Here',
                ),
              ),

你的结果屏幕没有焦点->

您的结果屏幕具有焦点->

如何将文本字段的标签转移到前缀图标的顶部而不是文本

How to transfer textfield's label to top of prefix Icon instead of text

flutter

dart

material-design

textfield

flutter-animation