Create two click areas on the same line in flutter - flutter

Question

I'm trying to create two click areas on the same line, but I tried to add a Line to place the second click area but it always gives an error.
What I understand is that the two containers have to be inside a Row. But when I try to do this it goes wrong when the program. The second container I want to have a fixed size and smaller than the first one.
I've attached an image to illustrate what I'm trying to do and my code. Could anyone give me suggestions or material I can read? Thanks.
Widget createScreen() {
late double widthScreen = MediaQuery.of(context).size.width; //to test only
return Container(
padding: const EdgeInsets.all(15.0),
child: Row( //<--- probably wrong
children: <Widget>[
Container(
margin: const EdgeInsets.only(bottom: 5),
decoration: BoxDecoration(borderRadius: BorderRadius.circular(10),
// ignore: prefer_const_literals_to_create_immutables
boxShadow: [
const BoxShadow(
color: Colors.black,
offset: Offset(0, 0),
blurRadius: 5,
)
]),
child: ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Material(
child: InkWell(
highlightColor: Colors.white.withAlpha(50),
onTap: () {
print("Teste!");
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15),
child: Row(
children: <Widget>[
Flexible(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'test text',
overflow: TextOverflow.visible,
style: TextStyle(
fontSize: 14,
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
)
],
),
),
),
),
),
//probably wrong
Container(
width: widthScreen * .10,
child: Text(
'D',
style: TextStyle(
fontSize: 12,
color: Colors.grey,
),
),
)
],
),
);}

Answer 1

Use Expanded on first Container, it will take available size. Also you can provide fixed and it will get minimum sapele , also setting mainAxisSize: MainAxisSize.min, on 1st container provide the UI, Also you can remove extra rows and column on first container (item1) follow the second container I've created. Also using flex on Expanded inside row is more flexible.
Widget createScreen() {
late double widthScreen = MediaQuery.of(context).size.width; //to test only
return Container(
padding: const EdgeInsets.all(15.0),
// height: 81,
width: widthScreen,
child: Row(
children: <Widget>[
Expanded(
child: Container(
padding: const EdgeInsets.only(bottom: 5),
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black,
offset: Offset(0, 0),
blurRadius: 5,
)
]),
child: item1(),
),
),
SizedBox(
width: 16,
),
Container(
width: widthScreen * .14,
height: 50,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(10),
boxShadow: const [
BoxShadow(
color: Colors.black,
offset: Offset(0, 0),
blurRadius: 5,
)
],
),
child: Material(
borderRadius: BorderRadius.circular(10),
// elevation: 11, // if you need extra
child: InkWell(
borderRadius: BorderRadius.circular(10),
highlightColor: Colors.white.withAlpha(50),
onTap: () {
print("Teste!");
},
),
),
)
],
),
);
}
Widget item1() {
return ClipRRect(
borderRadius: BorderRadius.circular(10),
child: Material(
child: InkWell(
highlightColor: Colors.white.withAlpha(50),
onTap: () {
print("Teste!");
},
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(15),
child: Row(
children: <Widget>[
Flexible(
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.start,
children: <Widget>[
Text(
'test text',
overflow: TextOverflow.visible,
style: TextStyle(
fontSize: 14,
color: Theme.of(context).primaryColor,
fontWeight: FontWeight.bold,
),
),
],
),
),
],
),
)
],
),
),
),
);
}