Send Form to API in Flutter

Question

I'm still trying to get used to Flutter. I have a registration form for the user and when the user clicks the button, I want all text to be sent to my api link.But is there an easy way to do this? Or should I send texts one by one? My texts should not be empty. How can I provide this?

I'm calling my api in the future and I want to send the texts that the user will enter into my data here.

        Future<RegisterComplete> createRegisterComplete(
        String email, String language) async {
      final http.Response response = await http.post(
        'MY API URL',
        headers: <String, String>{'Content-Type': 'application/json'},
        body: jsonEncode(<String, String>{
          'firstName': ' ',
          'lastName': ' ',
          'password': ' ',
          'countryCode': ' ',
          'language': ' ',
        }),
      );
      if (response.statusCode == 201) {
        return RegisterComplete.fromJson(json.decode(response.body));
      } else {
        print('Here:${response.statusCode}');
        throw Exception('Failed to load page');
      }
    }
    
    class RegisterPage extends StatefulWidget {
   
      @override
      _RegisterPageState createState() => _RegisterPageState();
    }
    
    class _RegisterPageState extends State<RegisterPage> {
      Future<ConfirmCode> _confirmCode;
      var textFieldPasswordController = TextEditingController();
      var textFieldConfirmPasswordController = TextEditingController();
 var cityController=TextEditingController();
  var nameController=TextEditingController();
  var surnameController=TextEditingController();
    
      @override
      Widget build(BuildContext context) {
        return Scaffold(
          body: SafeArea(
            child: SingleChildScrollView(
              child: Column(
                children: [
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      children: [
                        IconButton(
                          icon: Icon(Icons.arrow_back),
                          onPressed: () {
                            Navigator.pop(context);
                          },
                        ),
                        Text(
                          allTranslations.text('login'),
                          style: TextStyle(
                            fontSize: 13,
                            fontWeight: FontWeight.w600,
                            color: HexColor('#4A8EB0'),
                          ),
                        ),
                      ],
                    ),
                  ),
                  Text(
                      allTranslations.text('signUp'),
                    style: TextStyle(fontSize: 26, fontWeight: FontWeight.bold),
                  ),
                  _paddingWidget('E-mail', 'E-mail',emailController),
                 
                _paddingPasswordWidget(allTranslations.text('password'), allTranslations.text('password')),
                  _paddingWidget('City', 'City',cityController),
                  _paddingWidget('Name', 'Name',nameController),
                  _paddingWidget('Surname', 'Surname',surnameController),
                  Padding(
                    padding: EdgeInsets.all(16.0),
                    child: Container(
                      height: 50.0,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(16),
                        color: HexColor('#B0B0B0'),
                        boxShadow: [
                          BoxShadow(
                            color: Colors.black.withOpacity(0.05),
                            blurRadius: 6,
                            offset: Offset(0, 2), // changes position of shadow
                          ),
                          BoxShadow(
                            color: Colors.black.withOpacity(0.1),
                            blurRadius: 20,
                            offset: Offset(0, 10), // changes position of shadow
                          ),
                        ],
                      ),
                      child: InkWell(
                        onTap: () {
                          setState(() {
                          BUTTON I USE FOR SİGN UP
                          });
                        },
                        child: Center(
                          child: Text(
                            allTranslations.text('signUp'),
                            style: TextStyle(
                              fontSize: 16,
                              color: Colors.white,
                              fontWeight: FontWeight.bold,
                            ),
                          ),
                        ),
                      ),
                    ),
                  ),
                ],
              ),
            ),
          ),
        );
      }
    
      _paddingWidget(String hintTextStr, String labelTextStr,TextEditingController _controller) {
        return Padding(
          padding: EdgeInsets.only(top: 15, left: 22, right: 22),
          child: TextFormField(
            controller: _controller,
            keyboardType: TextInputType.text,
            style: TextStyle(
              color: HexColor('#868686'),
            ),
            decoration: CommonInputStyle.textFieldStyle(
              hintTextStr: hintTextStr,
              labelTextStr: labelTextStr,
            ),
          ),
        );
      }
    
      _buttonWidget(String title,GestureTapCallback onPressed) {
        return Container(
          height: 40,
          width: 160,
          child: RaisedButton(
            child: Text(
              title,
              style: TextStyle(color: Colors.white),
            ),
            onPressed: onPressed,
            color: HexColor('#4A8EB0'),
            shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(10)),
          ),
        );
      }
    
      _paddingPasswordWidget(String hintTextStr, String labelTextStr) {
        return Padding(
          padding: EdgeInsets.only(top: 15, left: 22, right: 22),
          child: TextFormField(
            controller: textFieldPasswordController,
            keyboardType: TextInputType.text,
            style: TextStyle(
              color: HexColor('#868686'),
            ),
            decoration: CommonInputStyle.textFieldStyle(
              hintTextStr: hintTextStr,
              labelTextStr: labelTextStr,
            ),
            obscureText: true,
          ),
        );
      }
   

Answer 1

First of all.

This method should include var data that will be handler for your body.

Like so:

Future<RegisterComplete> createRegisterComplete(
    String email, String language, var data) async {
  final http.Response response = await http.post(
    'MY API URL',
    headers: <String, String>{'Content-Type': 'application/json'},
    body: jsonEncode(data),
  );
  if (response.statusCode == 201) {
    return RegisterComplete.fromJson(json.decode(response.body));
  } else {
    print('Here:${response.statusCode}');
    throw Exception('Failed to load page');
  }
}

Now, what this allows you is to actually wrap all of your data from your TextEditingControllers, so you can do something like this:

child: InkWell(
                        onTap: () async {
                          setState(() {
                          var data = {
                            'firstName': nameController.text,
'lastName': lastNameController.text,
          'password': passwordController.text,
          'countryCode': countryCodeController.text,
          'language': languageController.text,

                          }

// here you do an actual API call
   await createRegisterComplete(emailController.text, languageController.text, data);


                          });
                        },

But there is a far better way to achieve this, and it's using Repositories for stuff like this.

Check out the blog -> https://medium.com/@cesarmcferreira/flutter-mvvm-architecture-using-dependency-injection-di-state-management-repository-pattern-92a4ef6ddfc3

But there are many more examples