I am new in flutter. can anyone help me out to get this type of card with column and Row combinations. Please help.
Asked
Active
Viewed 1,061 times
1
Arghadeep dey
- 31
- 4
-
Try out with flutter grid layout -https://stackoverflow.com/questions/44183795/flutter-layout-a-grid – Jahidul Islam Jun 20 '21 at 15:42
2 Answers
2
I made you a demo, i hope it is going to help you. I also write some comment to you in the code.
import 'package:flutter/material.dart';
class HomePage extends StatefulWidget {
@override
_HomePage createState() => _HomePage();
}
class _HomePage extends State<HomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
height: MediaQuery.of(context).size.height,
width: MediaQuery.of(context).size.width,
color: Colors.orange[100], // background color
child: ListView(
children: [
Container(
padding: EdgeInsets.only(left: 16.0, top: 20.0),
child: Text("All rooms", style: TextStyle(color: Colors.blue[900], fontSize: 24.0, fontWeight: FontWeight.bold)),
),
Container(
height: 200,
child: Row(
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Bed room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("4 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Living room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("2 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
],
),
),
Container(
height: 200,
child: Row(
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Kitchen", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("5 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Bathroom", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("1 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
],
),
),
Container(
height: 200,
child: Row(
children: [
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Bed room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("4 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
Container(
height: 200,
width: MediaQuery.of(context).size.width / 2 - 32, // minus 32 due to the margin
margin: EdgeInsets.all(16.0),
padding: EdgeInsets.all(16.0),
decoration: BoxDecoration(
color: Colors.yellow[100], // background color of the cards
borderRadius: BorderRadius.all(Radius.circular(20.0)),
boxShadow: [
// this is the shadow of the card
BoxShadow(
color: Colors.black,
spreadRadius: 0.5,
offset: Offset(2.0, 2.0),
blurRadius: 5.0,
),
],
),
child: Column(
mainAxisAlignment: MainAxisAlignment.end, // posion the everything to the bottom
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// place here your image
Text("Living room", style: TextStyle(fontSize: 20.0, color: Colors.brown, fontWeight: FontWeight.bold)),
Text("2 Lights", style: TextStyle(fontSize: 18.0, color: Colors.orange)),
],
),
),
],
),
),
],
),
),
);
}
}
This is how it looks:
Ferenc Orosi
- 223
- 3
- 7
-
I think this type of combination is best when we implement it dynamically. Otherwise, we get headache for this long repetitive code. – Arghadeep dey Jun 21 '21 at 07:15
0
you can use the below widget:
class MyCardItem extends StatelessWidget {
String title;
String description;
IconData iconData;
MyCardItem(this.title, this.description, this.iconData);
@override
Widget build(BuildContext context) {
return Card(
color: Colors.blue.withOpacity(0.2),
elevation: 3,
margin: EdgeInsets.all(8),
child: Column(
children: [
Icon(iconData, size:30),
Text(title, style: TextStyle(fontWeight: FontWeight.bold, color:Colors.brown),),
Text(description, style: TextStyle(color: Colors.orange),)
],
),
);
}
}
and then use it as follow:
MyCardItem("Bed room", "4 lights", Icons.done)
feel free to replace Icon with Image!
Abbasihsn
- 2,075
- 1
- 7
- 17