[Flutter] 새로운 화면으로 데이터 보내기

1.Todo 클래스를 정의합니다.
2.Todo 리스트를 보여줍니다.
3.Todo에 대한 상세 정보를 보여줄 수 있는 화면을 생성합니다.
4.상세 화면으로 이동하면서 데이터를 전달합니다.


1.

class Todo{
  final String title;
  final String description;

  Todo(this.title, this.description);
}

2.

final todos = List<Todo>.generate(
  20,
  (i) => Todo(
    'todo $i',
    'description Todo $i',
  ),
);

-ListView를 사용하여 Todo리스트 보여주기

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index){
    return ListTile(
      title: Text(todos[index].title),
    );
  },
);

3.Todo에 대한 상세 정보를 보여줄 수 있는 화면 생성.

class DetailScreen extends StatelessWidget{
  //Todo를 들고 있을 필드를 선언
  final Todo todo;
  //생성자 매개변수로 Todo를 받도록 강제.
  DetailScreen({Key key, @required this.todo}) : super(key: key);

  @override
  Widget build(BuildContext context){
    //UI를 그리기 위해 Todo를 사용합니다.
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

4.상세 화면으로 이동하면서 데이터를 전달합니다.

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index){
    return ListTile(
      title: Text(todos[index].title),
      onTap: (){
        Navigator.push(
          context,
          materialPageRoute(
            builder: (context) => DetailScreen(todo: todos[index]),
          ),
        );
      },
    );
  },
);

 

 

참조 :

https://flutter-ko.dev/docs/cookbook/navigation/passing-data

새로운 화면으로 데이터 보내기