Блог

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

Вот и все

 import 'package:flutter/material.dart';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Expanded(child: Container(color: Colors.blue)),
        Expanded(child: Container(color: Colors.lightBlueAccent))
      ],
    );
  }
}
 

Как это делается:

1. Я запускаю приложение с помощью метода runApp
2. Я создаю столбец и размещаю в нем контейнеры с цветами
3. Но контейнеры не имеют никакого размера, поэтому они не видны
4. С помощью расширенного виджета я сообщаю виджету, что он должен быть как можно больше.
5. Поскольку у меня есть два расширенных виджета, они имеют одинаковый размер.

Вуаля
Скриншот с эмулятора устройства