How to add an item to a list on a separate page in Flutter

Issue

I am new to Flutter and currently building an app to log spasms that happens due to spasticity. This is somewhat like a ToDo style app in structure. So I have a list in my home.dart file that a ListViewBuilder to display my Spasm objects. What I want to do is to create a Spasm object in recordSpasm.dart and add it to the list in home.dart. How do I do that? I´ll post my code here:

home.dart

import 'package:flutter/material.dart';
import 'package:material_design_icons_flutter/material_design_icons_flutter.dart';
import 'package:spasmlogger/classses/spasm.dart';


class Home extends StatefulWidget {
  const Home({ Key? key }) : super(key: key);

  @override
  State<Home> createState() => _HomeState();
}

class _HomeState extends State<Home> {
  @override
  List<Spasm> Spasms = [
    Spasm("Extremely strong", "Upper body", "Cannot control  left arm"),
    Spasm("Extremely strong", "Upper body", "Cannot control  left arm")
  ];
  
  

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("SpasmLogger"),
        actions: <Widget>[
          IconButton(
            icon: Icon(MdiIcons.help),
            onPressed: () {
              Navigator.pushNamed(context, '/about');
            },
          )
        ],
      ),
      floatingActionButton: FloatingActionButton(
        child: Icon(MdiIcons.plus),
        onPressed: () {
          Navigator.pushNamed(context, "/recordSpasm");
        }
      ),
      body: Padding(
        padding: EdgeInsets.fromLTRB(16, 16, 16, 16),
        child: ListView.builder(
          itemCount: Spasms.length,
          itemBuilder: (BuildContext context, int index){
            return Card(
              child: ListTile(
                title: Text(Spasms[index].strength + " spasm detected in " + Spasms[index].bodyPart),
                subtitle: Text(Spasms[index].comment)
            )
            );
          },
        )
      ),
    );
  }
}

recordSpasm.dart

import 'package:flutter/material.dart';
import 'package:spasmlogger/classses/spasm.dart';


class RecordSpasm extends StatefulWidget {
  const RecordSpasm({ Key? key }) : super(key: key);

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

class _RecordSpasmState extends State<RecordSpasm> {
  @override

  String Strength = "Regular strength";
  List<String> Strengths = ["Regular strength", "Mildly stronger", "Severely Strong", "Extremely strong"];
  String BodyPart = "Lower body";
  List<String> BodyParts = ["Lower body", "Upper body", "Head"];
  TextEditingController comment = new TextEditingController();

  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Record spasm")
      
      ),
      body: 
      Padding(
        padding: EdgeInsets.all(16),
        child: Form(
          child: Column(
            crossAxisAlignment: CrossAxisAlignment.start,
            children: <Widget> [
              Text("Spasm strength"),
              DropdownButton(
                value: Strength,
                items: Strengths.map<DropdownMenuItem<String>>((String value) {
                  return DropdownMenuItem<String>(
                    value: value,
                    child: Text(value),
        );
      }).toList(),
                onChanged: (String? value) {
                  setState(() {
                    Strength = value!;

                  });
                  
                },
                ),
                Text("Part of body"),
                DropdownButton(
                  value: BodyPart,
                  items: BodyParts.map<DropdownMenuItem<String>>((String value) {
                    return DropdownMenuItem<String>(
                      value: value,
                      child: Text(value),
                  );
                }).toList(),
                onChanged: (String? value) {
                  setState(() {
                    BodyPart = value!;

                  });
                  
                },
                ),
                Text("Comments"),
                TextFormField(
                  maxLines: 5,
                  controller: comment,
                  
                ),
                ElevatedButton(
                  onPressed: () {
                    // Add object to the list in home.dart
                    print(Strength);
                    print(BodyPart);
                    print(comment.text);

                     

                  }, 
                  child: Text("Record spasm")
                  )


          ]
        )
      )
      )
    );
  }
}

Solution

Navigator.push returns a Future when the pushed page is popped. So you just need to add the Spasm object in the recordSpasm.dart:

ElevatedButton(
    onPressed: () {
       Navigator.pop(context,Spasm(Strength, BodyPart, comment.text));
                   },
       child: Text("Record spasm")
              )

and retrieve the object and "refresh" the page in the home.dart

floatingActionButton: FloatingActionButton(
          child: Icon(Icons.add),
          onPressed: () {
            Navigator.pushNamed(context, "/recordSpasm").then((value) {
              if (value != null && value is Spasm) {
                setState(() {
             // if this doesn't work add the value to the list then call setState
                  Spasms.add(value);
                });
              }
            });
          }),

Just a tip, in dart variable names should be lowercase (eg: String strength) 🙂

Answered By – Michael m

Answer Checked By – Dawn Plyler (FlutterFixes Volunteer)

Leave a Reply

Your email address will not be published.