Reputation:
I have a flutter cards and inside of the card I'm trying to design something like the picture below using Column and row but not sure how to use both of them at the same time so it'll be really appreciated if somebody can help me on how to achieve this thing.
Container(
height: 100,
child: Card(
elevation: 8.0,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8.0),
),
child: Column(
children: <Widget>[
Container(
height: 30,
padding: EdgeInsets.all(1),
child: ListTile(
title: Text('US Daily Retail Delieveries by Brand', style: TextStyle(fontSize: 13),),
trailing: Icon(Icons.favorite, size: 20,),
),
),
Divider(color: Colors.black,),
Container(
height: 30,
child: new ListTile(
title: Text("Price")
),
)
]
),
),
),
Upvotes: 0
Views: 8175
Reputation: 3283
As you say, you need to work with Columns and Rows.
Try this code to visualize the layout, similar to your image.
I added some Padding()
just to make room for the text.
You can put this inside the child of your Card()
widget.
Column(children: [
Row(children: [
Text("Row 1"),
Spacer(),
Icon(Icons.account_box),
]),
Row(children: [
Padding(
padding: EdgeInsets.all(16.0),
child: Column(children: [
Text("Data 1 Title"),
Text("Data 1.1"),
Text("Data 1.2"),
])),
Padding(
padding: EdgeInsets.all(16.0),
child: Column(children: [
Text("Data 2 Title"),
Text("Data 2.1"),
Text("Data 2.2"),
])),
Padding(
padding: EdgeInsets.all(16.0),
child: Column(children: [
Text("Data 3 Title"),
Text("Data 3.1"),
Text("Data 3.2"),
])),
Padding(
padding: EdgeInsets.all(16.0),
child: Column(children: [
Text("Data 4 Title"),
Text("Data 4.1"),
Text("Data 4.2"),
])),
]),
])
Upvotes: 2
Reputation: 77
So you could use Row and Column. Your structure could look like this:
Column(
children : [
// A Row for the top
Row(children: [ Text('Group Name'), Icon(Icons.icon)] ),
//For the Line
Divider(height, thickness etc...),
// A Row for each Row in the table from now on
//VerticalDivider for the vertical line, just as Divider
Row(children :[ Text('price1'), VerticalDivider(), Text('1')],
// be carefull with the $ since it's used to put variables
// into strings, eg Text('Name : $name ')
),
],
),
You could also use a Table Widget for this.
Upvotes: 0