Flutter add gradient colors on image - flutter

I need to add an image on the full background and then needed to add a gradient on the image. I have added the image in the background but the issue is not able to add the gradient colors.
My code.
Container(
decoration: BoxDecoration(
image: DecorationImage(
image: AssetImage("images/sidebg.png"),
fit: BoxFit.cover,
),
),
padding: EdgeInsets.only(top: 50, bottom: 70, left: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
CircleAvatar(),
SizedBox(
width: 10,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Miroslava Savitskaya',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold),
),
Text('Active Status',
style: TextStyle(
color: Colors.white, fontWeight: FontWeight.bold))
],
)
],
),
Column(
children: drawerItems
.map((element) => Padding(
padding: const EdgeInsets.all(8.0),
child: Row(
children: [
Icon(
element['icon'],
color: Colors.white,
size: 30,
),
SizedBox(
width: 10,
),
Text(element['title'],
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 20))
],
),
))
.toList(),
),
Row(
children: [
Icon(
Icons.settings,
color: Colors.white,
),
SizedBox(
width: 10,
),
Text(
'Settings',
style:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
),
SizedBox(
width: 10,
),
Container(
width: 2,
height: 20,
color: Colors.white,
),
SizedBox(
width: 10,
),
Text(
'Log out',
style:
TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
)
],
)
],
),
);
you can see in image here is background and some gradient color on image. I have added the image i want some gradient like in this image


You can add gradient and blendMode to BoxDecoration in order to apply a gradient over the background image.

Related

how to lock widgets in place in flutter?

I am creating a news app in flutter. I want to achieve U.I as displayed in screenshot.
in the picture attached, there is title for 1st tile which is in 3 lines, now I want this U.I for all tiles. In the second tile the title for news is one line. which is causing trouble as widgets down in column are moved up.
Here is my code.
Container(
width: 260.w,
margin: EdgeInsets.only(right: 10.w),
decoration: BoxDecoration(
color: color.inactiveButton,
borderRadius:
BorderRadius.all(Radius.circular(8.sp))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
controller.category.firstHeader.list[index]
.thumbnail,
width: 260.w,
height: 143.h,
fit: BoxFit.fill,
),
Container(
width: 260.w,
padding: EdgeInsets.all(10.sp),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(8.sp)),
color: color.inactiveButton,
),
child: Column(
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(
Icons.remove_red_eye,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
'${controller.category.firstHeader.list[index].views!} Views',
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
Row(
children: [
const FaIcon(
FontAwesomeIcons.clock,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller.category.firstHeader
.list[index].latest!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
SizedBox(
height: 5.h,
),
Text(
controller.category.firstHeader
.list[index].title,
maxLines: 3,
style: GoogleFonts.inter(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
// color: Colors.grey,
),
),
SizedBox(
height: 5.h,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(5.sp),
decoration: BoxDecoration(
color: color.highlight,
borderRadius: BorderRadius.all(
Radius.circular(8.sp)),
),
child: Row(
children: [
FaIcon(
FontAwesomeIcons.faceSmile,
color: color.buttonText,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller
.category
.firstHeader
.list[index]
.favourites!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: color.buttonText,
),
),
],
),
),
Text(
controller.category.firstHeader
.list[index].country!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
),
],
),
)),

