Home > Back-end >  Placing two widgets below each other inside Stack
Placing two widgets below each other inside Stack

Time:06-07

I am having problems positioning the text inside my stack of widgets.

I just want to position two text widgets one below another. But one of them is initially at the bottom already , it moves up the whole widget. You can see in this attachment the result I would like to achieve (red lines) and the current result:

enter image description here

 Widget build(BuildContext context) {
    return Stack(
      children: [
        Card(
            elevation: 6,
            margin: const EdgeInsets.all(8),
            child: Padding(
              padding: const EdgeInsets.only(
                  bottom: 60, right: 5, left: 5, top: 5), //bordes interiores
              child: Stack(children: [
                Container(
                  width: double.infinity,
                  height: 200,
                  decoration: BoxDecoration(
                      image: DecorationImage(
                          image: NetworkImage(image as String), //varImg.url
                          fit: BoxFit.cover)),
                  //child:
                ),
              ]),
            )),
        Container(
          //alignment: Alignment.centerLeft,
          padding: const EdgeInsets.all(10),
          child: Column(
            children: [
              Row(
                children: [
                  IconTheme(
                      data: IconThemeData(
                          color: gender == 'Male' ? Colors.blue : Colors.pink),
                      child: Icon(gender == 'Male'
                          ? Icons.male_rounded
                          : Icons.female_rounded)),
                  Positioned(
                    bottom: 10,
                    child: Text(
                      title,
                      style: const TextStyle(
                          fontSize: 18,
                          fontWeight: FontWeight.bold,
                          color: Colors.grey),
                    ),
                  ),
                ],
              ),
              
            ],
          ),
        ),
      ],
    );
  }
}

CodePudding user response:

You could use a Column with mainAxisAlignment set to MainAxisAlignment.end and set the two widgets as its children.

  • Related