I'm new to flutter and creating a chat app similar to WhatsApp. I'm getting an overflow near the chat box when I implement the record button icon next to send Icon. how to get rid of this overflow. as I guess chat box width need to be decrease. not sure. how to overcome this. appreciate your help on this.
Container(
height: 60,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
SizedBox(
width: size.width - 55,
child: Card(
margin:
const EdgeInsets.only(left: 2, right: 2, bottom: 8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25)),
child: TextField(
focusNode: forcusNode,
controller: _message,
keyboardType: TextInputType.multiline,
maxLines: 5,
minLines: 1,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: IconButton(
onPressed: () {
forcusNode.unfocus();
forcusNode.canRequestFocus = false;
show = !show;
},
icon: Icon(
Icons.emoji_emotions,
color: textGrey,
)),
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(
Icons.attach_file,
color: textGrey,
),
onPressed: () {
// getImage();
showModalBottomSheet(
context: context,
builder: (builder) =>
bottomsheet());
},
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.camera_alt,
color: textGrey,
))
]),
hintText: 'Type Message',
),
),
),
),
IconButton(
onPressed: () {
onSendMessage();
print(_message.text);
},
icon: Icon(
Icons.send,
color: mainGreen,
)),
Container(
height: 30,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: mainGreen,
),
child: IconButton(
onPressed: () async {
await recorder.toggleRecording();
final isRecording = recorder.isRecording;
setState(() {});
if (isRecording) {
timerController.startTimer();
} else {
timerController.stoptTimer();
}
},
icon: Icon(icon, color: Colors.white,)
),
),
]),
),
This is an example, wrap all of them in Expanded and give them different flex values:
Container(
height: 60,
alignment: Alignment.center,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
Expanded(
flex: 5,
child: Card(
margin:
const EdgeInsets.only(left: 2, right: 2, bottom: 8),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(25)),
child: TextField(
focusNode: forcusNode,
controller: _message,
keyboardType: TextInputType.multiline,
maxLines: 5,
minLines: 1,
textAlignVertical: TextAlignVertical.center,
decoration: InputDecoration(
border: InputBorder.none,
prefixIcon: IconButton(
onPressed: () {
forcusNode.unfocus();
forcusNode.canRequestFocus = false;
show = !show;
},
icon: Icon(
Icons.emoji_emotions,
color: textGrey,
)),
suffixIcon: Row(
mainAxisSize: MainAxisSize.min,
children: [
IconButton(
icon: Icon(
Icons.attach_file,
color: textGrey,
),
onPressed: () {
// getImage();
showModalBottomSheet(
context: context,
builder: (builder) =>
bottomsheet());
},
),
IconButton(
onPressed: () {},
icon: Icon(
Icons.camera_alt,
color: textGrey,
))
]),
hintText: 'Type Message',
),
),
),
),
Expanded(
flex: 1,
child: IconButton(
onPressed: () {
onSendMessage();
print(_message.text);
},
icon: Icon(
Icons.send,
color: mainGreen,
)),
),
Expanded(
flex: 1,
child: Container(
height: 30,
width: 30,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: mainGreen,
),
child: IconButton(
onPressed: () async {
await recorder.toggleRecording();
final isRecording = recorder.isRecording;
setState(() {});
if (isRecording) {
timerController.startTimer();
} else {
timerController.stoptTimer();
}
},
icon: Icon(icon, color: Colors.white,)
),
),
),
]),
),
Related
I am listing records from Firebase Firestore with ListView.builder. I convert the incoming records to Model and list them.
I made a search option and I'm trying to make a filtering system for it. I want to filter by nameSurname search, city and district value.
I wrote a code like this:
StreamBuilder(
stream: db
.collection("NeedClothesPeople")
.snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return const Center(
child: CircularProgressIndicator(),
);
} else {
final searchText = searchController.text.trim().toLowerCase();
final List<NeedClothesPeopleModel> data = snapshot.data!.docs
.map((e) => NeedClothesPeopleModel.fromDocument(e))
.where((e) =>
searchText.isEmpty ||
e.nameSurname!.toLowerCase().contains(searchText) &&
selectedCity.isEmpty ||
e.city == selectedCity && selectedDistrict.isEmpty ||
e.district == selectedDistrict) // filter
.toList();
return Column(
children: [
const SizedBox(height: 10),
SizedBox(
width: MediaQuery.of(context).size.width * 0.95,
child: TextFormField(
controller: searchController,
decoration: InputDecoration(
prefixIcon: const Icon(Icons.search),
suffixIcon: IconButton(
icon: Icon(Icons.settings),
onPressed: () {
filterModalBottomSheet(context);
},
),
contentPadding: const EdgeInsets.only(),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(30),
),
),
onChanged: (value) {
setState(() {});
},
),
),
SizedBox(
width: double.infinity,
height: MediaQuery.of(context).size.height * 0.8,
child: ListView.builder(
physics: const BouncingScrollPhysics(),
itemCount: data.length,
itemBuilder: (context, index) {
return Card(
child: ListTile(
leading: Icon(Icons.person),
title: Text(data[index].nameSurname.toString()),
subtitle: Text(
"${data[index].city} / ${data[index].district}",
),
trailing: IconButton(
icon: const Icon(Icons.info),
onPressed: () {
Get.to(const NeedClothesPeopleDetailPage(),
arguments: data[index]);
print(data[index].nameSurname);
},
),
),
);
},
),
),
],
);
}
},
),
void filterModalBottomSheet(BuildContext context) {
showModalBottomSheet(
isScrollControlled: true,
shape: const RoundedRectangleBorder(
borderRadius: BorderRadius.only(
topLeft: Radius.circular(50),
topRight: Radius.circular(50),
),
),
context: context,
builder: (context) {
return StatefulBuilder(
builder: (BuildContext context, StateSetter setState) {
return SizedBox(
height: MediaQuery.of(context).size.height * 0.5,
child: Padding(
padding: const EdgeInsets.only(left: 8, right: 8),
child: Column(
children: [
SizedBox(
height: MediaQuery.of(context).size.height * 0.04,
),
Row(
children: [
const Expanded(
flex: 1,
child: Text(
"İl:",
style: TextStyle(fontSize: 19),
),
),
Expanded(
flex: 9,
child: DropdownButtonFormField(
hint: const Text("İl seçiniz"),
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.location_city,
color: Color(0xFFCB3126),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: const BorderSide(
color: Color(0xFFCB3126),
),
),
),
items: citys
.map(
(e) => DropdownMenuItem<String>(
value: e.value,
child: e.child,
),
)
.toList(),
onChanged: (value) {
setState(() {
selectedCity = value.toString();
});
},
),
),
],
),
const SizedBox(height: 20),
Row(
children: [
const Expanded(
flex: 1,
child: Text(
"İlçe:",
style: TextStyle(fontSize: 19),
),
),
Expanded(
flex: 9,
child: DropdownButtonFormField(
key: getCityKey(),
hint: selectedCity == ""
? const Text("Önce il seçiniz")
: const Text("İlçe seçiniz"),
decoration: InputDecoration(
prefixIcon: const Icon(
Icons.location_city,
color: Color(0xFFCB3126),
),
border: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
),
enabledBorder: OutlineInputBorder(
borderRadius: BorderRadius.circular(50),
borderSide: const BorderSide(
color: Color(0xFFCB3126),
),
),
),
items: districtsItem(),
onChanged: (value) {
setState(() {
selectedDistrict = value.toString();
});
},
),
),
],
),
const Spacer(),
Padding(
padding: const EdgeInsets.only(left: 12, right: 12),
child: SizedBox(
width: double.infinity,
height: 50,
child: ElevatedButton(
style: ElevatedButton.styleFrom(
backgroundColor: const Color(0xFFCB3126),
),
child: const Text(
"Filtrele",
style: TextStyle(fontSize: 20),
),
onPressed: () {
setState(() {
filterActive = true;
Navigator.pop(context);
print(filterActive);
});
},
),
),
),
const SizedBox(height: 10),
],
),
),
);
},
);
},
);
}
The problem is this: When I call it by typing in TextFormField, the records in ListView.builder are changing. However, when filtering is done, the records do not change on the screen.
Why could this be? How can I solve the problem? Thanks.
[
I can create a button with an icon using this code
ElevatedButton.icon(
icon: Icon(
Icons.home,
color: Colors.green,
size: 30.0,
),
label: Text('Elevated Button'),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
shape: new RoundedRectangleBorder(
borderRadius: new BorderRadius.circular(20.0),
),
),
)
but how to put an arrow on the right side of the button?
As per your shared Image I have try same design in Various ways choice is yours 😊which way you want to try.
Using ElevatedButton.icon
ElevatedButton.icon(
icon: const Icon(
Icons.mail,
color: Colors.green,
size: 30.0,
),
label: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text('Change Email Address'),
Icon(Icons.arrow_forward_ios)
],
),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.black,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: const BorderSide(color: Colors.black),
),
fixedSize: const Size(double.infinity, 40),
),
),
Result Using ElevatedButton.icon ->
Using OutlinedButton.icon
OutlinedButton.icon(
icon: const Icon(
Icons.mail,
color: Colors.green,
size: 30.0,
),
label: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Text(
'Change Email Address',
style: TextStyle(
color: Colors.black,
),
),
Icon(
Icons.arrow_forward_ios,
color: Colors.grey,
)
],
),
onPressed: () {
print('Button Pressed');
},
style: ElevatedButton.styleFrom(
side: const BorderSide(color: Colors.black,),
fixedSize: const Size(double.infinity, 40),
),
),
Result Using OutlinedButton.icon ->
Using ListTile
ListTile(
onTap: () {
print('Button Pressed');
},
visualDensity: const VisualDensity(horizontal: -4,vertical: -4),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: const BorderSide(color: Colors.black),
),
leading: const Icon(Icons.mail,color: Colors.green),
trailing: const Icon(Icons.arrow_forward_ios),
title: const Text('Change Email Address'),
),
Result Using ListTile ->
Using GestureDetector
GestureDetector(
onTap: () {
print('Button Pressed');
},
child: Container(
padding:const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
borderRadius: BorderRadius.circular(10),),
child: Row(
children: const [
Icon(Icons.mail, color: Colors.green),
SizedBox(width: 10,),
Text('Change Email Address'),
Spacer(),
Icon(Icons.arrow_forward_ios),
],
),
),
),
Result Using GestureDetector ->
Using InkWell
InkWell(
onTap: () {
print('Button Pressed');
},
child: Container(
padding:const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
borderRadius: BorderRadius.circular(10),),
child: Row(
children: const [
Icon(Icons.mail, color: Colors.green),
SizedBox(width: 10,),
Text('Change Email Address'),
Spacer(),
Icon(Icons.arrow_forward_ios),
],
),
),
),
Result Using InkWell->
It seems like you want a ListTile widget, as it has leading/trailing properties:
Container(
margin: const EdgeInsets.all(10),
decoration: BoxDecoration(
border: Border.all(
color: Colors.black,
width: 1,
),
),
child: const ListTile(
leading: Icon(Icons.mail),
trailing: Icon(Icons.arrow_forward_ios),
title: Text('Change Email Address'),
),
)
You can also use IconButton instead of a regular Icon in this example.
To add two icons to an elevated button, just wrap your child widget with a row widget. See implementation below:
ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: const [
Icon(Icons.home),
Text('Home'),
Icon(Icons.navigate_next)
],
),
),
I'm trying to make it so that the body fades behind the TextField, so I decided to add a gradient on top of it, but there seems to be an empty space between the gradient and the card, and it's ruining the effect. I can't figure out where it's coming from or how to handle it.
return Column(
mainAxisSize: MainAxisSize.min,
children: [
Container(
height: 15,
decoration: BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: <Color>[
Colors.white.withOpacity(0),
Theme.of(context).scaffoldBackgroundColor,
]),
),
),
Row(
children: [
Flexible(
child: Card(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20)),
child: Row(
children: [
Flexible(
child: TextField(
onTap: () => myFocusNode.requestFocus(),
decoration: InputDecoration(
hintText: 'Enter task',
contentPadding: EdgeInsets.all(15),
border: InputBorder.none,
floatingLabelBehavior: FloatingLabelBehavior.never,
),
controller: textController,
focusNode: myFocusNode,
onSubmitted: (_) {
submit();
myFocusNode.requestFocus();
textController.clear();
},
),
),
if (!isEpoch(_selectedDate.toString()))
SizedBox(
height: 20,
child: FittedBox(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
mainAxisSize: MainAxisSize.min,
children: [
Text(
DateFormat('dd/MM').format(_selectedDate),
),
Text(timeOfDayAsHhMm(_selectedTime)),
],
),
),
),
SizedBox(
width: 10,
),
IconButton(
splashRadius: 20,
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: _dateAndTimePicker,
icon: const Icon(Icons.calendar_month),
),
SizedBox(
width: 10,
),
IconButton(
splashRadius: 20,
padding: EdgeInsets.zero,
constraints: BoxConstraints(),
onPressed: () => null,
icon: const Icon(Icons.image),
),
SizedBox(
width: 10,
)
],
),
),
),
CircleAvatar(
child: TextButton(
onPressed: () {
submit();
myFocusNode.requestFocus();
textController.clear();
setState(() {
_selectedDate = null;
_selectedTime = null;
});
},
child: const FittedBox(
child: Text(
'Add',
style: TextStyle(
color: Colors.white,
),
),
),
),
),
SizedBox(
width: 5,
)
],
),
],
);
Is there some automatic padding coming from somewhere? I did use a lot of Flexibles and Boxes.
To the card add margin with zero insets
Card(
margin: EdgeInsets.zero,
)
I'm trying to hide the emoji keyboard when the system keyboard shows and vice versa. What I'm currently have is when the system keyboard is opened then I click on the emoji icon, the emoji keyboard shows on top of the system keyboard like so:
I'm using the emoji_picker_flutter: ^1.1.2 package, and here is the code:
Offstage(
offstage: !emojiShowing,
child: Padding(
padding: const EdgeInsets.all(10),
child: SizedBox(
height: 250,
child: EmojiPicker(
onEmojiSelected: (Category category, Emoji emoji) {
_onEmojiSelected(emoji);
},
onBackspacePressed: _onBackspacePressed,
config: Config(
columns: 8,
// Issue: https://github.com/flutter/flutter/issues/28894
emojiSizeMax: 32 * (Platform.isIOS ? 1.30 : 1.0),
verticalSpacing: 0,
horizontalSpacing: 0,
initCategory: Category.SMILEYS,
bgColor: Theme.of(context).scaffoldBackgroundColor,
indicatorColor: Colors.blue,
iconColor: Colors.grey,
iconColorSelected: Colors.blue,
progressIndicatorColor: Colors.blue,
backspaceColor: Colors.blue,
skinToneDialogBgColor: Colors.white,
skinToneIndicatorColor: Colors.grey,
enableSkinTones: true,
showRecentsTab: true,
recentsLimit: 28,
noRecentsText: 'No Recents',
noRecentsStyle: const TextStyle(
fontSize: 20, color: Colors.black26),
tabIndicatorAnimDuration: kTabScrollDuration,
categoryIcons: const CategoryIcons(),
buttonMode: ButtonMode.MATERIAL)),
),
),
),
Is there any solution?
Add this :
bool emojiShowing = false;
var chatMessageController = TextEditingController();
_onEmojiSelected(Emoji emoji) {
chatMessageController
..text += emoji.emoji
..selection = TextSelection.fromPosition(
TextPosition(offset: chatMessageController.text.length));
setState(() {
_send = true;
});}
_onBackspacePressed() {
chatMessageController
..text = chatMessageController.text.characters.skipLast(1).toString()
..selection = TextSelection.fromPosition(
TextPosition(offset: chatMessageController.text.length));}
And in your body, you need to do this:
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
child: Stack(
children: [
ChatStream(widget.chatRoomId),
Column(
crossAxisAlignment: CrossAxisAlignment.center,
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.end,
children: [
Container(
alignment: Alignment.bottomCenter,
child: Container(
decoration: BoxDecoration(
color: Colors.white,
),
child: Column(
children: [
Container(
margin: EdgeInsets.only(right: 15, left: 15, top: 0,bottom: 2),
height: 60,
child: Row(
children: <Widget>[
Expanded(
child: Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(35.0),
boxShadow: [
BoxShadow(
offset: Offset(0, 3),
blurRadius: 5,
color: Colors.grey)
],
),
child: Row(
children: <Widget>[
IconButton(
onPressed: () {
setState(() {
emojiShowing = !emojiShowing;
});
if (emojiShowing != false) {
FocusScope.of(context).unfocus();
}
},
icon: const Icon(
Icons.face,
),
),
//IconButton(
// icon: Icon(Icons.face), onPressed: () {}),
Expanded(
child: TextField(
keyboardType: TextInputType.multiline,
maxLines: null,
controller: chatMessageController,
textCapitalization: TextCapitalization.sentences,
decoration: InputDecoration.collapsed(
hintText: 'Envoyer un message...',
),
onTap: () {
if (emojiShowing != false) {
setState(() {
emojiShowing = !emojiShowing;
});
}
},
onChanged: (value){
if(value.isNotEmpty){
setState(() {
_send = true;
});
}else{
setState(() {
_send = false;
});
}
},
onSubmitted: (value){
//you can send message by pressing enter
if(value.length>0){
sendMessage();
}
},
),
),
IconButton(
icon: Icon(Icons.photo_camera),
onPressed: () {},
),
IconButton(
icon: Icon(Icons.attach_file),
onPressed: () {},
)
],
),
),
),
_send == true
? Row(
children: [
SizedBox(width: 15),
Container(
padding: const EdgeInsets.all(15.0),
decoration: BoxDecoration(
color: Theme.of(context).primaryColor, shape: BoxShape.circle),
child: InkWell(
child: Icon(
Icons.send,
color: Colors.white,
),
onTap: sendMessage,
),
),
],
)
: Text('')
],
),
),
Offstage(
offstage: !emojiShowing,
child: SizedBox(
height: 250,
child: EmojiPicker(
onEmojiSelected: (Category category, Emoji emoji) {
_onEmojiSelected(emoji);
},
onBackspacePressed: _onBackspacePressed,
config: Config(
columns: 8,
emojiSizeMax: 28 * (Platform.isIOS ? 1.30 : 1.0), // Issue: https://github.com/flutter/flutter/issues/28894
verticalSpacing: 0,
horizontalSpacing: 0,
gridPadding: EdgeInsets.zero,
initCategory: Category.RECENT,
bgColor: Colors.white,
indicatorColor: Theme.of(context).primaryColor,
iconColor: Colors.grey,
iconColorSelected: Theme.of(context).primaryColor,
progressIndicatorColor: Theme.of(context).primaryColor,
backspaceColor: Theme.of(context).primaryColor,
skinToneDialogBgColor: Colors.white,
skinToneIndicatorColor: Colors.grey,
enableSkinTones: true,
showRecentsTab: true,
recentsLimit: 32,
noRecents: const Text(
'Pas d\'émojis récents',
style: TextStyle(fontSize: 20, color: Colors.black26),
textAlign: TextAlign.center,
),
tabIndicatorAnimDuration: kTabScrollDuration,
categoryIcons: const CategoryIcons(),
buttonMode: ButtonMode.MATERIAL,
),
),
),
)
],
),
)
),
],
),
],
),
),
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(),
],
),
),
),
);
}
}
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,
),
),
],
),
),
_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