问Flutter Textfield响应式字体
EN

Stack Overflow用户

提问于 2020-08-23 15:16:30

回答 1查看 76关注 0票数 0

我正在尝试使用媒体查询，并尝试使用文本字段小部件。为了设置容器的样式，我尝试了框装饰和填充，以添加阴影属性和媒体查询大小，以在不同的设备中添加响应能力。有没有一种方法可以使图标大小和字体大小具有响应性，因为在较小的设备中，文本字段会降低自身的位置，并且看起来不正常。

下面是我的代码：

    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'),
                  ),
                ),
              ),
            ),
          ),
        ),
      ),
    ));
  }

下面是我的输出：

flutter

flutter-layout

CDN&音视频通信出海专场

提供游戏出海、社交娱乐等方案，助力企业抢占出海市场

回答 1

Stack Overflow用户

回答已采纳

发布于 2020-08-23 15:31:30

是!使用size特性。我使用一个函数来检索大小。

图标小部件：

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;
}