This can be solved by adding mainAxisAlignment: MainAxisAlignment.spaceBetween for column
Container(
width: 260.w,
margin: EdgeInsets.only(right: 10.w),
decoration: BoxDecoration(
color: color.inactiveButton,
borderRadius:
BorderRadius.all(Radius.circular(8.sp))),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Image.asset(
controller.category.firstHeader.list[index]
.thumbnail,
width: 260.w,
height: 143.h,
fit: BoxFit.fill,
),
Container(
width: 260.w,
padding: EdgeInsets.all(10.sp),
decoration: BoxDecoration(
borderRadius:
BorderRadius.all(Radius.circular(8.sp)),
color: color.inactiveButton,
),
child: Column(
// ----------- here ----------------------
mainAxisAlignment: MainAxisAlignment.spaceBetween,
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Row(
children: [
const Icon(
Icons.remove_red_eye,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
'${controller.category.firstHeader.list[index].views!} Views',
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
Row(
children: [
const FaIcon(
FontAwesomeIcons.clock,
color: Colors.grey,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller.category.firstHeader
.list[index].latest!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
SizedBox(
height: 5.h,
),
Text(
controller.category.firstHeader
.list[index].title,
maxLines: 3,
style: GoogleFonts.inter(
fontSize: 14.sp,
fontWeight: FontWeight.w500,
// color: Colors.grey,
),
),
SizedBox(
height: 5.h,
),
Row(
mainAxisAlignment:
MainAxisAlignment.spaceBetween,
children: [
Container(
padding: EdgeInsets.all(5.sp),
decoration: BoxDecoration(
color: color.highlight,
borderRadius: BorderRadius.all(
Radius.circular(8.sp)),
),
child: Row(
children: [
FaIcon(
FontAwesomeIcons.faceSmile,
color: color.buttonText,
size: 20,
),
SizedBox(
width: 5.w,
),
Text(
controller
.category
.firstHeader
.list[index]
.favourites!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: color.buttonText,
),
),
],
),
),
Text(
controller.category.firstHeader
.list[index].country!,
style: GoogleFonts.inter(
fontSize: 11.sp,
fontWeight: FontWeight.w400,
color: Colors.grey,
),
),
],
),
],
),
),
],
),
)),

Bottom Overflowed by pixels Cant Fix

import 'package:flutter/material.dart';
import 'package:google_fonts/google_fonts.dart';
import '../appbar.dart';
class DetailProductHeading extends StatelessWidget {
const DetailProductHeading({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
appBar: CustomAppBar(title: 'Detail Product'),
body: Padding(
padding: const EdgeInsets.all(35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFFAFAFA),
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
child: InkWell(
child: Center(
child: Image.asset(
'image/headphone.png',
height: 300,
),
),
),
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
height: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'TMA-2HD Wireless',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.w600,
fontSize: 25,
),
),
SizedBox(
height: 10,
),
Text(
"Rp. 1.500.000",
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
color: Color(0xFFFE3A30),
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.star,
color: Colors.yellow,
),
SizedBox(
width: 5.0,
),
Text('4.0')
],
),
Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
Row(
children: [
Text(
'86 Reviews',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
),
),
SizedBox(
width: 60,
),
SizedBox(
width: 107,
height: 20,
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Color(0xFFE5F6DF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
child: Text(
"Tersedia: 250",
style: (TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
color: Colors.green,
)),
),
),
)
],
),
],
),
SizedBox(
height: 15,
),
Divider(
color: Colors.grey,
thickness: 0.50,
),
SizedBox(
height: 15,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Description Product',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
SizedBox(
height: 10,
),
Text(
'The speaker unit contains a diaphragm that is precision-grown from NAC
Audio bio-cellulose, making it stiffer, lighter and stronger than regular
PET speaker units, and allowing the sound-producing diaphragm to vibrate
without the levels of distortion found in other speakers.',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
),
),
SizedBox(
height: 8,
),
Text(
'The speaker unit contains a diaphragm that is precision-grown from NAC
Audio bio-cellulose, making it stiffer, lighter and stronger than regular
PET speaker units, and allowing the sound-producing diaphragm to vibrate
without the levels of distortion found in other speakers.',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
),
),
],
)
],
),
),
],
),
),
);
}
}

Wrap your body:Padding with SingleChildScrollView for now.
class DetailProductHeading extends StatelessWidget {
const DetailProductHeading({
Key? key,
}) : super(key: key);
#override
Widget build(BuildContext context) {
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(35.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
decoration: BoxDecoration(
color: Color(0xFFFAFAFA),
borderRadius: BorderRadius.all(Radius.circular(30.0)),
),
child: InkWell(
child: Center(
child: Image.asset(
'image/headphone.png',
height: 300,
),
),
),
),
SizedBox(
height: 25,
),
Container(
margin: EdgeInsets.symmetric(horizontal: 10),
width: double.infinity,
height: 300,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'TMA-2HD Wireless',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.w600,
fontSize: 25,
),
),
SizedBox(
height: 10,
),
Text(
"Rp. 1.500.000",
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
color: Color(0xFFFE3A30),
fontWeight: FontWeight.w600,
),
),
SizedBox(
height: 5,
),
Row(
mainAxisAlignment: MainAxisAlignment.start,
mainAxisSize: MainAxisSize.max,
children: [
Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(
Icons.star,
color: Colors.yellow,
),
SizedBox(
width: 5.0,
),
Text('4.0')
],
),
Padding(padding: EdgeInsets.symmetric(horizontal: 5)),
Row(
children: [
Text(
'86 Reviews',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
),
),
SizedBox(
width: 60,
),
SizedBox(
width: 107,
height: 20,
child: OutlinedButton(
onPressed: () {},
style: OutlinedButton.styleFrom(
backgroundColor: Color(0xFFE5F6DF),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
child: Text(
"Tersedia: 250",
style: (TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
color: Colors.green,
)),
),
),
)
],
),
],
),
SizedBox(
height: 15,
),
Divider(
color: Colors.grey,
thickness: 0.50,
),
SizedBox(
height: 15,
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'Description Product',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontWeight: FontWeight.bold,
fontSize: 18,
),
),
SizedBox(
height: 10,
),
SizedBox(
height: 8,
),
Text(
'''The speaker unit contains a diaphragm that is precision-grown from NAC
Audio bio-cellulose, making it stiffer, lighter and stronger than regular
PET speaker units, and allowing the sound-producing diaphragm to vibrate
without the levels of distortion found in other speakers.''',
style: TextStyle(
fontFamily: GoogleFonts.dmSans().fontFamily,
fontSize: 12,
),
),
],
)
],
),
),
],
),
),
),
);
}
}

