Не удалось установить цвет фона для контейнера в флаттере

Question

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

       Align(
            alignment: Alignment.bottomCenter,
            child: Container(
              color: Colors.black,
              margin: EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
              height: 40,
              width: double.infinity,
              child: RaisedButton(
                textColor: Colors.white,
                color: Colors.blue[300],
                onPressed: () => null,
                child: Text('Next'),
              ),
             ),
          )

Вывод:

Может кто-нибудь помочь мне?

Answer 1

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

Это результат следующего кода:

Align(
        alignment: Alignment.bottomCenter,
        child: Container(
          color: Colors.black,
          margin: EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
          padding : EdgeInsets.only(left: 10, right: 10, bottom: 10, top: 10),
          height: 40,
          width: double.infinity,
          child: RaisedButton(
            textColor: Colors.white,
            color:Colors.blue[300],
            onPressed: () => null,
            child: Text('Next'),
          ),
         ),
      ),

Вы можете изменить значения, чтобы получить желаемый результат

Answer 2

Простое решение: оберните его внутри контейнера и присвойте ему свойство цвета.

Container(
            color: Colors.black,
            child: Align(
              alignment: Alignment.bottomCenter,
              child: Container(
                margin: EdgeInsets.only(left: 20, right: 20, bottom: 20, top: 10),
                height: 40,
                width: double.infinity,
                child: RaisedButton(
                  textColor: Colors.white,
                  color: Colors.blue[300],
                  onPressed: () => null,
                  child: Text('Next'),
                ),
              ),
            ),
          )

Answer 3

Используйте свойство padding вместо margin.