Hello, working on a Flutter Sports App in Android Studio for a school project and unaware of some things:

The sports app allows you to enter two players to compare in two text form field controllers.

I have names of the players and their pictures in a List

How can I pass the buildplayercard (or just name and pictures of the 2 players entered) corelating to the players entered in the two text form fields on the first route (first screen) to the second route (second screen) and have them displayed beside each other for a stat comparison?

The code is as follows (please send back modified code if possible):

import 'package:flutter/material.dart'; void main() { runApp( MaterialApp( routes: { '/': (context) => FirstRoute(), '/second': (context) => SecondRoute(), }, initialRoute: '/', ), ); } class FirstRoute extends StatefulWidget { @override State createState() => _FirstRouteState(); } class _FirstRouteState extends State { final GlobalKey _formKey = GlobalKey(); final String siakamPath = 'images/siakam.jpg'; final String anunobyPath = 'images/anunoby.jpg'; final String poeltlPath = 'images/poeltl.png'; final String barnesPath = 'images/barnes.jpg'; final String vanvleetPath = 'images/vanvleet.jpg'; final String achiuwaPath = 'images/achiuwa.jpg'; final String bartonPath = 'images/barton.png'; final String trentjrPath = 'images/trentjr.png'; final String youngPath = 'images/young.png'; final String boucherPath = 'images/boucher.jpg'; var _player1FieldController = TextEditingController(); var _player2FieldController = TextEditingController(); List> playerList = [ {'name': 'Siakam', 'path': 'images/siakam.jpg'}, {'name': 'Anunoby', 'path': 'images/anunoby.jpg'}, {'name': 'Poeltl', 'path': 'images/poeltl.png'}, {'name': 'Barnes', 'path': 'images/barnes.jpg'}, {'name': 'Vanvleet', 'path': 'images/vanvleet.jpg'}, {'name': 'Achiuwa', 'path': 'images/achiuwa.jpg'}, {'name': 'Barton', 'path': 'images/barton.png'}, {'name': 'Trent jr.', 'path': 'images/trentjr.png'}, {'name': 'Young', 'path': 'images/young.png'}, {'name': 'Boucher', 'path': 'images/boucher.jpg'}, ]; List validatorList = [ 'Siakam', 'Anunoby', 'Poeltl', 'Barnes', 'VanVleet', 'Achiuwa', 'Barton', 'Trent Jr.', 'Young', 'Boucher', ]; @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: Text('Toronto Raptors Player Comparison --- BULLS @ RAPTORS', style: TextStyle(color: Colors.black),), backgroundColor: Colors.red, ), backgroundColor: Colors.black87, body: Form( key: _formKey, child: ListView( padding: EdgeInsets.all(18.0), children: [ Center( child: Text('Toronto Raptors vs. Chicago Bulls', style: TextStyle( fontSize: 18.0, color: Colors.red, ), ), ), Center( child: Text('Feb. 28 2023', style: TextStyle( fontSize: 15.0, color: Colors.red, ), ), ), Center( child: Text('BULLS 98 FINAL> 104 RAPTORS', style: TextStyle( fontSize: 11.0, fontStyle: FontStyle.italic, color: Colors.red, ), ), ), SizedBox(height: 40), TextFormField( decoration: InputDecoration( icon: Icon(Icons.person), hintText: 'Enter First Player', labelText: 'Player #1', hintStyle: TextStyle(color: Colors.red), labelStyle:TextStyle(color: Colors.red), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red), borderRadius: BorderRadius.circular(10), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red, width: 2.0), borderRadius: BorderRadius.circular(10), ), ), keyboardType: TextInputType.name, controller: _player1FieldController, validator: (value) { if (value!.isEmpty){ return 'Enter a Player'; }else if (_player1FieldController.text == _player2FieldController.text) { return "Players cannot be the same"; }else if (!validatorList.contains(value)) { return "Enter a Valid Player."; } return null; }, ), SizedBox(height: 20), TextFormField( decoration: InputDecoration( icon: Icon(Icons.person,), hintText: 'Enter Second Player', labelText: 'Player #2', hintStyle: TextStyle(color: Colors.red), labelStyle:TextStyle(color: Colors.red), enabledBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red), borderRadius: BorderRadius.circular(10), ), focusedBorder: OutlineInputBorder( borderSide: BorderSide(color: Colors.red, width: 2.0), borderRadius: BorderRadius.circular(10), ), ), keyboardType: TextInputType.name, controller: _player2FieldController, validator: (value) { if (value!.isEmpty){ return 'Enter a Player'; }else if (_player2FieldController.text == _player1FieldController.text) { return "Players cannot be the same"; }else if (!validatorList.contains(value)) { return "Enter a Valid Player."; } return null; }, ), SizedBox(height: 40), ElevatedButton( child: Text('Next Screen', style: TextStyle(color: Colors.black),), style: ButtonStyle( backgroundColor: MaterialStateProperty.all(Colors.red), ), onPressed: () { if (_formKey.currentState!.validate()) { Navigator.pushNamed(context, '/second', arguments: ScreenArguments('Player Statistics', 'Previous')); } }, ), SizedBox(height: 80), Column( mainAxisAlignment: MainAxisAlignment.center, children: [ Center(child: Text( 'This UI Compares the Toronto player stats of the Raptors vs. Bulls Basketball game on Feb. 28 2023', style: TextStyle(fontStyle: FontStyle.italic, color: Colors.white), ), ), SizedBox(height: 20), Center(child: Text( 'Choose two Toronto Players to compare from the list below:', style: TextStyle(fontWeight: FontWeight.bold, color: Colors.white), ), ), SizedBox(height: 10), SingleChildScrollView( scrollDirection: Axis.horizontal, child: Row( children: [ _buildPlayerCard('Siakam', siakamPath), _buildPlayerCard('Anunoby', anunobyPath), _buildPlayerCard('Poeltl', poeltlPath), _buildPlayerCard('Barnes', barnesPath), _buildPlayerCard('VanVleet', vanvleetPath), _buildPlayerCard('Trent Jr.', trentjrPath), _buildPlayerCard('Boucher', boucherPath), _buildPlayerCard('Young', youngPath), _buildPlayerCard('Achiuwa', achiuwaPath), _buildPlayerCard('Barton', bartonPath), ], ), ), ], ), ], ), ), ); } Widget _buildPlayerCard(String raptorName, String imagePath) { return Container( margin: EdgeInsets.only(right: 16.0), child: Column( crossAxisAlignment: CrossAxisAlignment.center, children: [ CircleAvatar( backgroundImage: AssetImage(imagePath), backgroundColor: Colors.white, radius: 35.0, ), SizedBox(height: 10.0), Text( raptorName, style: TextStyle( color: Colors.white, fontSize: 16.0, ), ), ], ), ); } } class SecondRoute extends StatefulWidget { @override State createState() => _SecondRouteState(); } class _SecondRouteState extends State { @override Widget build(BuildContext context) { final args = ModalRoute.of(context)!.settings.arguments as ScreenArguments; return Scaffold( backgroundColor: Colors.black87, appBar: AppBar( backgroundColor: Colors.red, title: Text(args.title, style: TextStyle(color: Colors.black),), ), body: Center( child: ElevatedButton( child: Text(args.message), onPressed: () { Navigator.pop(context); }, ), ), ); } } class ScreenArguments { String title; String message; ScreenArguments(this.title, this.message); }