如何在TextField flutter中放置多个后缀图标

Question

我一直在努力获得这个设置，但我无法按照我想要的方式操作图标。[1] ：https://i.stack.imgur.com/mJFds.png

我想用TextField来捕捉添加按钮，但我无法用任何其他小部件来包装它。我所能做的就是这个。[2] ：https://i.stack.imgur.com/m2Ze9.png有人能帮我想办法解决这个问题吗。

提前谢谢。

import 'package:flutter/material.dart';
import 'package:provider/provider.dart';
import 'package:badminton_app/constants.dart';
import 'package:badminton_app/model/players_data.dart';
TextEditingController _controller = TextEditingController();
class AddPlayersScreen extends StatefulWidget {
@override
_AddPlayersScreenState createState() => _AddPlayersScreenState();
}
class _AddPlayersScreenState extends State<AddPlayersScreen> {
String newText;
@override
Widget build(BuildContext context) {
return Scaffold(
backgroundColor: Color(0xff07021A),
body: SafeArea(
child: Padding(
padding: const EdgeInsets.all(25.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
SizedBox(
height: 30.0,
),
Text(
'Add Players',
style: TextStyle(
color: Colors.white,
fontSize: 40.0,
fontFamily: 'Montserrat'),
),
SizedBox(
width: 400.0,
height: 50.0,
child: Divider(
height: 10.0,
color: Color(0xff525274),
),
),
Container(
constraints: BoxConstraints.tight(Size(400.0, 70.0)),
child: TextField(
cursorColor: Color(0xffA8A3BE),
style: TextStyle(color: Color(0xffA8A3BE), fontSize: 20.0),
controller: _controller,
onChanged: (newValue) {
newText = newValue;
},
enabled: true,
decoration: InputDecoration(
suffix: IconButton(
onPressed: () {
_controller.clear();
},
icon: Icon(
Icons.clear,
color: Colors.white,
),
),
suffixIcon: IconButton(
onPressed: () {
Provider.of<PlayerData>(context).changeString(newText);
},
icon: CircleAvatar(
backgroundColor: Colors.amberAccent,
child: Icon(
Icons.add,
color: Colors.black,
)),
),
hintText: "New member......",
hintStyle: TextStyle(
fontSize: 20.0,
color: Color(
0xffA199C6,
),
),
filled: true,
fillColor: Color(0xff585179),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(Radius.circular(10.0)),
borderSide: BorderSide.none),
focusedBorder: OutlineInputBorder(
borderRadius: BorderRadius.all(
Radius.circular(10.0),
),
borderSide: BorderSide.none),
),
),
)
//Something(),
],
),
),
),
);
}
}

Answer 1

suffixIcon: Container(
width: 100.w,
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
IconButton(
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () {
print('mic button pressed');
},
icon: Icon(
Icons.mic,
color: background_color,
),
),
IconButton(
padding: EdgeInsets.fromLTRB(1, 0, 1, 0).r,
constraints: BoxConstraints(),
onPressed: () {
print('photo button pressed');
},
icon: Icon(
Icons.photo,
color: background_color,
),
),
IconButton(
padding: EdgeInsets.fromLTRB(2, 0, 3, 0).r,
constraints: BoxConstraints(),
onPressed: () {
print('Emoji button pressed');
},
icon: Icon(
Icons.emoji_emotions,
color: background_color,
),
),
],
),
),

Answer 2

_cellEdit() => Container(
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(8),
color: Colors.white,
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Container(
child: Text('断开'),
padding: EdgeInsets.all(BaseSize.dp(10)),
),
Row(
children: <Widget>[
ImageIcon(IconUtils.getAssetIcon('ic_bluetooth'),
color: ColorRes.COLOR_03B798),
Container(
margin: EdgeInsets.only(left: BaseSize.dp(3)),
child: Text('A8-123456789'))
],
mainAxisAlignment: MainAxisAlignment.start,
),
],
),
);

您可以参考此来重新布局您的布局