как разместить изображение на границе карточки во флаттере?

Question

Я новичок во флаттере, я делюсь изображением, на котором есть карточка, а на ее границе есть изображение (как вы видите дату, то есть ИЮЛЬ, 2020, показывается внутри изображения). Я понятия не имею, как достичь этой функциональности. Пожалуйста, помогите мне. Я написал код ниже для создания карты. Код отображает изображение даты внутри карты. Нужно ли мне следовать за другим виджетом, а не за картой и списком?

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    color: Colors.grey[100],
    border: Border.all(
      width: 1, //
      //                <--- border width here
    ),
  );
}
Widget _myListView(BuildContext context) {
return new ListView.separated(
  padding: const EdgeInsets.all(8),
  itemCount: 1,
  itemBuilder: (BuildContext context, int index) {
    return  Padding(
        padding: const EdgeInsets.all(0.0),
        child:
        Column(
            children: <Widget>[
        Container(
            decoration:  myBoxDecoration(),
            height: 180,


            child :
            Card(
                    child: Ink(
                      color: Colors.grey[200],
                      child : ListTile(
                        onTap: () {
                        },
                        title: Column(
                            children: <Widget>[
                              Row(
                               children: <Widget>[
                              Container(
                                child:

                                Center(child: Text('JULY , 2020' ,  style: TextStyle(
                                    fontWeight: FontWeight.bold ,
                                    fontSize: 20,
                                    color: Colors.white
                                ),),),
                                width: 190.0,
                                height: 30,
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                    image: AssetImage("assets/images/apply_leave.png"),
                                    fit: BoxFit.fill,
                                    //  alignment: Alignment.center,
                                  ),
                                ),
                              ),
                              Container(
                                 child:Text('' ,  style: TextStyle(
                                     fontWeight: FontWeight.bold ,
                                     fontSize: 20,
                                     color: Colors.black
                                 ),)
                              )


                              ]
                              ),
                              SizedBox(height: 20.0),

                             Expanded(
                               child :
                               Row(
                                   children: <Widget>[
                                Text('FEE SCEDULE' , style: TextStyle(
                                 fontWeight: FontWeight.bold ,
                                 color: Colors.black,


                                   )),
                                     SizedBox(width: 80.0),
                                     Text('JULY-SEPT' , style: TextStyle(
                                       fontWeight: FontWeight.bold ,
                                       color: Colors.black,


                                     ))

                                   ])
                             ),
                              Expanded(
                                  child :
                                  Row(
                                      children: <Widget>[
                                        Text('DUE DATE' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        )),
                                        SizedBox(width: 105.0),
                                        Text('10-06-2020' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        ))

                                      ])
                              ),
                              Expanded(
                                  child :
                                  Row(
                                      children: <Widget>[
                                        Text('END DATE' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        )),
                                        SizedBox(width: 105.0),
                                        Text('19-07-2020' , style: TextStyle(
                                          fontWeight: FontWeight.bold ,
                                          color: Colors.black,


                                        ))

                                      ])
                              )

                            ]




                      ),
                    ),
                  ),
                )


        ),
              Container(
                child:  Card(
                  color:  Colors.black,

                  child: Padding(
                    padding: const EdgeInsets.all(14.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,


                      children: <Widget>[
                        Text('Total Amount:',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
                        Text('254684'+'/-',style: TextStyle(fontWeight: FontWeight.bold , color: Colors.white),),
                      ],
                    ),
                  ),
                  //
                ),

              )
    ]
        )
    );
  },
  separatorBuilder: (BuildContext context,
      int index) => const Divider(),
);

}

Answer 1

Не стесняйтесь играть со значениями, чтобы получить наиболее желаемый результат:

BoxDecoration myBoxDecoration() {
  return BoxDecoration(
    color: Colors.grey[100],
    border: Border.all(
      width: 1, //
      //                <--- border width here
    ),
  );
}

Widget _myListView(BuildContext context) {
  return Padding(
    padding: const EdgeInsets.all(8.0),
    child: Column(
      children: <Widget>[
        Container(
          decoration: myBoxDecoration(),
          height: 180,
          child: Stack(
            children: <Widget>[
              Align(
                alignment: Alignment.center,
                child: Card(
                  child: Ink(
                    color: Colors.green[200],
                    child:  Padding(
                      padding: const EdgeInsets.all(8.0),
                      child: Column(
                        children: <Widget>[
                          Row(
                            children: <Widget>[
                              Container(
                                child: Text(
                                  '',
                                  style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      fontSize: 20,
                                      color: Colors.black),
                                ),
                              ),
                            ],
                          ),
                          SizedBox(height: 20.0),
                          Expanded(
                              child: Row(children: <Widget>[
                                Text('FEE SCEDULE',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                    )),
                                SizedBox(width: 80.0),
                                Text('JULY-SEPT',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                    ))
                              ])),
                          Expanded(
                            child: Row(
                              children: <Widget>[
                                Text('DUE DATE',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                    )),
                                SizedBox(width: 105.0),
                                Text('10-06-2020',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                    ))
                              ],
                            ),
                          ),
                          Expanded(
                            child: Row(
                              children: <Widget>[
                                Text('END DATE',
                                    style: TextStyle(
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black,
                                    )),
                                SizedBox(width: 105.0),
                                Text(
                                  '19-07-2020',
                                  style: TextStyle(
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black,
                                  ),
                                )
                              ],
                            ),
                          )
                        ],
                      ),
                    ),
                  ),
                ),
              ),
              Padding(
                padding: const EdgeInsets.all(3.0),
                child: Align(
                  alignment: Alignment.topLeft,
                  child: _buildBorderImage(),
                ),
              )
            ],
          ),
        ),
        Container(
          child: Card(
            color: Colors.black,

            child: Padding(
              padding: const EdgeInsets.all(14.0),
              child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: <Widget>[
                  Text(
                    'Total Amount:',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.white),
                  ),
                  Text(
                    '254684' + '/-',
                    style: TextStyle(
                        fontWeight: FontWeight.bold, color: Colors.white),
                  ),
                ],
              ),
            ),
            //
          ),
        ),
      ],
    ),
  );
}

Container _buildBorderImage() {
  return Container(
    child: Center(
      child: Text(
        'JULY , 2020',
        style: TextStyle(
            fontWeight: FontWeight.bold, fontSize: 20, color: Colors.white),
      ),
    ),
    width: 190.0,
    height: 30,
    decoration: BoxDecoration(
      color: Colors.green,
//      image: DecorationImage(
//        image: AssetImage("assets/images/apply_leave.png"),
//        fit: BoxFit.fill,
        //  alignment: Alignment.center,
//      ),
    ),
  );
}

Answer 2

Если я вас правильно понимаю, вы хотите поместить изображение над контейнером с рамкой. Для этого вы можете использовать Stack .

Оберните этот контейнер в него и поместите его в начало списка детей, чтобы он отображался под изображением, и все остальное. Используйте позиционирование для перестановки виджетов в стеке. Вы можете обернуть стопку в контейнере, чтобы лучше ее расположить.