Flutter Textfield响应式字体
Flutter Textfield响应式字体
提问于 2020-08-23 15:16:30
我正在尝试使用媒体查询，并尝试使用文本字段小部件。为了设置容器的样式，我尝试了框装饰和填充，以添加阴影属性和媒体查询大小，以在不同的设备中添加响应能力。有没有一种方法可以使图标大小和字体大小具有响应性，因为在较小的设备中，文本字段会降低自身的位置，并且看起来不正常。
下面是我的代码：
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
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;
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/63548634
复制相关文章
点击加载更多
相似问题
Flutter web响应式设计字体
Flutter textField字体填满后消失
响应式MaterialUI TextField？
AS3 - TextField:嵌入式字体
响应式字体不工作
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
社区富文本编辑器全新改版！诚邀体验～
全新交互，全新视觉，新增快捷键、悬浮工具栏、高亮块等功能并同时优化现有功能，全面提升创作效率和体验
腾讯云开发者
