Post Data Request in form of Array

Question

So below is the JSON Structure which we are sending it as a request back. We are sending all three values as 3 separate text fields. But still very new to flutter and I am not able to figure out how to send it as a array.

{
  "name333": "myvarientName",
  "environment": "test1",
  "description": "Desc",
  "testcases": [
    {
      "name": "testname",
      "desc": "testdesc",
      "condition": "testname"
    },
    {
      "name": "testname",
      "desc": "testdesc",
      "condition": "testname"
    },
    {
      "name": "testname",
      "desc": "testdesc",
      "condition": "testname"
    }
  ]
}

Below is the code for sending the data (making api call)

ElevatedButton(
      onPressed: () {
        if (_formKey.currentState.validate()) {
          String variantName = variantNameController.text;
          String environment = environmentController.text;
          String varianDescription = variantDescriptionController.text;
          String testCaseName = testCaseNameController.text;
          String testCaseDescription = testCaseDescriptionController.text;
          String testCaseCondition = testCaseConditionController.text;

          Future<http.Response> createVaraint(Variant post) async {
            final response = await http.post(Uri.parse('Api Call URL'),
                headers: {HttpHeaders.contentTypeHeader: 'application/json'},
                body: variantToJson(post));
            return response;
          }

          Variant variant = Variant(
            name333: variantName,
            environment: environment,
            description: varianDescription,
          );

          createVaraint(variant).then((value) {
            if (value.statusCode > 200) {
              print(value.body);
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    'Variant has been created!',
                    style: TextStyle(fontSize: 18),
                  ),
                  behavior: SnackBarBehavior.floating,
                  duration: const Duration(seconds: 4),
                  elevation: 6.0,
                  margin: EdgeInsets.all(40.0),
                ),
              );
              print('Successssssss!' + value.statusCode.toString());
            }
          });
        }
      },
      style: ElevatedButton.styleFrom(
        primary: Color(0xff0962ff),
        textStyle: TextStyle(
          fontSize: 20,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(15)),
      ),
      child: Text("Create Variant"),
    )

Just to make sure, the testCaseName, testCaseDescription, testCaseCondition are the controllers for the array

Answer 1

Create model for Varient and use toJson and fromJson method to encode and decode map.

Varient class

class Variant {
  String name333;
  String environment;
  String description;
  List<Testcases> testcases;

  Variant({this.name333, this.environment, this.description, this.testcases});

  Variant.fromJson(Map<String, dynamic> json) {
    name333 = json['name333'];
    environment = json['environment'];
    description = json['description'];
    if (json['testcases'] != null) {
      testcases = new List<Testcases>();
      json['testcases'].forEach((v) {
        testcases.add(new Testcases.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name333'] = this.name333;
    data['environment'] = this.environment;
    data['description'] = this.description;
    if (this.testcases != null) {
      data['testcases'] = this.testcases.map((v) => v.toJson()).toList();
    }
    return data;
  }
}

class Testcases {
  String name;
  String desc;
  String condition;

  Testcases({this.name, this.desc, this.condition});

  Testcases.fromJson(Map<String, dynamic> json) {
    name = json['name'];
    desc = json['desc'];
    condition = json['condition'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['name'] = this.name;
    data['desc'] = this.desc;
    data['condition'] = this.condition;
    return data;
  }
}

How to create varient object with array of test cases

void onButtonPressed() {
  var varient = Variant(
    description: "Some Description",
    environment: "Add environment here",
    name333: "Add name here",
    testcases: [
      /// Test case 1
      Testcases(
        condition: "Some condition here",
        desc: "Some description here",
        name: "Add name here",
      ),

      /// Test case 2
      Testcases(
        condition: "Some condition here",
        desc: "Some description here",
        name: "Add name here",
      )
    ],
  );

  /// Send this data to the server or use it accordingly
}

Use case of Varient class

ElevatedButton(
      onPressed: () {
        if (_formKey.currentState.validate()) {
          String variantName = variantNameController.text;
          String environment = environmentController.text;
          String varianDescription = variantDescriptionController.text;
          String testCaseName = testCaseNameController.text;
          String testCaseDescription = testCaseDescriptionController.text;
          String testCaseCondition = testCaseConditionController.text;

          Future<http.Response> createVaraint(Variant post) async {
            final response = await http.post(Uri.parse('Api Call URL'),
                headers: {HttpHeaders.contentTypeHeader: 'application/json'},
                
               /// `post.toJson()` create Map<String,dynamic> object 
                body: post.toJson());
            return response;
          }

          Variant variant = Variant(
            name333: variantName,
            environment: environment,
            description: varianDescription,
          );

          createVaraint(variant).then((value) {
            if (value.statusCode > 200) {
              print(value.body);
            } else {
              ScaffoldMessenger.of(context).showSnackBar(
                SnackBar(
                  content: Text(
                    'Variant has been created!',
                    style: TextStyle(fontSize: 18),
                  ),
                  behavior: SnackBarBehavior.floating,
                  duration: const Duration(seconds: 4),
                  elevation: 6.0,
                  margin: EdgeInsets.all(40.0),
                ),
              );
              print('Successssssss!' + value.statusCode.toString());
            }
          });
        }
      },
      style: ElevatedButton.styleFrom(
        primary: Color(0xff0962ff),
        textStyle: TextStyle(
          fontSize: 20,
          color: Colors.white,
          fontWeight: FontWeight.bold,
        ),
        shape: new RoundedRectangleBorder(
            borderRadius: new BorderRadius.circular(15)),
      ),
      child: Text("Create Variant"),
    )