How to dynamically arrange cards in a row? - mobile

Question

I want to put two cards in a row and have them dynamically resized based on phone size. As seen in the image, the right card has overflow error because the phone dimension is small. Looks fine on a bigger phone.
Ignore the first overflow error
I have tried wrapping the container using Expanded() or Flexible() but it gives an error saying my parent is using a GestureDetector() and it does not allow that.
Widget _showSecondRow(){
return new Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
new GestureDetector(
child: Card(
elevation: 1,
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
color: Colors.grey.shade200,
padding: EdgeInsets.all(45.0),
child: new Column(
children: <Widget>[
new Icon(Icons.drafts, size: 30.0, color: Colors.black),
new Text("Private\nMessages", textAlign: TextAlign.center, style: TextStyle(color: widget.appModel.getPrimaryTextColor, fontSize: 18.0, fontWeight: FontWeight.bold),)
],
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
)
),
new GestureDetector(
onTap: () => Navigator.push(context, new MaterialPageRoute(builder: (context) =>
new SubscribedScreen()
)),
child: Card(
elevation: 1.0,
semanticContainer: true,
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Container(
color: Colors.grey.shade200,
padding: EdgeInsets.all(45.0),
child: new Column(
children: <Widget>[
new Icon(Icons.star, size: 30.0, color: Colors.black),
new Text("Subscribed\nThreads", textAlign: TextAlign.center, style: TextStyle(color: Colors.black, fontSize: 18.0, fontWeight: FontWeight.bold), overflow: TextOverflow.ellipsis,)
],
),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
),
)
),
],
);
}
I expect both cards to be dynamically resized regardless of phone size and fit the width of the phone. Doesnt matter if there's gap in the middle.

Answer 1

Wrap each GestureDetector in Expanded or Flexible