Flutter: background color for children of Column

Question

I can't seem to wrap my head around the myriad of layout widgets Flutter throws at me. I'm trying to create the simple widget that displays a Column with three children: a spacer with red background, an Image and another spacer with a blue background. The Image should be centered on the screen vertically, with the first and the third child sharing the space equally. I managed to achieve the layout but have no idea how to set the background colors. Here's what I got:

      Column(
        children: [
          Spacer(flex: 1),
          Image(
            image: AssetImage("assets/colorPicker.jpeg"),
          ),
          Spacer(flex: 1),
        ],
      )

I tried wrapping the Spacers with Containers with the appropriate color attribute, but I get an exception:

════════ Exception caught by widgets library ═══════════════════════════════════════════════════════
The following assertion was thrown while applying parent data.:
Incorrect use of ParentDataWidget.

The ParentDataWidget Expanded(flex: 1) wants to apply ParentData of type FlexParentData to a RenderObject, which has been set up to accept ParentData of incompatible type ParentData.

Usually, this means that the Expanded widget has the wrong ancestor RenderObjectWidget. Typically, Expanded widgets are placed directly inside Flex widgets.
The offending Expanded is currently placed inside a ColoredBox widget.

The ownership chain for the RenderObject that received the incompatible parent data was:
  SizedBox.shrink ← Expanded ← Spacer ← ColoredBox ← Container ← Column ← _BodyBuilder ← MediaQuery ← LayoutId-[<_ScaffoldSlot.body>] ← CustomMultiChildLayout ← ⋯

This doesn't tell me anything useful.

Solution

You can use a Flexible widget with a flex:1 and a child Container with color of your choice. Please see code below :

import 'package:flutter/material.dart';

final Color darkBlue = Color.fromARGB(255, 18, 32, 47);

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      theme: ThemeData.dark().copyWith(scaffoldBackgroundColor: darkBlue),
      debugShowCheckedModeBanner: false,
      home: Scaffold(
        body: Center(
          child: MyWidget(),
        ),
      ),
    );
  }
}

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Column(
        children: [
          Flexible(flex: 1, child:Container(color:Colors.red)),
          Image(
            image: NetworkImage("https://picsum.photos/350/200"),
          ),
          Flexible(flex: 1, child:Container(color:Colors.blue)),
        ],
    );
  }
}

Comments

[Szabolcs Szekelyi]

This works even without the parent Expanded, but how do I apply the colors? Spacer has no property to set the background color. I tried writing Expanded(child: Container(color: Colors.red)), but I get a "Incorrect use of ParentDataWidget." exception on the console when the app starts.

[Szabolcs Szekelyi]

This is exactly what I wanted. Thanks!