Блог

Вверху страницы у меня есть Container с BoxShadow оформлением, а под Container находится ListView с Cards числом в нем. Я хочу, чтобы вверху Container была тень, которая появляется перед элементами в ListView , но это то, что я получаю:

Кажется, что отбрасываемая тень появляется позади Cards , а не перед ним. Это код:

 Widget _buildBody(BuildContext context, ChecklistModel model){
    return Container(
        child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
                Container(
                    decoration: BoxDecoration(
                        color: Colors.red.shade200,
                        boxShadow: [BoxShadow(
                            color: Colors.red.shade200,
                            offset: Offset(0, 10),
                            blurRadius: 10,
                            spreadRadius: 10
                        )]
                    ),
                    child: ListTile(
                        title: Text(''),
                    )
                ),
                Expanded(child: Padding(
                    padding: const EdgeInsets.all(10),
                    child: _buildCheckpointListView(context, model))
                )
            ],
        )
    );
}
  

Я также пытался заменить Container на Card , но это тоже не сработало.

Это происходит потому, что, поскольку вы используете Expanded виджет внутри Column , он занимает все доступное пространство на экране и, следовательно, выглядит так, как будто он перекрывает Container , но на самом деле это просто перекрывающая тень.

Вместо Column виджета используйте Stack для отображения Container над ListView . Вы можете использовать Positioned виджет для позиционирования дочерних виджетов стека.

Но в этом случае убедитесь, что вы поместили Container код после ListView кода, чтобы он всегда был сверху.

Пример:

 Stack(
  children: <Widget>[
    Padding(
      padding: const EdgeInsets.all(10),
      child: _buildCheckpointListView(context, model)
    ),
    Positioned(
      top: 0.0, //To align Container at the top of screen
      left: 0.0,
      right: 0.0,
      child: Container(
        decoration: BoxDecoration(
          color: Colors.red.shade200,
          boxShadow: [
            BoxShadow(
              color: Colors.red.shade200,
              offset: Offset(0, 10),
              blurRadius: 10,
              spreadRadius: 10
          )]
        ),
        child: ListTile(
          title: Text(''),
        )
     ),
    ),
  ]
)
  

Вы также можете поместить себя ListView внутрь Positioned виджета, если хотите обеспечить определенное расстояние сверху.

Выделите нижнее поле для контейнера, чтобы ввести некоторое пустое пространство между контейнером и нижними братьями и сестрами. Вот так :

         Container(
        margin: EdgeInsets.only(bottom: 20),
          decoration: BoxDecoration(
              color: Colors.red.shade200,
              boxShadow: [BoxShadow(
                  color: Colors.red.shade200,
                  offset: Offset(0, 10),
                  blurRadius: 10,
                  spreadRadius: 10
              )]
          ),
          child: ListTile(
            title: Text(''),
          )
      ),