How to pass a string argument in Flutter? - 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