How can I pass variable id to second screen in flutter?

Question

I have two page and I want to use the variable 'id' in the second screen to fetch data from API.

What should I do?

Screen one: it's the product screen where user click on profile image and after that I get all information about user owner in the second screen.

Screen two: I display data for this user by id

NB: I get all the data by API

id is always Null

Screen one:

InkWell(
  onTap: () {
    Navigator.push(
      context,
      MaterialPageRoute(
          builder: (context) => UserProfile(
                id: id,
              )),
    );
    // do something here
  },
),

Screen two:

class UserProfile extends StatefulWidget {
  final int id;
 const UserProfile({Key key, @required this.id}) : super(key: key);
  @override
  _UserProfileState createState() => _UserProfileState();
}




class _UserProfileState extends State<UserProfile> {
@override
  void initState() {
    getprofile(id);
    super.initState();
  }

  Future<List<dynamic>> getprofile(int id) async {
    var response = await Network().getData('/auth/user/$id');
    data = json.decode(response.body);
    return data;
    
  }

Answer 1

When you want to use a property from the StatefulWidget you need to use widget.propertyName. In your case it's widget.id

class _UserProfileState extends State<UserProfile> {
@override
  void initState() {
    getprofile(widget.id);
    super.initState();
  }

  Future<List<dynamic>> getprofile(int id) async {
    var response = await Network().getData('/auth/user/$id');
    data = json.decode(response.body);
    return data;
    
  }

Answer 2

Either do the same that you did before,so pass the id as a parameter to the _UserProfileState class, so just call:

_UserProfileState(@required this.id) : super();

Another option to make variables available is to use the Provider widget