I am revisiting Flutter development after working with React after some times and I was trying to implement something as passing props across multiple components, in order to create dynamic Widgets (components) that render based on props. I could somehow achieve the result but still I cannot understand something.

So, in this example, I am creating a Widget Class which accepts text as an argument, and I am able to use the value of the text below in the Text return method:

class NeoText extends StatelessWidget {
  final String text;

  const NeoText({ 
    super. Key,
    required this.text,
  });

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: const TextStyle(
        color: Colors.white,
        fontSize: 15.0,
        fontWeight: FontWeight.bold,
        letterSpacing: 1.0,
        fontFamily: 'Lato',
      ),
    );
  }
}

And I can use the Widget (component) that I created in my main.dart file like:

...
...
    child: Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: const [
                  NeoText(
                    text: "⚽️Goals: 2",
                  ),
                  NeoText(
                    text: "🅰️Assists: 6",
                  ),
                  NeoText(
                    text: "🧤Saves: 26",
                  ),
                ],
              ),
...
...

But when I want to create a more complex Custom Widget that accepts multiple childs and other arguments I cannot seem to make it work.

Here is an example. I am creating this CustomCard widget which can have multiple widgets in its structure, including a Text widget. Now here I am doing the same thing, I am creating a variable named title, and trying to pass it in the Text Widget, so when I use this component in my main.dart file I can provide the title name and make the Card different from other cards. But on return method of Text I get an error (attached after the code below):

import 'package:flutter/material.dart';

class CustomCard extends StatelessWidget {
  final String? title;

  const CustomCard({super.key, @required this.title});

  @override
  Widget build(BuildContext context) {
    // Material is a conceptual piece
    // of paper on which the UI appears.
    return Card(
      child: Padding(
        padding: const EdgeInsets.all(3.0),
        child: Column(
          mainAxisSize: MainAxisSize.min,
          mainAxisAlignment: MainAxisAlignment.center,
          children: const [
            Icon(
              Icons.sports_soccer,
              color: Colors.black,
              size: 50.0,
            ),
            SizedBox(
              height: 8.0,
            ),
            Text(
              title!,
              style: TextStyle(
                color: Colors.black,
                fontSize: 15.0,
                fontWeight: FontWeight.bold,
                letterSpacing: 1.0,
                fontFamily: 'Lato',
              ),
            ),
            SizedBox(
              height: 8.0,
            ),
            Text(
              '26',
              style: TextStyle(
                color: Colors.black,
                fontWeight: FontWeight.bold,
                fontSize: 15.0,
                letterSpacing: 1.0,
                fontFamily: 'Lato',
              ),
            ),
          ],
        ),
      ),
    );
  }
}

I am wondering now, why this is not working considering that the first example works just the way I want.

>Solution :

Try to remove const keyword

 Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: const [

this:

Column(
      mainAxisSize: MainAxisSize.min,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [

In order to have a widget that is compile-time constant, all of its properties should also be compile-time constants.