I am beginner to flutter and I am trying to add the new column, first one is default visible and the second one is visible (this is needs to be done, I have already have the code but before adding things, I am trying to set it up) by the action. So I have updated code with columns, but if I do that, all the cards are displaying as empty, not sure where I am making issue
@override
Widget build(BuildContext context) {
var img = widget.data['password'];
return Card(
// borderOnForeground: true,
color: const Color.fromARGB(255, 55, 55, 55),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10.0),
side: const BorderSide(
color: Color.fromARGB(255, 60, 60, 60),
width: 1.0,
),
),
child: ClipPath(
clipper: ShapeBorderClipper(
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(15),
),
),
child: Container(
height: 150,
decoration: const BoxDecoration(
border: Border(
left: BorderSide(
color: Color.fromARGB(255, 143, 175, 112), width: 10),
),
color: Color.fromARGB(255, 242, 241, 241),
),
padding: const EdgeInsets.all(10.0),
// alignment: Alignment.centerLeft,
child: Row(
children: [
Expanded(
flex: 4,
child: Container(
// child: Column( //!!!!!!!!!!!!!!!!!If I add this line of code to make two columns it is displaying only the above container
children: [
Row(
children: [
Expanded(
flex: 9,
child: Container(
child: Column(children: [
const SizedBox(height: 10),
Image.asset(
'assets/bank_logos/$img.png',
height: 60,
),
// Icon(
// Icons.card_membership,
// color: Color.fromARGB(255, 183, 183, 183),
// size: 50.0,
// semanticLabel:
// 'Text to announce in accessibility modes',
// ),
const Spacer(),
Text(img),
const SizedBox(height: 10),
]),
),
),
Expanded(
flex: 1,
child: CustomPaint(painter: DashedLinePainter()),
),
],
)),
),
Expanded(
flex: 6,
child: Container(
child: Column(children: [
const SizedBox(height: 15),
const Row(
children: [
Icon(
Icons.person,
color: Color.fromARGB(255, 93, 93, 93),
size: 22.0,
),
SizedBox(width: 5),
Text("Hussain"),
SizedBox(width: 15),
Icon(
Icons.content_copy,
color: Color.fromARGB(255, 168, 168, 168),
size: 18.0,
),
],
),
const SizedBox(height: 10),
Row(
children: [
const Icon(
Icons.lock,
color: Color.fromARGB(255, 93, 93, 93),
size: 22.0,
),
const SizedBox(width: 5),
const Text("*****"),
const SizedBox(width: 15),
IconButton(
onPressed: () {
print("copied");
},
icon: const Icon(
Icons.content_copy,
color: Color.fromARGB(255, 168, 168, 168),
size: 18.0,
),
),
],
),
]),
),
),
],
),
),
),
);
}
2
Answers
The problem is that you have tow nested columns:
The quickest solution would be set a fixed height for the second column.
You can wrap a
SizedBox()
and add a height.Or, since you already have an unused container right above the Column2, you can just add a fixed height:
Try this it will work.