I need to have box alignment like on image below. I use Wrap Widget to wrap my items by two elements in a row. But as i see Wrap widget don't have stretch property for the crossAxisAlignment.
I use another method to build cardItem, to simplify my code, and re-use it for my four cards. Maybe you know some other Widgets to help to do it.
Can someone help me with it. Please see my code below:
class Transfers extends StatelessWidget {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text('Transfers'),
),
body: Center(
child: Wrap(
spacing: 10,
runSpacing: 10,
children: <Widget>[
_buildTransferItem(
"assets/images/icon.png",
"Some Text of this box",
context,
),
_buildTransferItem(
"assets/images/icon.png",
"Text",
context,
),
_buildTransferItem(
"assets/images/icon.png",
"Some Text of this box",
context,
),
_buildTransferItem(
"assets/images/icon.png",
"Some Text of this box",
context,
),
],
),
),
);
}
Widget _buildTransferItem(
String transferIcon, String transferTitle, BuildContext context) {
return Container(
width: MediaQuery.of(context).size.width * 0.5 - 20,
height: ,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(12.0),
boxShadow: [
BoxShadow(
color: Color.fromRGBO(140, 140, 140, 0.5),
blurRadius: 6.0,
)
],
),
padding: EdgeInsets.symmetric(
vertical: screenAwareSize(20.0, context),
horizontal: screenAwareSize(20.0, context),
),
child: Column(
children: <Widget>[
Image.asset(
transferIcon,
width: screenAwareSize(72.0, context),
height: screenAwareSize(39.0, context),
),
SizedBox(height: screenAwareSize(7.0, context)),
Text(
transferTitle,
style: TextStyle(
fontSize: screenAwareSize(14, context),
fontWeight: FontWeight.w300,
),
textAlign: TextAlign.center,
)
],
),
);
}
}



