Почему. Разбираем dart. (Черновик. Редактируется и добавляется)

1. Обязательные и необязательные параметры

Так нет ошибки:

void main() {
  showCar();
}

void showCar({String? name, int? age}) {
  print('asdf');
}

А так ошибка. Как данный код переписать, чтоб не было ошибки и без фигурных скобок?

void main() {  
  showCar();
}

void showCar(String? name, int? age) {
    print('asdf');
  }

Тоже самое с классами

void main() {
  print('Hello world!');
  Car myCar = Car();
  myCar.display();
}

class Car {
  String? name;
  int? age;

  Car({this.name, this.age}); //без {} - будет ошибка

  void display() {
    print("name - $name; age - $age");
  }
}

Ответ: Указать не обязательные параметры через []

void main() {  
  showCar();
}

void showCar([String?name, int? age]) {
    print('asdf');
  }

2. Верстка

Тут весь экран красный. Почему?

    return Container(
      color: Colors.black,
      height: 30,
      width: 30,
      child: Container(
        color: Colors.red,
        height: 20,
        width: 20,
      ),
    );

Если тут красный квадрат на черном фоне:

    return Center(
      child: Container(
        color: Colors.red,
        height: 20,
        width: 20,
      ),
    );

3 Пример. Ответ на 2 вопрос

    return Container(
      width: 200.0,
      height: 200.0,
      alignment: Alignment.center,
      color: Colors.orange,
      child: Container(
        width: 50.0,
        height: 50.0,
        color: Colors.black,
      ),
    );

Выведет оранжевую заливку на весь экран и черный квадрат 50 на 50 по центру.

4 Пример

Что выведет код?

    return Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        color: Colors.orange,
        child: Container(
          width: 50.0,
          height: 50.0,
          color: Colors.green,
        ),
      ),
    );

Зеленый квадрат 200 на 200. Потому что у нас идет позиционирование по центру контейнера 200 на 200 оранжевого цвета. Далее у него потомок – контейнер без! позиционирования 50 на 50. Т.к. у потомка нет позиционирования, то он занимает весь доступный ему родительский размер – а именно 200 на 200 и закрашивает его в свой зеленый цвет.

5 Пример

return Center(
      child: Container(
        width: 200.0,
        height: 200.0,
        alignment: Alignment.center,
        color: Colors.orange,
        child: Container(
          width: 50.0,
          height: 50.0,
          color: Colors.green,
        ),
      ),
    );

Отобразится (т.к. в первом Контейнере присутствует Aligment которое относится к потомку (ко второму контейнеру). А у первого контейнера тоже есть Aligment – он указан в обернутом виджете – Center):

6 Пример

    return Center(
      child: Container(
        width: 200.0,
        height: 200.0, //this size!!!
        color: Colors.orange,
        child: Container(
          width: 50.0,
          height: 50.0,
          alignment: Alignment.center, //Это относится к потомку (которого нет!). А не к текущему контейнеру!!!
          color: Colors.black, //black!!!
        ),
      ),
    );

Выведет черный экран! Как будто бы ничего нет! Однако надо учитывать черную заливку фона по умолчанию. То есть отображается черный квадрат 200 на 200 по центру на черном фоне. Выглядит это так: