Null Value received from TextFormField Flutter

Good day everyone

I am Implementing payfast Integration with Flutter. I have created a form where a user will type in the amount and Item and will then take those values with the http call to take to payfast page. Now, the values I enter on the textfield returns null and I don’t know why, may I please get assistance. Please check my code below where I am going wrong.

import 'dart:convert';
import 'dart:io';
import 'package:http/http.dart' as http;
import 'package:webview_flutter/webview_flutter.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: PayfastPayment(),
    );
  }
}

class PayfastPayment extends StatefulWidget {
  PayfastPayment({Key? key, this.amountController, this.itemNameController})
      : super(key: key);

  TextEditingController? amountController;
  TextEditingController? itemNameController;

  @override
  _PayfastPaymentState createState() => _PayfastPaymentState();
}

class _PayfastPaymentState extends State<PayfastPayment> {
  late PaymentViewModel model;
  var client = http.Client();
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(centerTitle: true, title: const Text("Payment Page")),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          TextFormField(
            controller: widget.amountController,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Amount',
            ),
          ),
          const SizedBox(
            height: 100,
          ),
          TextFormField(
            controller: widget.itemNameController,
            decoration: const InputDecoration(
              border: UnderlineInputBorder(),
              labelText: 'Item Name',
            ),
          ),
          SizedBox(
            width: 220,
            height: 100,
            child: InkWell(
              onTap: () {
                print(
                    "Amoun: ${widget.amountController?.text} Item: ${widget.itemNameController?.text}");
                model.payment(widget.amountController?.text,
                    widget.itemNameController?.text);
              },
              child: Container(
                alignment: Alignment.center,
                color: Colors.blue,
                child: const Center(
                    child: Text("Pay",
                        style: TextStyle(fontSize: 22, color: Colors.white))),
              ),
            ),
          ),
        ],
      ),
    );
  }
}

>Solution :

I don’t understand fully your code because you have PayfastPayment with those 2 controllers but you are not using the Widget nowhere expect at the start of the app so why do you need the controllers in the Constructor?

Since those 2 TextEditingController are null they will not work;
You either move them in the _PayfastPaymentState like this

TextEditingController amountController = TextEditingController();
TextEditingController itemNameController = TextEditingController();

Or add them when you call the widget on the MaterialApp launch.