0

El problema que me surge es que él widget esta dentro de un Container Column y al querer crear otro Container para poner el texto me lo pone debajo del icono y no al lado.

No conozco ninguna propiedad que pueda utilizar, para poder escribir al lado, e probado bastantes cosas, pero no consigo el resultado deseado.

Gracias, un saludo.

introducir la descripción de la imagen aquí

Widget renderTexto(){

    return Container(
      width: double.infinity,
      height: 190,
      decoration: new BoxDecoration(
        color:Colors.white,
        border: Border(
        top: BorderSide(   
      color: Colors.black12,
      width: 1,
          ),
        bottom: BorderSide(   
      color: Colors.black12,
      width: 1,
          ),
        ),
      ),
     child: Column(
        children: [Container(
          padding: const EdgeInsets.only(
            top: 10,
            left: 17,
            bottom: 1
          ),
          child: Align(
          alignment: Alignment.topLeft,
          child: Text( 'Post title',
            style: TextStyle(
              color: Colors.black ,
              fontSize:20,
              fontWeight: FontWeight.w800
            ),
          ),
        ),
        ),
        Container( 
        child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
                'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy',
                style: TextStyle(color: Colors.grey)),
            Row(
              children: [
                Icon(
                  Icons.location_on,
                  color: Colors.grey,
                ),
                Text(
                  'Barcelona',
                  style: TextStyle(color: Colors.grey),
                )
              ],
            ),
        ],
      ),
    ),
     )
     )//aki e marca fallo
    );
  }
8
  • Sería bueno que agregues una imagen de como se ve actualmente y como deseas mostrarlo para tener más info el 21 abr. 2020 a las 18:04
  • si la verdad es que podria haber puesta imagen el 21 abr. 2020 a las 18:17
  • ufff me explique fatal diego, e colgado una foto de como quiero que se bea , aunque estoy probando cosas con tu ejemplo haber si me sale. Gracias diego. el 21 abr. 2020 a las 18:45
  • ahí actualicé la respuesta el 21 abr. 2020 a las 18:53
  • ya lo pille jeje pero me marca un fallo de indentacion abajo el 21 abr. 2020 a las 19:08

1 respuesta 1

0

Debes usar Row para alinear elementos en horizontal, el Column agrega elementos y los posiciona en vertical, y no te olvides de usar Expanded para decirle que ocupe el espacio disponible, aquí tienes tu ejemplo corregido:


 Widget renderTexto() {
    return Container(
      width: double.infinity,
      height: 190,
      //color:Colors.white,
      decoration: new BoxDecoration(
        color: Colors.white,
        border: Border(
          top: BorderSide(
            color: Colors.black12,
            width: 1,
          ),
          bottom: BorderSide(
            color: Colors.black12,
            width: 1,
          ),
        ),
      ),
      child: Column(children: [
        Container(
          padding: const EdgeInsets.only(top: 10, left: 17, bottom: 1),
          child: Align(
            alignment: Alignment.topLeft,
            child: Text(
              'Post title',
              style: TextStyle(
                  color: Colors.black,
                  fontSize: 20,
                  fontWeight: FontWeight.w800),
            ),
          ),
        ),
        Expanded(
          child: Row(
            children: [
              Expanded(
                child: Container(
                  padding: const EdgeInsets.only(
                      top: 4, left: 17, right: 6, bottom: 2),
                  child: Align(
                      alignment: Alignment.topLeft,
                      child: Text(
                          'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper.',
                          style: TextStyle(
                              color: Colors.grey[400],
                              fontSize: 19,
                              fontWeight: FontWeight.w300))),
                ),
              ),
              Container(
                padding: const EdgeInsets.only(
                  top: 4,
                  left: 17,
                ),
                child: Align(
                  alignment: Alignment.center,
                  child: Image.asset('assets/images/icons/ic_location.png',
                      width: 25),
                ),
              ),
            ],
          ),
        ),
      ]),
    );
  }

Te recomiendo este enlace para que aprendas un poco más sobre layouts en Flutter: https://flutter.dev/docs/development/ui/layout

UPDATE

Según la imagen que adjuntaste, el código podría quedar así :

  Widget renderTexto() {
    return Container(
      width: double.infinity,
      decoration: new BoxDecoration(
        color: Colors.white,
        border: Border(
          top: BorderSide(
            color: Colors.black12,
            width: 1,
          ),
          bottom: BorderSide(
            color: Colors.black12,
            width: 1,
          ),
        ),
      ),
      child: Padding(
        padding: const EdgeInsets.all(8.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: [
            Text(
                'Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy',
                style: TextStyle(color: Colors.grey)),
            Row(
              children: [
                Icon(
                  Icons.location_on,
                  color: Colors.grey,
                ),
                Text(
                  'Barcelona',
                  style: TextStyle(color: Colors.grey),
                )
              ],
            ),
          ],
        ),
      ),
    );
  }
1
  • gracias diego me lo mirare. el 21 abr. 2020 a las 18:21

Tu Respuesta

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.