Responsive and Adaptive UI in Flutter/

...

/

The Column Widget

The Column Widget

Learn about children's widget alignment and how to add space among the children of a Column widget.

We'll cover the following...

One of the most important widgets when dealing with the Flutter layout system is Column. It vertically displays its children. We’ve already learned how to use Expanded for responsive UI with Column in the previous chapter. However, other common issues often arise when using Column in an application. These issues can reduce the responsiveness of the application’s UI.

When we implement our design using Column, we can use fixed sized SizedBox to adapt the UI to the vertical layout of a smartphone. For example, look at the following code:

import 'package:flutter/material.dart';

class LoginPage extends StatelessWidget {
  const LoginPage({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Center(
      child: ConstrainedBox(
        constraints: const BoxConstraints(maxWidth: 300.0),
        child: Column(
          children: [
            const SizedBox(height: 50.0),
            const FlutterLogo(size: 100.0),
            const SizedBox(height: 100.0),
            const TextField(decoration: InputDecoration(labelText: 'Username')),
            const TextField(decoration: InputDecoration(labelText: 'Password')),
            const SizedBox(height: 30.0),
            ElevatedButton(onPressed: () {}, child: const Text('Login')),
          ],
        ),
      ),
    );
  }
}
A Column widget with some SizedBox among its children

We use the main.dart file to load our application with the device_preview package to switch between different devices in preview mode easily. In line 34, we load the LoginPage widget, which is the widget that contains a Column widget. We define LoginPage in login_page.dart. It consists of a Column. The children of the Column widget are our UI components, with some SizedBox among them in lines 13, ...