How to make responsive content in Container Flutter

How can I make the responsive Content in Container,
when I put anything in a container and the Height content is oversize what is the solution for this? I need to fix it when the user input too much information about the post and I warp it with less/more plugins and when the user uses it the screen is over pixel for sure
I use media query on the container that means I fix the size is okay so it's will happen if too much text
Widget _postWidget() {
return Container(
height: MediaQuery.of(context).size.height * 0.40,
width: MediaQuery.of(context).size.width * 1,
child: Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Expanded(
flex: 1,
child: Container(
padding: EdgeInsets.symmetric(horizontal: 20),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Container(
height: 45, //height, //155,
width: 45, //width, //155,
decoration: BoxDecoration(
shape: BoxShape.circle,
color: const Color(0xff7c94b6),
image: DecorationImage(
image: NetworkImage(''),
fit: BoxFit.cover,
),
),
),
),
Expanded(
flex: 6,
child: Padding(
padding: EdgeInsets.symmetric(horizontal: 10),
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
RichText(
text: TextSpan(
text: '[C]post.username ',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.bold),
children: const <TextSpan>[
TextSpan(
text: '3h',
style: TextStyle(
color: Colors.grey,
fontFamily: 'SukhumvitSetBold',
fontWeight: FontWeight.w400)),
],
),
),
Text(
'[user]Desuka',
style: TextStyle(
color: Colors.grey[500],
fontFamily: 'SukhumvitSetMedium',
),
)
],
),
),
),
Expanded(
flex: 2,
child: SizedBox(
width: 200.0,
height: 30.0,
child: OutlinedButton(
child: Text(
'Join+',
style: TextStyle(
color: HexColor("7225FF"),
),
),
onPressed: () => print("it's pressed"),
style: ElevatedButton.styleFrom(
side: BorderSide(
width: 1.5,
color: HexColor("7225FF"),
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(32.0),
),
),
))),
],
),
),
),
InkWell(
child: Container(
margin: const EdgeInsets.only(
top: 10,
bottom: 10,
right: 20,
left: 20,
),
width: double.infinity,
height: 170.0,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.0),
image: DecorationImage(
image: NetworkImage(
'https://gitlab.com/2Shours/alphapic/raw/master/22.jpeg'),
fit: BoxFit.cover,
),
),
),
),
SizedBox(
height: 5,
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
Text(
'Travis Scott x Nike Fregment',
style: TextStyle(
color: Colors.black,
fontFamily: 'SukhumvitSetBold',
fontSize: 16,
fontWeight: FontWeight.bold),
),
],
),
),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20.0),
child: Column(
children: [
ReadMoreText(
'The Flutter framework builds its layout via the composition of widgets, everything that you construct programmatically is a widget and these are compiled together to create the user interface. ',
style: TextStyle(
color: Colors.black,
fontSize: 15,
fontFamily: 'SukumvitSetMedium'),
trimLines: 2,
colorClickableText: HexColor("7225FF"),
trimMode: TrimMode.Line,
trimCollapsedText: 'More',
trimExpandedText: ' Less',
),
],
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 10.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: <Widget>[
Row(
children: <Widget>[
Row(
children: <Widget>[
IconButton(
icon: Icon(
(IconData(
0xe902,
fontFamily: 'heartPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Like post'),
),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 10.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(
IconData(0xe901, fontFamily: 'commentPost')),
iconSize: 20.0,
onPressed: () {}),
Text(
'2222',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
SizedBox(width: 20.0),
Row(
children: <Widget>[
IconButton(
icon: Icon(IconData(0xe906, fontFamily: 'offerPost')),
iconSize: 20.0,
onPressed: () {},
),
Text(
'Offer',
style: TextStyle(
fontSize: 14.0,
fontFamily: 'SukhumvitSetMedium',
fontWeight: FontWeight.w600,
),
),
],
),
],
),
IconButton(
icon: Icon(
(IconData(
0xe908,
fontFamily: 'wishlistPost',
)),
color: Colors.purple,
size: 20,
),
iconSize: 30.0,
onPressed: () => print('Save post'),
),
],
),
),
],
),
);
}

