How to pass a string argument in Flutter?

Question

I'm trying to create a widget that is a container and takes two arguments, the path to the image and the title of the Image. The widget code so far is:

class CharacterBox extends StatelessWidget {
  final String imagePath;
  final String characterName;
  CharacterBox(this.imagePath, this.characterName);
  @override
  Widget build(BuildContext context) {
    final CharacterBox args = ModalRoute.of(context).settings.arguments;
    return Container(
      margin: EdgeInsets.all(20.0),
      height: 200,
      width: 100,
      child: Column(
        children: [
          Expanded(
            child: Image(
              image: AssetImage(args.imagePath),
              alignment: Alignment.center,
              fit: BoxFit.contain,
            ),
          ),
          Container(
            margin: EdgeInsets.all(5.0),
            child: Text(
              args.characterName,
              style: TextStyle(color: Colors.white),
            ),
          )
        ],
      ),
      decoration: BoxDecoration(
          borderRadius: BorderRadius.circular(5.0),
          color: Color.fromARGB(255, 252, 70, 82)),
    );
  }
}

And I'm using the following to pass the arguments:

body: SafeArea(
          child: Row(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget>[
              CharacterBox("assets/artwork.png", "Character"),
            ],
          ),
        ),

However I get the error saying:

The getter 'imagePath' was called on null.
Receiver: null
Tried calling: imagePath

I guess it is related to the ModalRoute declaration since I was doing it with this Documentation. However, I still didn't quiet get it.

Answer 1

You're using args.imagePath should only be imagePath Remove final CharacterBox args = ModalRoute.of(context).settings.arguments; since you're already passing arguments via the constructor.

To improve the code readability and also perfomance I'd advice to following:

You can append const on the constructor. I'd change to this and use name parameters for clarity:

class CharacterBox extends StatelessWidget {
  final String imagePath;
  final String characterName;
  const CharacterBox({
    Key key,
    this.imagePath,
    this.characterName
  }) : super(key: key);

Answer 2

no need to write args.imagePath and args.characterName

u can directly call it as imagePath and characterName

     Image(
          image: AssetImage(imagePath),
          alignment: Alignment.center,
          fit: BoxFit.contain,
        ),

this is for using route name navigation in flutter

Answer 3

since you are passing the argument in constructor and not Navigator

you can directly use imagePath and characterName like

     Image(
      image: AssetImage(imagePath),
      alignment: Alignment.center,
      fit: BoxFit.contain,
    ),

also you can remove this line from your build function its unnecessary

final CharacterBox args = ModalRoute.of(context).settings.arguments;

it is used to get the arguments passed during Navigation like

Navigator.of(context).pushNamed('/characterBoxPage',arguments:);

Here you can read more about Navigate with arguments

but in your case its similar to a function call and argument passing that happens normally with constructor.

Let me know in comments if you need any more help