How to use multiply rows with ResponsiveDatatable? - flutter

Question

I want to create a second row after the icon "Bearbeiten", but this is not possible, because I need to use "title" for the first row. child: ResponsiveDatatable(title: Row(
I want to have a code like this below. How can I use ResponsiveDatatable, but although use a second row for my buttons?
This image shows, how the code looks at the moment
(without the second row). Because there is not enough space in one row, I want to create a second row.
How can I do this with a ResponsiveDatatable?
body: SingleChildScrollView(
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Container(
margin: EdgeInsets.all(10),
padding: EdgeInsets.all(0),
constraints: BoxConstraints(
maxHeight: 700,
),
child: Card(
elevation: 1,
shadowColor: Colors.black,
clipBehavior: Clip.none,
child: ResponsiveDatatable(
title: Row(
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
//add user to the list
TextButton.icon(
onPressed: () => {
Navigator.of(context).pushNamed(RegristrationRoute)
},
icon: Icon(Icons.add,
color: Colors.black,
),
label: Text("Hinzufügen",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {
Navigator.of(context).pushNamed(RegristrationRoute)
//Pop-up Fenster für die Registration machen, wenn Zeit - ansonsten registrationsfenster weiterleiten
},
icon: Icon(
IconData(0xf00d, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Bearbeiten",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),]),
child: Row( //error, I am not allowed to use child because of title
mainAxisSize: MainAxisSize.max,
mainAxisAlignment: MainAxisAlignment.center,
children: <Widget>[
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b1, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Sperren",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b0, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Freischalten",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () async => {
await AuthProvider.deleteUser(uid),
print(uid + 'user gelöscht')
},
icon: Icon(
IconData(0xe1bb, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Löschen",
style: TextStyle(
color: Colors.black,
)
),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
],
),

Answer 1

What you are expecting is the functionality of the Column.
ResponsiveDatatable(
title: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Row(
children: [
TextButton.icon(
onPressed: () => {
Navigator.of(context)
.pushNamed(RegristrationRoute)
},
icon: Icon(
Icons.add,
color: Colors.black,
),
label: Text("Hinzufügen",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {
Navigator.of(context)
.pushNamed(RegristrationRoute)
//Pop-up Fenster für die Registration machen, wenn Zeit - ansonsten registrationsfenster weiterleiten
},
icon: Icon(
IconData(0xf00d, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Bearbeiten",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
],
),
SizedBox(height: 10,),
Row(
children: [
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b1, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Sperren",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () => {},
icon: Icon(
IconData(0xe3b0, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Freischalten",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
),
SizedBox(width: 30,),
TextButton.icon(
onPressed: () async => {
// await AuthProvider.deleteUser(uid),
// print(uid + 'user gelöscht')
},
icon: Icon(
IconData(0xe1bb, fontFamily: 'MaterialIcons'),
color: Colors.black,
),
label: Text("Löschen",
style: TextStyle(
color: Colors.black,
)),
style: ButtonStyle(
backgroundColor:
MaterialStateProperty.all<Color>(
Colors.grey),
padding: MaterialStateProperty.all<EdgeInsets>(
EdgeInsets.all(10)),
),
)
],
),
]),
source: [],
)))
And there is a minor error in the parenthesis closing also.
Note: It will solve your problem but still it will not meet responsiveness.

Answer 2

I had the similar problem.
Instead of TextButton, I made a button-UI in container and wrapped it with InkWell (A rectangular area of a Material that responds to touch).
InkWell(
// on Tap function used and call back function as defined here
onTap: () {
setState(() {
// state will be set when the inkwell area is tapped
inkwell='Inkwell Tapped';
});
},
onLongPress: () {
setState(() {
inkwell='InkWell Long Pressed';
});
},
child: Container(
// container displaying the text
color: Colors.green,
width: 120,
height: 70,
child: Center(
child: Text(
'Button text',
))),
),