Flutter Textfield 响应式字体

Posted 2023-02-23

【中文标题】Flutter Textfield 响应式字体

【英文标题】：Flutter Textfield responsive font

【发布时间】：2020-12-12 08:40:41

【问题描述】：

我正在尝试使用媒体查询并尝试使用文本字段小部件。为了给容器设置样式，我尝试了盒子装饰和其他东西来添加阴影属性以及媒体查询大小以增加不同设备的响应能力。有没有办法让图标大小和字体大小响应，因为在较小的设备中，texfield 会降低自身的位置，看起来很不正常。

这是我的代码：

    Widget build(BuildContext context) 
    return SafeArea(
        child: Scaffold(
      backgroundColor: Colors.blue[50],
      body: Center(
        child: Padding(
          padding: const EdgeInsets.only(left: 20, right: 20),
          child: Container(
            height: MediaQuery.of(context).size.height * 0.065,
            decoration: BoxDecoration(
                color: Colors.blue[50],
                borderRadius: BorderRadius.circular(6.0),
                boxShadow: [
                  BoxShadow(
                    color: Colors.white,
                    spreadRadius: 1,
                    blurRadius: 2,
                    offset: Offset(2, 2),
                  ),
                  BoxShadow(
                    color: Hexcolor('#C5D6F2'),
                    spreadRadius: 1,
                    blurRadius: 2,
                    offset: Offset(-2, -2),
                  ),
                ]),
            child: Center(
              child: TextField(
                decoration: InputDecoration(
                  hintText: 'Email',
                  hintStyle: TextStyle(
                    fontSize: 14,
                    fontWeight: FontWeight.normal,
                    color: Hexcolor('#9fa6b4'),
                  ),
                  border: InputBorder.none,
                  prefixIcon: Icon(
                    Icons.mail,
                    color: Hexcolor('#9fa6b4'),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ));
  

这是我的输出：

【参考方案1】：

是的！使用大小属性。我使用一个函数来检索大小。

图标小部件：

Icon(
  Icons.forward,
  color: Theme.of(context).primaryColor,
  size: iconSize(context),
),

带有我的常量的函数（我与所有图标共享）：

const double smallScreenWidth = 360.0;
const double mediumScreenWidth = 412.0;
const double bigScreenWidth = 480.0;

double iconSize(BuildContext context) 
  double screenWidth = 1;

  if (MediaQuery.of(context).orientation == Orientation.portrait)
    screenWidth = MediaQuery.of(context).size.width;
  else
    screenWidth = MediaQuery.of(context).size.height;

  if (screenWidth <= smallScreenWidth)
    return 32.0;
  else if (screenWidth <= mediumScreenWidth)
    return 40.0;
  else
    return 48.0;