how to place image on border of card in flutter? - flutter

Question

I am new in flutter , I am sharing an image in which there is card and its border has an image (as you can see the date i.e JULY , 2020 is showing inside an image) . I don't have any idea of how to achieve this functionality . Please help me.
I wrote the below code to create the card. The code is displaying the date image inside the card . Do I need to follow some other widget rather than card and listtile?
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return new ListView.separated(
padding: const EdgeInsets.all(8),
itemCount: 1,
itemBuilder: (BuildContext context, int index) {
return Padding(
padding: const EdgeInsets.all(0.0),
child:
Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child :
Card(
child: Ink(
color: Colors.grey[200],
child : ListTile(
onTap: () {
},
title: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child:
Center(child: Text('JULY , 2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.white
),),),
width: 190.0,
height: 30,
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("assets/images/apply_leave.png"),
fit: BoxFit.fill,
// alignment: Alignment.center,
),
),
),
Container(
child:Text('' , style: TextStyle(
fontWeight: FontWeight.bold ,
fontSize: 20,
color: Colors.black
),)
)
]
),
SizedBox(height: 20.0),
Expanded(
child :
Row(
children: <Widget>[
Text('FEE SCEDULE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('DUE DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
),
Expanded(
child :
Row(
children: <Widget>[
Text('END DATE' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('19-07-2020' , style: TextStyle(
fontWeight: FontWeight.bold ,
color: Colors.black,
))
])
)
]
),
),
),
)
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text('Total Amount:',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
Text('254684'+'/-',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
],
),
),
//
),
)
]
)
);
},
separatorBuilder: (BuildContext context,
int index) => const Divider(),
);
}

Answer 1

If I understand you correctly, you want to put an image above the container with border. You can use Stack for it.
Wrap that container in it and put it at the start of children list, that way it will be displayed below an image, and everything else. Use Positioned to rearrange widgets in stack. You may want to wrap stack in Container to position it better.

Answer 2

Feel free to play with values to get the most desired result:
BoxDecoration myBoxDecoration() {
return BoxDecoration(
color: Colors.grey[100],
border: Border.all(
width: 1, //
// <--- border width here
),
);
}
Widget _myListView(BuildContext context) {
return Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Container(
decoration: myBoxDecoration(),
height: 180,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Card(
child: Ink(
color: Colors.green[200],
child: Padding(
padding: const EdgeInsets.all(8.0),
child: Column(
children: <Widget>[
Row(
children: <Widget>[
Container(
child: Text(
'',
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 20,
color: Colors.black),
),
),
],
),
SizedBox(height: 20.0),
Expanded(
child: Row(children: <Widget>[
Text('FEE SCEDULE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 80.0),
Text('JULY-SEPT',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
])),
Expanded(
child: Row(
children: <Widget>[
Text('DUE DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text('10-06-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
))
],
),
),
Expanded(
child: Row(
children: <Widget>[
Text('END DATE',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
)),
SizedBox(width: 105.0),
Text(
'19-07-2020',
style: TextStyle(
fontWeight: FontWeight.bold,
color: Colors.black,
),
)
],
),
)
],
),
),
),
),
),
Padding(
padding: const EdgeInsets.all(3.0),
child: Align(
alignment: Alignment.topLeft,
child: _buildBorderImage(),
),
)
],
),
),
Container(
child: Card(
color: Colors.black,
child: Padding(
padding: const EdgeInsets.all(14.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Text(
'Total Amount:',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
Text(
'254684' + '/-',
style: TextStyle(
fontWeight: FontWeight.bold, color: Colors.white),
),
],
),
),
//
),
),
],
),
);
}
Container _buildBorderImage() {
return Container(
child: Center(
child: Text(
'JULY , 2020',
style: TextStyle(
fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white),
),
),
width: 190.0,
height: 30,
decoration: BoxDecoration(
color: Colors.green,
// image: DecorationImage(
// image: AssetImage("assets/images/apply_leave.png"),
// fit: BoxFit.fill,
// alignment: Alignment.center,
// ),
),
);
}