Flutter ListView item changes based on added number from TextField

Question

I'm just starting to learn flutter and trying to improve my programming in general.

As you can see in the screen shot I have a textfield with a button and then a listview under that.

In my app I need an item in the listview to change based on a patients weight (specifically, the amount given). How would I show a different "amount given" to each listview item based on the weight given in the textfield?

Here is my current list item code and sliver to display it.

Sliver to show the list items:

import 'package:flutter/material.dart';
import 'package:stafford_county_medications/ui/medication_row.dart';
import 'package:stafford_county_medications/model/medication_list.dart';

class HomePageBody extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Expanded(
      child: new Container(
        child: new CustomScrollView(
          scrollDirection: Axis.vertical,
          slivers: <Widget>[
            new SliverPadding(
              padding: const EdgeInsets.symmetric(vertical: 24.0),
              sliver: new SliverFixedExtentList(
                itemExtent: 172.0,
                delegate: new SliverChildBuilderDelegate(
                      (context, index) => new MedicationRow(medications[index]),
                  childCount: medications.length,

                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

List item:

import 'package:flutter/material.dart';
import 'package:stafford_county_medications/model/medication_list.dart';
import 'package:stafford_county_medications/ui/home_page.dart';

class MedicationRow extends StatelessWidget {
  final Medication medication;
  final Medication amountGiven;

  MedicationRow(this.medication);

  @override
  Widget build(BuildContext context) {
    final medicationCardContent = new Container(
      margin: new EdgeInsets.all(16.0),
      constraints: new BoxConstraints.expand(),
      child: new Container(
        height: 4.0,
        child: new Column(
          children: <Widget>[
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: <Widget>[
                new Column(
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: <Widget>[
                    new Row(
                      children: <Widget>[
                        new Image.asset('assets/img/pill.png', height: 30.0),
                        new Container(width: 5.0),
                        new Text('Medication:',
                            style: new TextStyle(fontWeight: FontWeight.bold)
                        ),
                      ],
                    ),
                    new Container(height: 5.0),
                    new Text(medication.name),
                    new Container(height: 5.0),
                    new Text(medication.name2),
                    new Container(height: 5.0),
                  ],
                ),
                new Column(
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: <Widget>[
                    new Row(
                      mainAxisAlignment: MainAxisAlignment.end,
                      children: <Widget>[
                        new Image.asset('assets/img/injection-icon.png',
                            height: 30.0),
                        new Container(width: 5.0),
                        new Text('Dosage:',
                            overflow: TextOverflow.ellipsis,
                            style: new TextStyle(fontWeight: FontWeight.bold),
                        ),
                      ],
                    ),
                    new Container(height: 5.0),
                    new Text(medication.dosage,
                    overflow: TextOverflow.ellipsis),
                    new Container(height: 5.0),
                  ],
                ),
              ],
            ),
            new Row(
              mainAxisAlignment: MainAxisAlignment.spaceEvenly,
              children: <Widget>[
                new Text('Amount to give:'),
                new Text(amountGiven.toString()),
              ],
            ),
          ],
        ),
      ),
    );

    final medicationCard = new Container(
      child: medicationCardContent,
      height: 140.0,
      decoration: new BoxDecoration(
        color: new Color(0xFFFFFFFF),
        shape: BoxShape.rectangle,
        borderRadius: new BorderRadius.circular(8.0),
        boxShadow: <BoxShadow>[
          new BoxShadow(
            color: Colors.black12,
            blurRadius: 10.0,
            offset: new Offset(0.0, 10.0),
          ),
        ],
      ),
    );

    return new Container(
      height: 140.0,
      margin: EdgeInsets.all(16.0),
      child: new Column(
        children: <Widget>[
          medicationCard,
        ],
      ),
    );
  }
}

I believe that I will need to change the list item to a stateful widget but I have no idea after that. If I need to add something else to help please let me know. Thanks in advance for any possible help.

Answer 1

In my opinion, the widget containing Text editor field and calculate button & HomePageBody should be StateFulWidget and HomePageBody widget can have patientWeight member variable. And onPress of Calculate button you can use setState method which would automatically rebuild view and HomePageBody with new patientWeight field Something like this:

class HomePageBodyContainer extends StatefulWidget {
 @override
 State createState ()=> new HomePageBodyContainerState();
}

HomePageBodyContainerState extends State<HomePageBodyContainer>{
 double _patientWeight = 0.0;
 @override
 Widget build(BuildContext context){
  return new Column(
  children: <Widget>[
   ....textfield code
   ....button code
   onPress: (){ setState((){ _patientWeight = double.parse(textFieldsValue); }); },
   ...
   ...
   new HomePageBody(patientWeight: _patientWeight),
]
);
}
}

And in HomePageBody add field with type of double which will be passed down to MedicalRow. (you may need to import flutter foundation for @required annotation to work.)

class HomePageBody extends StatelessWidget{
   final double patientWeight;
   HomePageBody({@required this.patientWeight});
}