Search code examples
flutterdartflutter-layoutflutter-dependenciesflutter-test

How can display two buttons dynamically based on an if condition in flutter


I am new to flutter and I am having a difficult challenge to perform two if conditions. All I want to achieve is to perform an if statement on two boolean conditions in the the array below. I want to check if Success == true && Stock['Submitted'] == true, then its should display a button labelled "Validate farmers" but if these two conditions did not hold true then it should show a button labelled "Take Inventory". But its not working. Please how can i access the Submitted Value?

this is the structure of the arry:

{
  "StatusCode": 200,
  "Message": "Record Found",
  "Success": true,
  "Stock": {
    "Oid": 30,
    "CreatedBy": "johndoh",
    "CreatedOn": "2020-07-07T10:28:19.09",
    "ModifiedBy": null,
    "ModifiedOn": null,
    "Season": null,
    "SeasonTitle": null,
    "Anchor": 11,
    "AnchorName": null,
    "AnchorAcronym": null,
    "DistributionCentre": 11,
    "DistributionCentreName": null,
    "Agent": "John Doh",
    "StateCoordinator": "Godwin Obute",
    "StockDate": "2020-07-07T10:27:49.03",
    "TransId": "20200707102819089",
    "StateCoordinatorId": "38",
    "AgentId": "57",
    "UserId": "b6caf34c-a425-4710-a3ee-aa22a382882a",
    "Submitted": false,
    "SubmittedOn": null,
    "SubmittedBy": null,
    "StockItems": []
  }
}

A Function that calls the http request which returns the array above just after my stateful widget state:

var user;
  var userData;
  var userDetail;
  var anchors;
  var dailyStatus;
  var dailyStocks;
  var found = false;
  var stockoid;

  // var dataSubmitted = false;

  @override
  void initState() {
    _getUserInfo();
    super.initState();
  }

//This getuser info gives me the parameters to use on the checkinventorystatus
  void _getUserInfo() async {
    SharedPreferences localStorage = await SharedPreferences.getInstance();
    var userJson = localStorage.getString('loginRes');
    user = json.decode(userJson);
    userDetail = user['UserDetail'];
    print('${userDetail['Oid']} poii'); //Just to get the userId
    anchors = user['Anchors'];

    setState(() {
      userData = user;
      print('${userData['UserId']} ioo');

      // var dc = value['DistributionCentres'][1]['Oid'];
      // print(dc);
    });
  }


//This is the main function that gives me the array above
  Future<CheckInventoryStatus> checkDailyStatus() async {
    final response = await http.get(
        'http://api.ergagro.com:112/CheckDailyStockTakingStatus?userId=${userData['UserId']}&agentId=${userDetail['Oid']}',
        headers: {
          'Content-type': 'application/json',
          'Accept': 'application/json',
        });

    if (response.statusCode == 200) {
      found = true;
      final jsonStatus = jsonDecode(response.body);
      var stock = jsonStatus['Stock'];
      bool submitted = stock['Submitted'];
      stockoid = stock['Oid'].toString();

      setState(() {
        found = submitted;
      });
      return CheckInventoryStatus.fromJson(jsonStatus);
    } else {
      throw Exception();
    }
  }

This is my Widget View:

after my children widget:

Row(
  children: <Widget>[
    /////////// Based on the response I want to use it to control these two buttons below
    ///if the response is 200 it should display validate farmer else it should display Take Inventory/////////////

    Padding(
      padding: const EdgeInsets.all(10.0),
      //this is where I want to perform the check but its not working
      // dailyStatus['StatusCode'] == 200
      child: found
          ? FlatButton(
              child: Padding(
                padding: EdgeInsets.only(
                    top: 8, bottom: 8, left: 10, right: 10),
                child: Text(
                  'Validate Farmers',
                  textDirection: TextDirection.ltr,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                    decoration: TextDecoration.none,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ),
              color: Colors.green,
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(20.0)),
              onPressed: () {
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => StartScanPage()));
                // Edit()was here
              },
            )
          //if the status is not 200 then it should allow an agent to take inventory
          : FlatButton(
              child: Padding(
                padding: EdgeInsets.only(
                    top: 8, bottom: 8, left: 10, right: 8),
                child: Text(
                  'Take Inventory',
                  textDirection: TextDirection.ltr,
                  style: TextStyle(
                    color: Colors.white,
                    fontSize: 15.0,
                    decoration: TextDecoration.none,
                    fontWeight: FontWeight.normal,
                  ),
                ),
              ),
              color: Colors.blueGrey,
              shape: new RoundedRectangleBorder(
                  borderRadius: new BorderRadius.circular(20.0)),
              onPressed: () {
                Navigator.push(
                    context,
                    new MaterialPageRoute(
                        builder: (context) => StockInventoryPage(
                            userData['UserId'],
                            '${userDetail['Oid']}',
                            '${value['DistributionCentres'][i]['Oid']}',
                            stockoid)));
              },
            ),
    ),

    /////////// End of Buttons /////////////
  ],
),

Solution

  • How about Something like this:

      Widget _showButton(bool firstCondition, bool seacondCondition) {
    return Padding(
        padding: const EdgeInsets.all(10.0),
        child: FlatButton(
          child: Padding(
            padding: EdgeInsets.only(top: 8, bottom: 8, left: 10, right: 10),
            child: Text(
              (firstCondition && seacondCondition)?'Validate Farmers':'Take Inventory',
              textDirection: TextDirection.ltr,
              style: TextStyle(
                color: Colors.white,
                fontSize: 15.0,
                decoration: TextDecoration.none,
                fontWeight: FontWeight.normal,
              ),
            ),
          ),
          color: Colors.green,
          shape: new RoundedRectangleBorder(
              borderRadius: new BorderRadius.circular(20.0)),
          onPressed: () {
            if(firstCondition && seacondCondition)
            Navigator.push(context,
                new MaterialPageRoute(builder: (context) => StartScanPage()));
            else
              Navigator.push(
                  context,
                  new MaterialPageRoute(
                      builder: (context) =>
                          StockInventoryPage(
                              userData['UserId'],
                              '${userDetail['Oid']}',
                              '${value['DistributionCentres'][i]['Oid']}',
                              stockoid)));
            // Edit()was here
          },
        ));
    

    }

    then simply put _showButton inside your children widget