Error: The element type 'TextSpan' can't be assigned to the list type 'Widget&#0-CodePudding

I wanted to optimize my code using GridView because I have 16 TextSpans to align 4x4. The problem is that the GridView is not accepting TextSpans. It appear this error: The element type 'TextSpan' can't be assigned to the list type 'Widget'. I've already tried removing the <Widget> but it didn't work.

Here is the code:

child: GridView.count(
            primary: false,
            padding: const EdgeInsets.all(20),
            crossAxisSpacing: 10,
            mainAxisSpacing: 10,
            crossAxisCount: 4, // 4 tiles horizontally
            children: <Widget>[
              TextSpan(
                  text: widget.result   '  ',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: checkdominantA(widget.predominant, widget.result),
                    height: 2.5,
                    letterSpacing: 0.7,
                  ),
                ),
                
                TextSpan(
                  text: widget.result2   '  ',
                  style: TextStyle(
                    fontSize: 20.0,
                    fontWeight: FontWeight.bold,
                    color: checkdominantA(widget.predominant, widget.result2),
                    height: 2.5,
                    letterSpacing: 0.7,
                  ),
                ),
),
                //...

CodePudding user response：

Textspan is not a widget use RichText Widget:

        RichText(
          text: TextSpan(
            text: widget.result   '  ',
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
              color: checkdominantA(widget.predominant, widget.result),
              height: 2.5,
              letterSpacing: 0.7,
            ),
          ),
        )

this will work fine; your full code:

child: GridView.count(
          primary: false,
          padding: const EdgeInsets.all(20),
          crossAxisSpacing: 10,
          mainAxisSpacing: 10,
          crossAxisCount: 4,
          // 4 tiles horizontally
          children: <Widget>[
            RichText(
              text: TextSpan(
                text: widget.result   '  ',
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  color: checkdominantA(widget.predominant, widget.result),
                  height: 2.5,
                  letterSpacing: 0.7,
                ),
              ),
            ),
            RichText(
              text: TextSpan(
                text: widget.result2   '  ',
                style: TextStyle(
                  fontSize: 20.0,
                  fontWeight: FontWeight.bold,
                  color: checkdominantA(widget.predominant, widget.result2),
                  height: 2.5,
                  letterSpacing: 0.7,
                ),
              ),
            ),
          ],
        ),