flutter : How to center an icon next to hint text inside an input decoration?

Question

Example of desired effect

我有一个TextField与 InputDecoration我在其中设置了 hintText和一个 prefixIcon ，但是prefixIcon我正在使用的属性始终会将图标一直拉到左侧。

TextField(
  textAlign: TextAlign.center,
  decoration: InputDecoration(
    contentPadding: EdgeInsets.fromLTRB(0, 30, 0, 30),
    prefixIcon: Icon(Icons.search),
    hintText: 'Search',
    fillColor: Color(0xffF1F4FB),
    filled: true,
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(25),
      borderSide: BorderSide(
        color: Color(0xffF1F4FB),
      ),
    ),
    disabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(25),
      borderSide: BorderSide(
        color: Color(0xffF1F4FB),
      ),
    ),
  ),
),

我正在尝试更改此设置，以使搜索图标和提示文本最初彼此相邻居中。怎样才能达到这样的效果呢？

Answer 1

这是使用IntrinsicWidth的解决方案。

使用此解决方案，搜索图标将位于提示文本旁边，然后它将保留在用户输入的文本旁边。

import 'package:flutter/material.dart';

void main() {
  runApp(
    MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      home: HomePage(),
    ),
  );
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Container(
          height: 48.0,
          padding: EdgeInsets.symmetric(horizontal: 16.0, vertical: 0.0),
          margin: EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            color: Colors.amber.shade300,
            border: Border.all(
              color: Colors.brown,
              width: 3.0,
            ),
            borderRadius: BorderRadius.circular(25),
          ),
          child: Center(
            child: IntrinsicWidth(
              child: TextField(
                textAlignVertical: TextAlignVertical.center,
                decoration: InputDecoration(
                  prefixIcon: Icon(Icons.search),
                  hintText: 'Search',
                  border: InputBorder.none,
                ),
              ),
            ),
          ),
        ),
      ),
    );
  }
}