Align columns inside a row in Flutter

Question

I'm trying to align columns inside a row but without success. I'm trying to create a layout like this:

But with this layout I can figure out how to wrap lines to avoid the overflow. This is the code for this layout.

  @override
  Widget build(BuildContext context) {
    return Container(
      padding: new EdgeInsets.only(bottom: 1.0),
      width: largura,
      child: new Card(
        child: new InkWell(
          onTap: () => onPress(indice),
          child: new Container(
            width: largura,
            padding: new EdgeInsets.all(5.0),
            child: Flexible(
              child: new Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Column(children: <Widget>[
                    Row(children: <Widget>[
                      Icon(Icons.play_arrow),
                      SizedBox(width: 5),
                      Text(titulo, maxLines: 3, overflow: TextOverflow.ellipsis)
                    ]),
                  ]),
                  Column(children: <Widget>[
                    Icon(Icons.access_time),
                    Text(duracao)
                  ]),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

I've tried to use the Flexible in various places without success.

The closest I've come is this:

This is the code:

Widget build(BuildContext context) {
    return Container(
      padding: new EdgeInsets.only(bottom: 1.0),
      width: largura,
      child: new Card(
        elevation: 5,
        child: new InkWell(
          onTap: () => onPress(indice),
          child: new Row(
            mainAxisSize: MainAxisSize.max,
            children: <Widget>[
              Column(
                children: [
                  SizedBox(height: 20),
                  Icon(Icons.play_arrow, color: Colors.green[500]),
                  SizedBox(height: 20),
                ],
              ),
              Flexible(
                child: Column(
                  children: [
                    Text(titulo, maxLines: 3, overflow: TextOverflow.ellipsis)
                  ],
                ),
              ),
              Align(
                alignment: Alignment.centerRight,
                child: Column(
                  children: [
                    SizedBox(height: 10),
                    Icon(Icons.access_time),
                    Text(duracao),
                    SizedBox(height: 10),
                  ],
                ),
              ),
            ],
          ),

        ),
      ),
    );
  }
}

This is almost right. Because it wraps the lines when they are too long but now I can't align the TIME icons and text to the right.

If someone could help me I will appreciate. Thanks.

EDIT

I should have said that this layout is part of another with this code:

AlignPositioned(
  alignment: Alignment.topCenter,
  dy: MediaQuery.of(context).size.height * 0.21,
  minChildWidth: MediaQuery.of(context).size.width,
  maxChildWidth: MediaQuery.of(context).size.width,
  maxChildHeight: MediaQuery.of(context).size.height * 0.58,
  minChildHeight: MediaQuery.of(context).size.height * 0.58,
  childHeight: MediaQuery.of(context).size.height * 0.58,
  child: Container(
   padding: EdgeInsets.all(12),
   child: Align(
     alignment: Alignment.topCenter,
     child: FutureBuilder(
         future: getTarefas(),
         builder: (context, snapshot) {
           if (tarefa != null && tarefa.tarefas.length > 0) {
             return  ListView.builder(
                 shrinkWrap: true,
                 controller: ScrollController(),
                 itemCount: tarefa.tarefas.length,
                 itemBuilder: (context, index) {
                   return tarefa.tarefas[index].data_inicio ==
                           dataselecionada
                       ? TarefaCard(
                           largura: MediaQuery.of(context).size.width * 0.8,
                           titulo: tarefa.tarefas[index].nome,
                           duracao: tarefa.tarefas[index].duracao_str,
                           icon: Icon(icons[0]),
                           indice: index,
                           onPress: _setTarefaAtiva)
                       : Container();
                 },
               );
           } else {
             return Center(
               child: CircularProgressIndicator(),
             );
           }
        }),
   ))),

TarefaCard is the method that creates that layout I'm having problems.

Thanks.

Answer 1

Try this:

@override
  Widget build(BuildContext context) {
    return Container(
      height: 75,
      padding: new EdgeInsets.all(5.0),
      width: double.infinity,
      child: new Card(
        child: new InkWell(
          onTap: () {},
          child: new Container(
            width: double.infinity,
            padding: new EdgeInsets.all(5.0),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: <Widget>[
                Icon(
                  Icons.play_arrow,
                  color: Colors.green,
                  size: 25,
                ),
                SizedBox(width: 10),
                Expanded(
                  child: SingleChildScrollView(
                    child: Container(
                      child: Text(
                        content,
                        maxLines: 3,
                        overflow: TextOverflow.ellipsis,
                        style: TextStyle(fontSize: 16),
                      ),
                    ),
                  ),
                ),
                SizedBox(
                  width: 10,
                ),
                Column(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: <Widget>[
                      Icon(
                        Icons.access_time,
                        color: Colors.green,
                        size: 25,
                      ),
                      Text("12:12"),
                    ]),
              ],
            ),
          ),
        ),
      ),
    );
  }

Output: