user9436741
user9436741

Reputation:

how to use column and row inside card in flutter

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

Answers (2)

encubos
encubos

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

If Clause
If Clause

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

Related Questions