Can not use arguments in a stateful widget

Question

i am beginner in flutter , i have an api and i used Navigator to pass data to this Route , it works fine but only when i call the arguments in build method , outside of build method , they can not be recognized , my goal is to use my arguments outside of the build method to be able to create an api call that uses an id argument . the problem is in getClubs method and InitState method

here what i have tried

   import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_svg/svg.dart';
import 'club_arguments.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';


class ClubDetails extends StatefulWidget {

   final int id;
   final String name;
   final String image;
   final String rank;
   final String nationality;
   final String stadium;
   final  String manager;
   final String wins;
   final String draws;
   final String losses;
   final int goals;
   final int goalsIn;


   ClubDetails({ this.id, this.name,this.image,this.rank,this.nationality,this.stadium,this.manager,this.wins,this.draws,this.losses,this.goals,this.goalsIn});

  @override
  _ClubDetailsState createState() => _ClubDetailsState();
}

class _ClubDetailsState extends State<ClubDetails> {

  String stadium;
  String founded;


  getClub(int id) async {

    http.Response response = await http.get(
        'http://api.football-data.org/v2/teams/$id',
        headers: {'X-Auth-Token': '86014f6025ae430dba078acc94bb2647'});
    String body = response.body;
    Map data = jsonDecode(body);
    stadium = data['name'];

    //Club(this.id,this.name,this.image,this.rank,this.nationality,this.stadium,this.manager,this.wins,this.draws,this.losses,this.goals,this.goalsIn);
    setState(() {
      //print(data[0]['venue']);
      print(stadium);
    });
  }


  @override
  void initState() {
    super.initState();
    getClub(widget.id);
    print(widget.id);
  }
  @override
  Widget build(BuildContext context) {

    List<Titles> titles = [
      Titles("LA LIGA", "Spain","Barcelona","2008" ),
    ];


    
    return Scaffold(
      appBar: AppBar(
        title: Text("Club Info"),
        backgroundColor: Colors.blue[300],
        elevation: 0.0,
      ),
      body: Container(
          decoration: BoxDecoration(
              gradient: LinearGradient(
                  begin: Alignment.centerLeft,
                  end: Alignment.centerRight,
                  colors: [Colors.purple, Colors.blue])
          ),
          child: Container(
            decoration: BoxDecoration(
                gradient: LinearGradient(
                    begin: Alignment.topLeft,
                    end: Alignment.bottomRight,
                    colors: [Colors.purple, Colors.black38])),
            child: ListView(
              children: [
                SizedBox(
                  height: 20,
                ),
                Container(
                  width: double.infinity,
                  child:    Card(
                    elevation: 4.0,
                    shape: RoundedRectangleBorder(
                      borderRadius: BorderRadius.circular(10.0),
                    ),
                    child: Padding(
                      padding: const EdgeInsets.all(16.0),
                      child:
                      Row(
                        children: <Widget>[
                          Container(
                            height: 40,
                            width: 40,
                            child:
                            SvgPicture.network(widget.image,
                            ),
                          ),
                          const SizedBox(width:10.0),
                          Spacer(),
                          Column(
                            crossAxisAlignment: CrossAxisAlignment.end,
                            children: <Widget> [
                              Text(widget.name, style: TextStyle( fontWeight:FontWeight.bold,
                                fontSize: 18.0,
                              )),
                              const SizedBox(height: 5.0, ),
                              Text("rank : "+widget.rank, style: TextStyle( fontWeight:FontWeight.bold,
                                fontSize: 18.0,
                              )),
                              const SizedBox(height: 5.0, ),
                              Text("Found : "+widget.manager, style: TextStyle( fontWeight:FontWeight.bold,
                                fontSize: 18.0,
                              )),
                              const SizedBox(height: 5.0, ),
                              Text("Nationality : "+widget.nationality, style: TextStyle( fontWeight:FontWeight.bold,
                                fontSize: 18.0, color: Colors.grey[600],
                              )),
                              const SizedBox(height: 5.0, ),
                              Text("Stadium : "+widget.stadium, style: TextStyle( fontWeight:FontWeight.bold,
                                fontSize: 18.0, color: Colors.grey[600],
                              )),
                            ],
                          ),
                        ],
                      ),
                    ),
                  ),
                ),

                SizedBox(
                  height: 10,
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(10, 0, 0, 10),
                  child:  Text(
                    "Achieved Titles",
                    style: TextStyle(fontSize: 17, fontWeight: FontWeight.w900, color: Colors.white),
                  ),
                ),

                SizedBox(
                  height: 10,
                ),
                Container(
                  margin: EdgeInsets.fromLTRB(5, 0, 5, 0),
                  child: ListView.builder(
                    shrinkWrap: true,
                    physics : NeverScrollableScrollPhysics(),
                    itemBuilder: (context, index){
                      return Card(
                        elevation: 4.0,
                        shape: RoundedRectangleBorder(
                          borderRadius: BorderRadius.circular(10.0),
                        ),
                        child: Padding(
                          padding: const EdgeInsets.all(16.0),
                          child:
                          Row(
                            children: <Widget>[
                              CircleAvatar(
                                backgroundImage: NetworkImage("https://www.impacttrophies.co.uk/content/images/thumbs/0065685_tower-football-trophy-gold.jpeg"),
                              ),
                              const SizedBox(width:10.0),
                              Spacer(),
                              Column(
                                crossAxisAlignment: CrossAxisAlignment.end,
                                children: <Widget> [
                                  Text(titles[index].name, style: TextStyle( fontWeight:FontWeight.bold,
                                    fontSize: 18.0,
                                  )),
                                  const SizedBox(height: 5.0, ),
                                  Text("country : "+titles[index].country, style: TextStyle( fontWeight:FontWeight.bold,
                                    fontSize: 18.0, color: Colors.grey[600],
                                  )),
                                  const SizedBox(height: 5.0, ),
                                  Text("club : "+titles[index].club, style: TextStyle( fontWeight:FontWeight.bold,
                                    fontSize: 18.0, color: Colors.grey[600],
                                  )),
                                  const SizedBox(height: 5.0, ),
                                  Text("year : "+titles[index].year, style: TextStyle( fontWeight:FontWeight.bold,
                                    fontSize: 18.0, color: Colors.grey[600],
                                  )),
                                ],
                              ),

                            ],
                          ),
                        ),
                      );
                    },
                    itemCount: titles.length,
                  ),
                ),
                SizedBox(
                  height: 70,
                ),
              ],
            ),

          )
      ),
    );
  }
}


