CODEWITHSUNDEEP
flutterdart
FlutterMaster
FlutterMaster

Reputation: 53

How to solve problem with null values in column?

This is the problem: Column's children must not contain any null values, but a null value was found at index 0

I think it has something to do with the map, but i am not sure. I am quite new to coding with dart so any help would be appreciated.

And here is the code:

import 'package:flutter/material.dart';

void main() => runApp(MaterialApp(
  home: Main(),
));


int counter = 0;

class Main extends StatefulWidget {
  @override
  _MainState createState() => _MainState();
}

class _MainState extends State<Main> {

  static List<String> names = [
    'name1',
    'name2',
  ];
  static List<String> difficulty = [
    'easy',
    'normal',
  ];

  String currentDifficulty = difficulty[counter];

  var count = names.length;

  @override
  Widget build(BuildContext context) {
    return Container(

      child: Column(
        children: names.map((name) {
          Container(
            child: Column(
              children: <Widget>[
                Text(
                 name
                ),
                Text(
                  'currentDifficulty'
                ),
              ],
            ),
          );
          counter += 1;
        }).toList(),
      ),
    );
  }
}

Upvotes: 0

Views: 172

Answers (2)

timilehinjegede
timilehinjegede

Reputation: 14043

You are getting the errors because:

1) You are accessing the elements of your List wrongly. To access elements in a List, use the elementAt method

2) The children property of your Column is missing a return statement .

3) Instead of using a counter to iterate through the second list. You can map through the two lists using the IterableZip.

Check the code below: It solves the errors and it works fine

int counter = 0;

class MyHomePage extends StatelessWidget {
  static List<String> names = [
    'name1',
    'name2',
  ];
  static List<String> difficulty = [
    'easy',
    'normal',
  ];

  // access elements in a list using the elementAt function
  String currentDifficulty = difficulty.elementAt(counter);

  @override
  Widget build(BuildContext context) {
    names.map((e) => print(e));
    return Scaffold(
      body: Center(
        child: Container(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            // map the two lists using IterableZip and passing the two lists
            children: IterableZip([names, difficulty]).map(
              (element) {
                // missing return statement
                return Container(
                  child: Column(
                    children: <Widget>[
                      // access elements of your first list here
                      Text(element[0]),
                      // access elements of your second list here
                      Text(element[1]),
                    ],
                  ),
                );
              },
            ).toList(),
          ),
        ),
      ),
    );
  }
}

OUTPUT

enter image description here

I hope this helps.

Upvotes: 0

CarlosSR
CarlosSR

Reputation: 1195

If you want to know the index of each widget you are creating on a map function from a list I would suggest to use List.asMap().map((index, string)=> MapEntry(index, widget())).values.toList() since the map function alone does not allow to get the index

Try substituting your children code for:

names.asMap().map((index, name)=> MapEntry(index, Container(
            child: Column(
              children: <Widget>[
                Text(
                 name
                ),
                Text(
                  difficulty[index]
                ),
              ],
            ),
          ))).values.toList();

Upvotes: 1

Related Questions