如何在Flutter中制作一个适合整个屏幕的列

Rém*_*ard 2 user-interface dart flutter flutter-layout

用户界面

我开始颤抖,但我无法弄清楚如何将列小部件除以 2 并使其适合所有屏幕,如图所示。

But*_*ben 5

就这样吧

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))
      ],
    );
  }
}
Run Code Online (Sandbox Code Playgroud)

它是如何完成的:

  1. 我正在通过 runApp 方法运行应用程序
  2. 我创建一个列并放置带有颜色的容器
  3. 但容器没有任何大小,因此它们不可见
  4. 通过扩展的小部件,我让小部件知道尽可能大。
  5. 由于我有两个扩展的小部件,它们具有相同的大小。

瞧,
模拟器设备的屏幕截图