Flutter: Ставить разделитель на дно контейнера? - PullRequest
Новая
       21

Flutter: Ставить разделитель на дно контейнера?

0 голосов
/ 04 августа 2020

У меня есть три элемента в контейнере внутри виджета Flex: 

    Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Flexible(
          child: Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Flexible(
                  flex: 8,
                  child: CircleAvatar(
                    minRadius: 20.0,
                    maxRadius:
                        75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                    backgroundImage: NetworkImage(
                  'https://t3.ftcdn.net/jpg/02/33/46/24/240_F_233462402_Fx1yke4ng4GA8TJikJZoiATrkncvW6Ib.jpg'),
                  ),
                ),
                Flexible(
                  flex: 2,
                  child: Opacity(
                    opacity: percent,
                    child: FlatButton(
                      onPressed: () {},
                      child: Text(
                        'Add Photo',
                        style: TextStyle(
                            color: Colors.blue, fontSize: 14.0 * proportion),
                      ),
                    ),
                  ),
                ),
                Divider(
                  height: 1,
                  thickness: 0.5,
                ),
              ],
            ),
          ),
        ),
      ],
    );

Как я могу разместить разделитель внизу контейнера?

В настоящее время существует небольшой промежуток между разделитель и конец контейнера выглядят так:

Образ контейнера

Я изменил цвета, чтобы он выглядел лучше

Спасибо за вашу помощь

1 Ответ

1 голос
/ 04 августа 2020

Поместите Divider за пределы Column, т.е. добавьте его как дочерний элемент Flex: 

Flex(
      direction: Axis.vertical,
      children: <Widget>[
        Flexible(
          child: Container(
            width: MediaQuery.of(context).size.width,
            color: Colors.white,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: <Widget>[
                Flexible(
                  flex: 8,
                  child: CircleAvatar(
                    minRadius: 20.0,
                    maxRadius:
                    75.0 * proportion > 20 ? 75.0 * proportion : 20.0,
                    backgroundImage: NetworkImage(
                        'https://t3.ftcdn.net/jpg/02/33/46/24/240_F_233462402_Fx1yke4ng4GA8TJikJZoiATrkncvW6Ib.jpg'),
                  ),
                ),
                Flexible(
                  flex: 2,
                  child: Opacity(
                    opacity: percent,
                    child: FlatButton(
                      onPressed: () {},
                      child: Text(
                        'Add Photo',
                        style: TextStyle(
                            color: Colors.blue, fontSize: 14.0 * proportion),
                      ),
                    ),
                  ),
                ),
              ],
            ),
          ),
        ),
        Divider(
          height: 1,
          thickness: 0.5,
        ),
      ],
    )
...