How to put multiple suffix icon in TextField flutter? - flutter

Question

I've been trying hard to get this setup, but I couldn't just get to behave the icon the way I wanted it to be.
[1]: https://i.stack.imgur.com/mJFds.png
I wanted to make the add button snap with the TextField, but I could not wrap it with any other widgets.
All I could end up is this.
[2]: https://i.stack.imgur.com/m2Ze9.png
Can somebody please help me figure out a way over this.
Thanks in advance.
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,
),
],
),
);
You can refer to this to re-layout your layout