Flutter with Python Django RESTFUL API

Question

Need Help

I have written a flutter widgets for my application for the User Signup in my application and also an API with Django RESTFUL API. How do I connect or integrate the API routes/URL in python Django with the flutter widgets? Please, I need a sample code. I will appreciate any help.

Here is my signup flutter widget:

  import 'package:flutter/material.dart';

    class SignUpPage2 extends StatefulWidget {
      @override
     SignUpPage2State createState() => SignUpPage2State();
    }

    class SignUpPage2State extends State<SignUpPage2> { 

    @override
      Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        centerTitle: true,

        leading:  IconButton(
                  icon: new Icon(Icons.arrow_back, 
                  color:Colors.orange.shade700),
                        onPressed: () { 

                          Navigator.pop(context);

                           },
                    ),

        title: Text("Create acount", style: TextStyle(color:Colors.orange.shade700)),
        backgroundColor: Colors.black,
      ),
      backgroundColor: Colors.black45,
      body: Center(
        child: ListView(
          shrinkWrap: true,
          padding: EdgeInsets.only(left: 24.0, right: 24.0),
          children: <Widget>[

              new Center(
                child: new Text("Welcome",
                style: new TextStyle(
                  color: Colors.orange.shade700,
                  fontFamily: 'Poppins-Bold',
                  fontSize: 30.0,
                ),
                textAlign: TextAlign.center,
                ),   
            ), 
            SizedBox(height: 10.0),

            new Center(
                child: new Text("Please, Introduce Yourself",
                style: new TextStyle(
                  color: Colors.white,
                  fontFamily: 'Poppins',
                  fontSize: 20.0,
                ),
                textAlign: TextAlign.center,
                ),   
              ),  
            SizedBox(height: 20.0),

            TextField(
                keyboardType: TextInputType.text,
                autofocus: false,
                decoration: InputDecoration(
                  hintText: 'First Name',
                  filled: true,
                  fillColor: Colors.white,
                  contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(32.0),
                  ),
                ),
              ),
              SizedBox(height: 15.0),


              TextField(
                  keyboardType: TextInputType.text,
                  autofocus: false,
                  decoration: InputDecoration(
                    hintText: 'Last Name',
                    filled: true,
                    fillColor: Colors.white,
                    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(32.0),
                    ),
                  ),
                ),
              SizedBox(height: 15.0),

              TextField(
                  keyboardType: TextInputType.phone,
                  autofocus: false,
                  decoration: InputDecoration(
                    hintText: 'Phone',
                    filled: true,
                    fillColor: Colors.white,
                    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(32.0),
                    ),
                  ),
                ),
              SizedBox(height: 15.0),


               TextField(
                  keyboardType: TextInputType.datetime,
                  autofocus: false,

                  decoration: InputDecoration(
                    hintText: 'Date of Birth',
                    filled: true,
                    fillColor: Colors.white,
                    contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                    border: OutlineInputBorder(
                      borderRadius: BorderRadius.circular(32.0),
                    ),
                  ),
                ),
              SizedBox(height: 15.0),

              TextField(
                    keyboardType: TextInputType.text,
                    autofocus: false,
                    obscureText: true,
                    // initialValue: '[email protected]',
                    decoration: InputDecoration(
                      hintText: 'Password',
                      filled: true,
                      fillColor: Colors.white,
                      contentPadding: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
                      border: OutlineInputBorder(
                        borderRadius: BorderRadius.circular(32.0),
                      ),
                    ),
                  ),
              SizedBox(height: 15.0),

              Padding(
                      padding: EdgeInsets.symmetric(
                        vertical: 16.0),
                        child: Material(
                          borderRadius: BorderRadius.circular(30.0),
                          // shadowColor: Colors.orange.shade700,
                          // elevation: 5.0,
                          child: MaterialButton(
                              minWidth: 200.0,
                              height: 60.0,
                              onPressed: (){
                                setState(() {

                                Navigator.of(context).pushNamed('/SignUpPage3');


                              } ,
                              color: Colors.orange.shade700,
                              child: Text(
                                "Next", 
                                style: TextStyle(
                                  color: Colors.white,
                                  fontSize: 23.0,
                                  ),
                              ),
                          ),
                        ),
                    ),

          ]
        ),
      ),
    );
  }}

Solution

You need to add http package to your project. Then wrap the http call to your Python REST endpoint in a Future. I hate posting a link as an answer but in this case can't think of anything better than this cookboook example which answers your question perfectly!

Comments

[Azeez Akinsola]

I will try this out.