flutter null safety The argument type 'String?' can't be assigned to the parameter type 'String'

Issue

I am using null safety in my flutter app and i am trying to map a map to a walkthrough screen widget. I have looked and not seen solutions online. Here is my map

final pageViewModel = [
{
  'title': 'Budget Your Funds And Save Up',
  'subtitle': 'Save Up Your Money Over A Period Of Time and Get',
  'image': 'assets/images/budget.svg'
},
{
  'title': 'Transfer Funds At Almost No Cost',
  'subtite': 'Our Transfer Rates Are At Absolutely No Cost.',
  'image': 'assets/images/finance.svg'
},
{
  'title': 'Get Free Virtual Cards',
  'subtitle': 'Your Days Of Going To The Bank Is Over'
}
];

Then in my build method I am using this map list to create a pageviewmodel like so

IntroductionScreen(
  pages: pageViewModel
      .map((page) => PageViewModel(
            titleWidget: Text(
              page['title'], //Here is the line causing the error
              textAlign: TextAlign.center,
              style: TextStyle(
                  color: secondaryColor,
                  fontWeight: FontWeight.w800,
                  fontSize: 25.0),
            ),
            body:
                "Here you can write the description of the page, to explain someting...",
            image: SvgPicture.asset(
              'assets/images/budget.svg',
              height: 400,
            ),
          ))
      .toList(),

The error i get is

The argument type 'String?' can't be assigned to the parameter type 'String'

Any help will be appreciated.

Solution

When you create your pageViewModel array, you are not using any types there, just putting some objects in the array. As a result, the compiler cannot say that page['title'] is not null – its type is dynamic. To avoid that, you can create a model class:

class YourViewModel {
  final String title;
  final String subtitle;
  final String? image;

  const YourViewModel({
    required this.title,
    required this.title, 
    this.image,
  });
}

Then, your pageViewModel would look like this:

final pageViewModel = <YourViewModel>[
  YourViewModel(
    title: 'Budget Your Funds And Save Up',
    subtitle: 'Save Up Your Money Over A Period Of Time and Get',
    image: 'assets/images/budget.svg'
  ),
  YourViewModel(
    title: 'Transfer Funds At Almost No Cost',
    subtite: 'Our Transfer Rates Are At Absolutely No Cost.',
    image: 'assets/images/finance.svg'
  ),
  YourViewModel(
    title: 'Get Free Virtual Cards',
    subtitle: 'Your Days Of Going To The Bank Is Over'
  ),
];

All done, you should not get the error in the UI!

Bonus solution (not recommended and hacky one unless you know what you are doing):

If you are 100% sure that title is never null, you can use the bang operator:

page['title']!

That should work, but in case the title is null at any point, you will get a wild run-time null pointer exception.

Answered By – mkobuolys

Answer Checked By – Katrina (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published. Required fields are marked *