Как соединить пространство между контейнером с тенью окна при флаттере?

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

вот мой код:

    return Scaffold(
      body: SafeArea(
        child: Container(
          child: ListView(
            physics: BouncingScrollPhysics(),
            children: <Widget>[
              Container(
                child: Padding(
                  padding: const EdgeInsets.all(0.0),
                  child: ClipRRect(
                    borderRadius: BorderRadius.only(
                      topLeft: Radius.zero,
                      topRight: Radius.zero,
                    ),
                    child: Container(
                      height: 70.0,
                      margin: const EdgeInsets.only(
                          bottom: 6.0), //Same as `blurRadius` i guess
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.only(
                          bottomLeft: Radius.circular(5.5),
                          bottomRight: Radius.circular(5.5),
                          topLeft: Radius.zero,
                          topRight: Radius.zero,
                        ),
                        color: kDarkGreenColor,
                        boxShadow: [
                          BoxShadow(
                            color: Colors.grey,
                            offset: Offset(0.0, 1.0), //(x,y)
                            blurRadius: 6.0,
                          ),
                        ],
                      ),
                      child: ListView.builder(
                          padding: EdgeInsets.only(left: 10, right: 5),
                          itemCount: planticos.length,
                          physics: BouncingScrollPhysics(),
                          scrollDirection: Axis.horizontal,
                          itemBuilder: (context, index) {
                            return Container(
                              margin: EdgeInsets.only(right: 15, bottom: 6),
                              height: 40,
                              width: 70,
                              decoration: BoxDecoration(
                                color: kMainColor.withOpacity(0),
                                image: DecorationImage(
                                  image: AssetImage(planticos[index].image),
                                ),
                              ),
                            );
                          }),
                    ),
                  ),
                ),
              ),
              Container(
                margin: EdgeInsets.only(top: 0),
                height: 200,
                color: kMainColor,
              ),
            ],
          ),
        ),
      ),
    );
}
Приемы CSS-макетирования - floats и Flexbox
Приемы CSS-макетирования - floats и Flexbox
Здравствуйте, друзья-студенты! Готовы совершенствовать свои навыки веб-дизайна? Сегодня в нашем путешествии мы рассмотрим приемы CSS-верстки - в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
CSS: FlexBox
CSS: FlexBox
Ранее разработчики использовали макеты с помощью Position и Float. После появления flexbox сценарий полностью изменился.
0
0
165
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

использовать стек.

2-й контейнер будет виден поверх 1-го контейнера. например...

    Stack(
        children: <Widget>[
          Container(
            height: 400,
            decoration: BoxDecoration(
              color: Colors.green,
            ),
          ),
          Container(
            height: 200,
            decoration: BoxDecoration(
              color: Colors.green,
              boxShadow: [
                BoxShadow(
                  color: Colors.red,
                  offset: Offset(0.0, 1.0), //(x,y)
                  blurRadius: 6.0,
                ),
              ],
            ),
          ),
        ],
      ),

Тень не будет видна таким образом!

M.Taha Basiri 10.12.2020 12:19

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

skyward17 10.12.2020 15:18

Вы должны использовать виджет стека, см. этот пример:

Stack(
  children:[
    Container() //which you wanna be under the shadow.
    Container() //which you wanna make it's shadow visible.
  ]
)

Совет: используйте Positioned() под стеком, чтобы указать положение контейнеров.

Другие вопросы по теме