Passing data to StatefulWidget and accessing it in it's state in Flutter

Question

I have 2 screens in my Flutter app: list of records and screen for creating and editing records.

If I pass object to second screen that means I am going to edit this

Answer 1

Often, you not only want to navigate to a new screen, but also pass data to the screen as well. For example, you might want to pass information about the item that’s been tapped.

In this example, create a list of todos. When a todo is tapped, navigate to a new screen (widget) that displays information about the Record. This recipe uses the following steps:

• Define a RecordObject class.
• Create a StatefulWidget. We call it RecordsScreen (for: Display a list of Records).
• Create a detail screen that can display information about a Record.
• Navigate and pass data to the detail screen.

Define a RecordObject class

class RecordsScreen extends StatefulWidget {
  List records;
  RecordsScreen({Key key, @required this.records}) : super(key: key);
  @override
  _RecordsScreenState createState() => _RecordsScreenState();
}

class _RecordsScreenState extends State {
  
  @override
  Widget build(BuildContext context) {
    widget.records = List.generate(20,
          (i) => RecordObject(
        'Record $i',
        'A description of what needs to be done for Record $i',
      ),
    );
    return Scaffold(
      appBar: AppBar(
        title: Text('Records'),
      ),
      body: ListView.builder(
        itemCount:  widget.records.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text( widget.records[index].title),
            // When a user taps the ListTile, navigate to the DetailScreen.
            // Notice that you're not only creating a DetailScreen, you're
            // also passing the current todo through to it.
            onTap: () {
              Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => DetailScreen(recordObject:  widget.records[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
    

Create a detail screen - The title of the screen contains the title of the record, and the body of the screen shows the description.

class DetailScreen extends StatefulWidget {
  // Declare a field that holds the RecordObject.
  final RecordObject recordObject;

  // In the constructor, require a RecordObject.
  DetailScreen({Key key, @required this.recordObject}) : super(key: key);

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

class _DetailScreenState extends State {
  @override
  Widget build(BuildContext context) {
    // Use the RecordObject to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.recordObject.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(widget.recordObject.description),
      ),
    );
  }
}