Container design structure - Flutter

I have the following problem when designing, inside a container I have elements that I want to organize like the following design:
until I managed to write this code:
return Container(
child: ListView(
controller: controller,
children: [
Center(
child: Container(
margin: EdgeInsets.fromLTRB(0, 10, 0, 0),
height: 3,
width: 50,
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.3),
borderRadius: BorderRadius.circular(5)
),
),
),
SizedBox(
height: 20,
),
Container(
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
//Text('Recorrido',style: TextStyle(color: Colors.black,fontWeight: FontWeight.bold)),
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
SizedBox(
height: 20,
)
],
),
),
Center(
child: Text(
'Informacion del Vehiculo',
style: TextStyle(color: Colors.black),
),
),
Container(
height: 150,
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
Text(
'Horas Corridos',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.tachometerAlt,
size: 40,
),
Text(
'30 KM',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Total Distancia',
style: TextStyle(color: Colors.white),
)
],
),
Column(
children: [
FaIcon(
FontAwesomeIcons.thermometerQuarter,
size: 40,
),
Text(
'20',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold
),
),
Text(
'Combustible',
style: TextStyle(color: Colors.white),
)
],
)
],
),
decoration: BoxDecoration(
color: colorPrimario,
borderRadius: BorderRadius.circular(15)
),
)
],
),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.only(
topLeft: Radius.circular(15),
topRight: Radius.circular(15),
),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.5),
spreadRadius: 5,
blurRadius: 7,
offset: Offset(0, 1), // changes position of shadow
),
],
),
);
the result obtained has been this has this error in design:
How could you correct this design in a correct way and achieve that design?.
thanks for your help.

Try adding some padding to the container which has the row as a child
Container(
height: 150,
padding: EdgeInsets.only(top: 20),
child: Row(
),
),

To fix blue container:
Set crossAxisAlignment of the row to: crossAxisAlignment.Center
For every column in the row, set mainAxisAlignment to mainAxisAlignment.spaceEvenly

first body Container set padding:
body: Container(
padding: const EdgeInsets.all(10.0),
child: ListView(
For Row with icon use Row with Expended Widget:
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
children: [
Expanded(
flex: 2,
child: Container(
child: Row(
children: [
ClipOval(
child: Image.asset(
"assets/img/findout/friends2.jpg",
width: 50,
height: 50,
fit: BoxFit.cover,
),
),
Padding(
padding: const EdgeInsets.only(left: 10.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
textDirection: TextDirection.ltr,
children: [
Text('Ubicacion',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('Molina, Vieja',
style: TextStyle(color: Colors.black)
)
],
),
)
],
),
)
),
Expanded(
flex: 1,
child: Container(
child: Column(
crossAxisAlignment: CrossAxisAlignment.end,
textDirection: TextDirection.ltr,
children: [
Text('Mitsubishi',
style: TextStyle(
color: Colors.black,
fontWeight: FontWeight.bold
)
),
Text('FRT-674',
style: TextStyle(color: Colors.black)
)
],
),
)
)
],
),
)
blue Container:
Container(
height: 150,
padding: const EdgeInsets.all(5.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
FaIcon(
FontAwesomeIcons.clock,
size: 40,
),
Text(
'10.2',
style: TextStyle(
color: Colors.white,
fontWeight: FontWeight.bold,
fontSize: 15
),
),
For every Column add mainAxisAlignment: MainAxisAlignment.center,

how to place image on border of card in flutter?

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(),
);
}

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.

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,
// ),
),
);
}