Как добавить высоту дна для контейнера в Flutter?

Question

Я уже видел это и это и это , но они не отвечают на мой вопрос. Мне нужно подняться на мою Container просто под ней, а не вокруг нее

Вот то, что у меня есть на данный момент:

Моя цель в конце состоит в том, чтобы устранить тень на вершине дни недели.

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

Answer 1

Если вы хотите добавить только тень, то BoxDecoration в сочетании с BoxShadow выполнит работу

...
...
body: Container(
    margin: EdgeInsets.all(8),
    decoration: BoxDecoration(
        borderRadius: BorderRadius.circular(8.0),
        color: Colors.white,
        boxShadow: [
            BoxShadow(
                color: Colors.black,
                blurRadius: 2.0,
                spreadRadius: 0.0,
                offset: Offset(2.0, 2.0), // shadow direction: bottom right
            )
        ],
    ),
    child: Container(width: 100, height: 50) // child widget, replace with your own
),
...
...

Answer 2

Используйте ClipRRect для удаления эффектов тени и добавьте нижний margin к Container, чтобы преодолеть ClipRRect внизу только для отображения эффекта тени.

Пример:

import "package:flutter/material.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
      home: HomePage(),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Padding(
          padding: const EdgeInsets.all(30.0),
          child: ClipRRect(
            borderRadius: BorderRadius.circular(5.0),
            child: Container(
              height: 100.0,
              margin: const EdgeInsets.only(bottom: 6.0), //Same as `blurRadius` i guess
              decoration: BoxDecoration(
                borderRadius: BorderRadius.circular(5.0),
                color: Colors.white,
                boxShadow: [
                  BoxShadow(
                    color: Colors.grey,
                    offset: Offset(0.0, 1.0), //(x,y)
                    blurRadius: 6.0,
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Результат:

Answer 3

К сожалению, для Container нет свойства elevation, вам нужно использовать другое Widget, например Card, но если вы действительно хотите присвоить Container elevation свойство, вы можете воспользоваться посмотрите на разделение и посмотрите этот учебник об использовании этого пакета.

Разделение: простые в использовании, но мощные виджеты в стиле с синтаксисом, вдохновленным CSS.