Поведение макета флаттера

Question

когда я читаю поведение макета Контейнера Документ контейнера :

Если у виджета нет дочернего элемента, высоты, ширины, ограничений и родительский элемент не имеет ограниченийограничения, затем контейнер пытается изменить размер как можно меньше.

, поэтому я пишу некоторый код, как показано ниже, я думаю, что второй контейнер должен быть как можно меньше, но он заполняет область содержимого приложения (весь экран) ， почему?

class ContainerWithScaffold extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
  title: 'Container with scaffold',
  home: Scaffold(
    body: Container(
      color: Colors.blue,
      height: double.infinity,// provides unbounded height constraints for the child container
      width: double.infinity,// provides unbounded width constraints for the child container
      child: new Container(
        color: Colors.white,
      ),
    ),
  ),
);
}
}

Answer 1

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

class ContainerWithScaffold extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      title: 'Container with scaffold',
      home: Scaffold(
        body: printConstraints(
          remark: 'outer',
          context: context,
          child: Container(
            color: Colors.blue,
            height: double.infinity, 
            width: double.infinity, 
            child: printConstraints(
              remark: 'inner',
              context: context,
              child: Container(
                color: Colors.white,
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Widget printConstraints({String remark, Widget child, BuildContext context,}) {
  return LayoutBuilder(
      builder: (BuildContext context, BoxConstraints constraints) {
    print('$remark - $constraints');
    return child;
  });
}

при запуске приложения я получаю:

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(w=961.5, h=552.9)

При удалении аргументов высоты и ширины из внешнего контейнера результат:

I/flutter (11451): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (11451): inner - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)

Вы, очевидно, не удалили ограничения.Вместо этого они устанавливаются на максимальные значения, противоположные ожидаемому результату.

Наконец, я обернул внутренний контейнер внутри UnconstrainedBox и, наконец, получил желаемый результат:

I/flutter (13029): outer - BoxConstraints(0.0<=w<=961.5, 0.0<=h<=552.9)
I/flutter (13029): inner - BoxConstraints(unconstrained)

Экрантеперь заполнен внешним синим контейнером.(Обратите внимание: этот ответ предназначен только для предоставления дополнительной информации. Ответ diegoveloper уже является правильным решением вопроса.)

Answer 2

Вы устанавливаете высоту и ширину, попробуйте использовать UnconstrainedBox

      Container(
                color: Colors.blue,
                height: double
                    .infinity, // provides unbounded height constraints for the child container
                width: double
                    .infinity, // provides unbounded width constraints for the child container
                child: UnconstrainedBox(
                  child: new Container(
                    color: Colors.red,
                  ),
                ),
              ),

Дополнительная информация: https://docs.flutter.io/flutter/widgets/UnconstrainedBox-class.html