Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How can Widget Classes Arguments be used as props to create dynamic Widgets with Row and Columns in Flutter?

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:

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

...
...
    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.

error screenshot widget props

>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.

Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading