Как назначить фоновое изображение для столбца в флаттере - PullRequest
0 голосов
/ 13 марта 2019

Мне было интересно, как добавить изображение в качестве фона для столбца в моей флипкарте в флаттере.

Код того, куда я хотел бы добавить изображение, выглядит следующим образом (от дочернего нового столбца и до конца):

 FlipCard(
            direction: FlipDirection.HORIZONTAL, // default
            front: Container(
              decoration: new BoxDecoration(
                border: new Border.all(color: Colors.black),
                borderRadius: BorderRadius.circular(10.0),
              ),
              margin: EdgeInsets.all(10.0),
              child: new Column(
                mainAxisAlignment: MainAxisAlignment.start,
                children: [
                  new Column(
                    children: <Widget>[
                      new Container(
                          margin: EdgeInsets.all(10),
                          width: 190.0,
                          height: 190.0,
                          decoration: new BoxDecoration(
                              shape: BoxShape.circle,
                              border: new Border.all(color: Colors.black),
                              image: new DecorationImage(
                                  fit: BoxFit.fill,
                                  image: new NetworkImage(
                                      "https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")
                              )
                          )
                      ),
                      new Text('Lars Løkke',
                        style: new TextStyle(
                          fontSize: 20.0,
                        ),
                      ),
                      new Text('Venstre',
                        style: new TextStyle(
                          fontSize: 15,
                        ),
                      ),
                    ],
                  ),

Где полный макет можно увидеть на картинке и обведен синим цветом относительно того, где я хочу иметь фоновое изображение:

Layout image

Надеюсь, вы сможете мне помочь, спасибо.

1 Ответ

0 голосов
/ 13 марта 2019

Просто Wrap - Column с - DecoratedBox

код:

FlipCard(
               direction: FlipDirection.HORIZONTAL, // default
              child: Container(
                  decoration: new BoxDecoration(
                    border: new Border.all(color: Colors.black),
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                  margin: EdgeInsets.all(10.0),
                  child: new Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      children: [
                        DecoratedBox(  // add this
                          child: new Column(
                            children: <Widget>[
                              new Container(
                                  margin: EdgeInsets.all(10),
                                  width: 190.0,
                                  height: 190.0,
                                  decoration: new BoxDecoration(
                                      shape: BoxShape.circle,
                                      border: new Border.all(color: Colors.black),
                                      image: new DecorationImage(
                                          fit: BoxFit.fill,
                                          image: new NetworkImage(
                                              "https://pbs.twimg.com/profile_images/610120554738266112/I4pl2ygE_400x400.jpg")))),
                              new Text(
                                'Lars Løkke',
                                style: new TextStyle(
                                  fontSize: 20.0,
                                  color: Colors.white
                                ),
                              ),
                              new Text(
                                'Venstre',
                                style: new TextStyle(
                                  fontSize: 15,
                                    color: Colors.white
                                ),
                              ),
                            ],
                            mainAxisSize: MainAxisSize.min,
                          ),
                          decoration: BoxDecoration(
                              image: DecorationImage(
                                  image: NetworkImage(
                                      'https://placeimg.com/640/480/any'),fit: BoxFit.fill)),
                        ),
                      ]))),

Выход:

enter image description here

...