Flutter показывает контейнер в центре стопки

Question

Я использую стек, чтобы показать контейнер, но есть одна проблема, с которой мне нужно показать небольшой контейнер даты в середине стека.

Мой код

 Widget _buildListItem(int index) {
    double statusBarHeight = MediaQuery.of(context).padding.top;
    double width = MediaQuery.of(context).size.width;
    double height = MediaQuery.of(context).size.height;
    return ClipRRect(
      borderRadius: BorderRadius.all(Radius.circular(20)),
      child: Container(
        margin: EdgeInsets.only(left: width * 0.1),
        child: Stack(
          children: <Widget>[
            Container(
              width: width * 0.6,
              height: height * 0.17,
              decoration: BoxDecoration(
                image: DecorationImage(
                  image: AssetImage(
                    'assets/images/1.jpg',
                  ),
                  fit: BoxFit.fill,
                ),
              ),
            ),
            Padding(padding: EdgeInsets.only(top: height * 0.17),
            child: Container(
              height: height * 0.15,
              color: Colors.white,
              width: MediaQuery.of(context).size.width * 0.6,
              child: Padding(
                padding: const EdgeInsets.only(top: 7, bottom: 7, left: 7, right: 7),
                child: Row(
                  children: <Widget>[
                    Column(crossAxisAlignment: CrossAxisAlignment.start,
                      children: <Widget>[
                        Text(
                          _events[index]['name'],
                          style: TextStyle(
                              color : Color(0xff000000),
                              fontWeight: FontWeight.bold,
                              fontSize: 17
                          ),
                        ),
                        Text(
                          _events[index]['sentence'],
                          style: TextStyle(
                              color : Color(0xff808080),
                              fontSize: 15
                          ),
                          textAlign: TextAlign.left,
                        ),
                        Text(
                          '${_events[index]['date']} ${_events[index]['month']} ${_events[index]['year']}',
                          style: TextStyle(
                              color : Color(0xff808080),
                              fontSize: 15
                          ),
                          textAlign: TextAlign.left,
                        ),
                      ],),
                    Spacer(),
                    Icon(Icons.favorite_border, size: 20, color : Color(0xff808080),),


                  ],
                ),
              ),
            ),)

          ],
        ),
      ),
    );
  }
}

Вот результат моего кода

Мне нужно что-то это в посередине изображения и содержимого

Также одна вещь: есть ли какой-либо значок в трепете, или мы можем добавить цвета границ в сердце, как на втором изображении значок сердца?

Answer 1

Позиционированный виджет помогает вам позиционировать элемент, который находится в стеке.

Используйте Positioned.fill с Align inside a Stack:

Stack(
  children: <Widget>[      
    Positioned.fill(
      child: Align(
        alignment: Alignment.centerRight,
        child: ....                
      ),
    ),
  ],
),

Answer 2

Positioned(
    left:10,
    right:0,
    top:height * 0.14,
    child:Container(
    height:height *0.05
    padding: EdgeInsets.symmetric(horizontal: 15,vertical: 10),
    decoration:BoxDecoration(
    borderRadius:BorderRadius.circular(15),
    color:Colors.white
    ),
    child:Column(
     mainAxisAlignment: MainAxisAlignment.center,
     crossAxisAlignment: CrossAxisAlignment.start,
     children:<Widget>[
    Text("8"),
    Text("Jun")
    ]
    )
    )
)

добавьте это в свой стек как последний дочерний элемент, чтобы он был выше других виджетов и значка был Icons.favorite