Can't get data from model class in flutter

Question

I have a file called: orderdetails.dart where there is a class:

class OrderDetails {
  final shipmentNumber = "26";
}

need to retrieve this shipmentNumber var and display into the widget as below:

class MainPage extends StatefulWidget {
  @override
  _MainPageState createState() => _MainPageState();
}

class _MainPageState extends State<MainPage> {
  OrderDetails orderDetails;
  _MainPageState({this.orderDetails});

  @override
  Widget build(BuildContext context) {
    return Column(
      children: <Widget>[
        Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Padding(
              padding: const EdgeInsets.all(20),
              child: Icon(Icons.message),
            ),
            SizedBox(
              width: 20,
            ),
            Padding(
              padding: const EdgeInsets.all(20),
              child: Icon(Icons.person),
            ),
            SizedBox(
              width: 20,
            ),
            Padding(
              padding: const EdgeInsets.all(20),
              child: Icon(Icons.exit_to_app),
            ),
          ],
        ),
        Container(
          height: 90,
          child: ListView(
            scrollDirection: Axis.horizontal,
            children: <Widget>[
              Card(
                color: Color(0xFF1f2032),
                elevation: 5,
                child: Container(
                  decoration: BoxDecoration(
                    color: Color(0xFF1f2032),
                    borderRadius: BorderRadius.circular(10),
                  ),
                  width: 160,
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceAround,
                    children: <Widget>[
                      Padding(
                        padding: const EdgeInsets.all(8.0),
                        child: Card(
                          color: Color(0xfffeaf0d),
                          child: Container(
                            width: 40,
                            height: 40,
                            child: Icon(
                              Icons.local_shipping,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ),
                      Padding(
                        padding: const EdgeInsets.all(13),
                        child: Text(
                          orderDetails.shipmentNumber,
                          style: TextStyle(
                              color: Colors.white,
                              fontSize: 35,
                              fontWeight: FontWeight.bold),
                        ),
                      ),
                    ],
                  ),
                ),
              ),
            ],
          ),
        )
      ],
    );
  }
}

but in the text widget can't get the value requested got

NotSuchMethodError: The getter "shipmentNumber"" was called on Null receiver Null.

If I call into the main

final shipmentNumber = "26";

it works but I need to call this variable from external widget.

Answer 1

orderDetails on the state is never set so it's always null.

You can either set the orderDetails in the state (1) or pass it as widget parameter (2).

1. We can initialize the value in the initState method of the state.

class _MainPageState extends State<MainPage> {
  OrderDetails orderDetails;

  @override
  void initState() { 
    super.initState();
    
    // setState is not needed in initState
    orderDetails = OrderDetails()
  }

  @override
  Widget build(BuildContext context) {
    // ...
  }
}

2. Pass it to the widget and then use the value in the state's build method

class MainPage extends StatefulWidget {
  final OrderDetails orderDetails;

  const MainPage({Key key, this.orderDetails}) : super(key: key);

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

class _MainPageState extends State<MainPage> {
  @override
  Widget build(BuildContext context) {
    return Text(
      widget.orderDetails.shipmentNumber, // Using widget's data
      style: TextStyle(
          color: Colors.white, fontSize: 35, fontWeight: FontWeight.bold),
    );
  }
}

But still, remember to pass the value to it: MainPage(orderDetails: OrderDetails())