как использовать столбец и строку внутри карты во флаттере

Question

У меня есть флаттерные карты, и внутри карты я пытаюсь создать что-то вроде рисунка ниже, используя столбец и строку, но не уверен, как использовать их оба одновременно, поэтому будет очень признателен, если кто-то может помочь мне в достижении этой цели.

      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")
                ),
              )
            ]
          ),
        ),
      ),

Answer 1

Как вы говорите, вам нужно работать со столбцами и строками.

Попробуйте этот код для визуализации макета, аналогичного вашему изображению.

Я добавил Padding() только для того, чтобы сделать комната для текста.

Вы можете поместить это в дочерний элемент вашего Card() виджета.

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"),
            ])),
      ]),
    ])

Answer 2

Так что вы можете использовать строки и столбцы. Ваша структура может выглядеть так:

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 ')
       ),
    ],
),

Для этого вы также можете использовать виджет таблицы.