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.
Wrap each GestureDetector
in Expanded
or Flexible