How to set icon to topRight

Question

My widget inside row, and I want to set Icon widget possition on topRight but always fail beacuse my Icon always in center possition

I already use

Align(
  alignment: Alignment.topRight,
  child: Icon(
    LineAwesomeIcons.heart,
    color: lightColor,
    size: 36,
  ),
)

To force possition but always fail. How to achieve this situation? Icon always be center

My layout

Widget build(BuildContext context) {
  return Container(
    padding: EdgeInsets.symmetric(
      vertical: 14.0,
      horizontal: 18.0,
    ),
    margin: EdgeInsets.only(
      bottom: 20.0,
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.0),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.2),
          spreadRadius: 1.0,
          blurRadius: 6.0,
        ),
      ],
    ),
    child: Row(
      children: <Widget>[
        CircleAvatar(
          backgroundColor: Color(0xFFD9D9D9),
          backgroundImage: NetworkImage(USER_IMAGE),
          radius: 36.0,
        ),
        SizedBox(width: 10.0),
        Flexible(
          child: RichText(
            text: TextSpan(
              text: widget.status + "\n",
              style: TextStyle(
                color: Colors.purple,
                fontSize: 12,
                fontWeight: FontWeight.w400,
                height: 1.3,
              ),
              children: <TextSpan>[
                TextSpan(
                  text: widget.name + "\n",
                  style: TextStyle(
                    color: Colors.black,
                    fontSize: 16,
                    fontWeight: FontWeight.w600,
                    height: 1.3,
                  ),
                ),
                TextSpan(
                  text: widget.address,
                  style: TextStyle(
                    color: Colors.black38,
                    fontWeight: FontWeight.w400,
                    fontSize: 14,
                  ),
                ),
              ],
            ),
          ),
        ),
        SizedBox(width: 10.0),
        Icon(
          LineAwesomeIcons.heart,
          color: lightColor,
          size: 36,
        )
        Align(
          alignment: Alignment.topRight,
          child: Icon(
            LineAwesomeIcons.heart,
            color: lightColor,
            size: 36,
          ),
        )
      ],
    ),
  );
}

I want to output like

Answer 1

Try this one

Container(
    padding: EdgeInsets.symmetric(
      vertical: 14.0,
      horizontal: 18.0,
    ),
    margin: EdgeInsets.only(
      bottom: 20.0,
    ),
    decoration: BoxDecoration(
      color: Colors.white,
      borderRadius: BorderRadius.circular(12.0),
      boxShadow: [
        BoxShadow(
          color: Colors.grey.withOpacity(0.2),
          spreadRadius: 1.0,
          blurRadius: 6.0,
        ),
      ],
    ),
    child: Row(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: <Widget>[
        Expanded(
          child: Row(
            children: <Widget>[
              CircleAvatar(
                backgroundColor: Color(0xFFD9D9D9),
                backgroundImage: NetworkImage('https://banner2.cleanpng.com/20180920/yko/kisspng-computer-icons-portable-network-graphics-avatar-ic-5ba3c66df14d32.3051789815374598219884.jpg'),
                radius: 36.0,
              ),
              SizedBox(width: 10.0),
              Flexible(
                child: RichText(
                  text: TextSpan(
                    text: "status\n",
                    style: TextStyle(
                      color: Colors.purple,
                      fontSize: 12,
                      fontWeight: FontWeight.w400,
                      height: 1.3,
                    ),
                    children: <TextSpan>[
                      TextSpan(
                        text: "Name \n",
                        style: TextStyle(
                          color: Colors.black,
                          fontSize: 16,
                          fontWeight: FontWeight.w600,
                          height: 1.3,
                        ),
                      ),
                      TextSpan(
                        text: 'Poplar pharma limited Dermatologist San Franscisco CA|5',
                        style: TextStyle(
                          color: Colors.black38,
                          fontWeight: FontWeight.w400,
                          fontSize: 14,
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              SizedBox(width: 10.0),

            ],
          ),
        ),
        Align(
          alignment: Alignment.topCenter,
          child: Icon(
            Icons.help,
            color: Colors.cyan,
            size: 36,
          ),
        ),
      ],
    ),
  )

Answer 2

Set crossAxisAlignment to CrossAxisAlignment.start in your Row

Like this

Row(
 crossAxisAlignment: CrossAxisAlignment.start,
 children : [...]
)

UPDATE The avatar stays in the center

Row(
      mainAxisAlignment: MainAxisAlignment.center,
      mainAxisSize: MainAxisSize.min,
      children: [
        CircleAvatar(),
        SizedBox(width: 20),
        Row(
          mainAxisSize: MainAxisSize.min,
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text("fhfhfj\nufhfhjfhf\njifjifjifj\n",
                style: TextStyle(color: Colors.black)),
            SizedBox(width: 20),
            Icon(Icons.favorite, color: Colors.black),
          ],
        ),
      ],
    )