Дочерний контейнер столбца покрывает всю ширину родительского элемента

Question

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

Вот мой код:

Scaffold(
      body: Column(
        children: <Widget>[
          Container(
            width: MediaQuery.of(context).size.width,
            height: MediaQuery.of(context).size.height*.30,
            child: Container(
              width: MediaQuery.of(context).size.width*.20,
              height: 40,
              child: Text('test'),
              color: Colors.blueAccent,
            ),
          ),
          Expanded(
            child: ListView(
              children: chatList.map((chatModel) {
                return ChatTileWidget(chatModel: chatModel,);
              }).toList(),
            ),
          )
        ],
      ),
    );

Answer 1

Ограничения в Flutter работают иначе, чем обычно. Если вы хотите передать дочернему элементу height и width, он обычно следует ограничениям его родителей.

Чтобы узнать больше о Constraints в Flutter => Общие сведения об ограничениях

Чтобы получить то, что вы хотите, вам нужно использовать Align и установить свойство alignment в нужное положение. Вот вам пример. Я обернул ваш внутренний Container виджетом Align и установил alignment на topLeft, поэтому он не принимает его родительский height и width

     Column(
        crossAxisAlignment: CrossAxisAlignment.stretch,
        children: <Widget>[
          Container(
            height: MediaQuery.of(context).size.height * 0.3,
            child: Align(
              alignment: Alignment.topLeft,
              child: Container(
                height: 40.0,
                color: Colors.blueAccent,
                width: MediaQuery.of(context).size.width * 0.2,
                child: Text('test')
              )
            )
          )
        ]
      )

РЕЗУЛЬТАТ

To know more about Align, please click this => Класс выравнивания

Надеюсь, это ответит на ваш вопрос :) Удачного обучения