flutter - Moving an icon into a TextField `leading` icon
问题描述
as you can see in the picture, when we press the search icon, I want the icon to pass into the textfield.
Basically, when I press the search icon, I want that icon to disappear into the textfield. Thank you for your help.
return Scaffold(
appBar: AppBar(
backgroundColor: it_tool_main_grey_accent,
elevation: 0,
title: !isSearching
? Text('All')
: TextField(
decoration: InputDecoration(
enabledBorder: const OutlineInputBorder(
borderSide:
BorderSide(color: Colors.black, width: 1.0),
),
hintText: "Search"),
),
automaticallyImplyLeading: false,
leadingWidth: 55,
leading: Padding(
padding:
EdgeInsets.only(left: MediaQuery.of(context).size.width / 30),
child: DecoratedBox(
decoration:
BoxDecoration(shape: BoxShape.circle, color: Colors.white),
child: IconButton(
icon: customIcon,
onPressed: () {
setState(() {
isSearching = !isSearching;
});
},
),
),
),
),
body: Text("hi"),
);
解决方案
You can get your desired result with the help of isSearching by just making following changes
Scaffold(
appBar: AppBar(
// backgroundColor: it_tool_main_grey_accent,
elevation: 0,
title: !isSearching
? Text('All')
: Padding(
padding: const EdgeInsets.symmetric(vertical: 8.0),
child: SizedBox(
height: 40,
child: TextField(
decoration: InputDecoration(
filled: true,
contentPadding: EdgeInsets.all(8),
fillColor: Colors.white,
enabledBorder: OutlineInputBorder(
borderSide: BorderSide.none,borderRadius: BorderRadius.circular(10)
),
prefixIcon: Icon(
Icons.search,
color: Colors.black,
),
hintText: "Search"),
),
),
),
automaticallyImplyLeading: false,
leadingWidth: 55,
leading: isSearching
? null
: Padding(
padding: EdgeInsets.only(
left: MediaQuery.of(context).size.width / 30),
child: DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle, color: Colors.white),
child: IconButton(
icon: Icon(Icons.search,color: Colors.black),
onPressed: () {
setState(() {
isSearching = !isSearching;
});
},
),
),
),
),
body: Text("hi"),
)
推荐阅读
- tizen - Tizen 原生 UI 创建
- windows - 如何在 Windows 批处理上重写这个 bash 命令?
- api - 资源是rest api的强制性条件吗?
- html - BEM 是否有区分状态选择器和子类选择器的约定?
- reactjs - 通过 Axios & React 追加到数组
- python - 将稀疏 NumPy 矩阵加载到 R 中
- android - 安卓全球高分系统
- javascript - 如何在反应中添加内联样式?
- vue.js - 将 npm 包导入 Vue.js 单文件组件
- audio - 如何从 .mp3 文件中获取元数据并使用 FFmpeg 将其作为文本放入视频中?