Блог

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

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

Мой код выглядит следующим образом:

 Size size = MediaQuery.of(context).size;
    double height = size.height;
    double width = size.width;

    return Column(
      children: [
        Expanded(
          flex: 3,
          child: Container(color: Colors.white),
        ),
        Positioned(
          top: height * (3 / 5) - height * 0.15 / 2,
          child: Container(
            color: Colors.green,
            height: height * 0.15,
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              children: [
                Container(
                  height: height * 0.15,
                  width: width * 0.45,
                  color: Colors.red,
                ),
                Container(
                  height: height * 0.15,
                  width: width * 0.45,
                  color: Colors.blue,
                )
              ],
            ),
          ),
        ),
        Expanded(
          flex: 5,
          child: Container(color: Colors.black),
        ),
      ],
    );
  

Как я могу улучшить свой код?

Для достижения этого результата вам нужно будет использовать виджет Stack.

  Stack(children: [
          Container(
              height: 230,
              decoration: BoxDecoration(
                color: Colors.orange,
              )),
          Column(children: [
            Expanded(
              child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                  children: [
                    Container(
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(22))),
                    Container(
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(22))),
                    Container(
                        height: 100,
                        width: 100,
                        decoration: BoxDecoration(
                            color: Colors.red,
                            borderRadius: BorderRadius.circular(22))),
                  ]),
            ),
          ])
        ])