class Stats{

  String title;
  String result;

  Stats(this.title,this.result);

}

class Team {

  String name;
  String image;
  String date;

  Team(this.name,this.image,this.date);

}


class Titles {
  String name;
  String country;
  String club;
  String year;

  Titles(this.name,this.country,this.club,this.year);

}

class Club {

  int id;
  String name;
  String image;
  String rank;
  String nationality;
  String stadium;
  String manager;
  String wins;
  String draws;
  String losses;
  int goals;
  int goalsIn;


  Club(this.id, this.name, this.image, this.rank, this.nationality,
      this.stadium, this.manager, this.wins, this.draws, this.losses,
      this.goals, this.goalsIn);

}

My goal is to call my method getClub using my argument id as a parameter , and to use my id argument that i received from previous route in my request url

Answer 1

All you need to do is declare the variables in the Stateful Widget and set them in the constructor. Then on the State Widget, you access them with the widget. prefix, like this:

class Home extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Issue66934490(name: 'name');
  }
}

class Issue66934490 extends StatefulWidget {
  final String name;
  
  Issue66934490({
    this.name,
  });
  
  @override
  _Issue66934490State createState() => _Issue66934490State();
}

class _Issue66934490State extends State<Issue66934490> {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Text(widget.name),
    );
  }
}

Answer 2

You must pass the parameter to your widget class, and then use that inside your state class like this:

    class ClubDetails extends StatefulWidget {
       final int id ;

       ClubDetails({this.id});

      @override
      _ClubDetailsState createState() => _ClubDetailsState();
    }

and then you can use it in your state class (_ClubDetailsState) using the widget like this.

  @override
  void initState() {
    super.initState();
    getClub(widget.id);
  }

you don't need to create id variable inside your state class (_ClubDetailsState) anymore

now, you can easily pass the id value as a argument to your widget while constructing it, like this:

ClubDetails(id : 1);