스크린에 데이터 전달하기

스크린에 데이터 전달하기

종종 우리는 새로운 스크린으로 이동할 때 데이터도 같이 넘겨주고 싶을 때가 있습니다. 예를 들어 사용자가 탭한 아이템의 정보를 같이 넘겨 조고 싶을 것 입니다.

스크린은 위젯이라는것을 명심하세요. 이 예제에서 우리는 투두 리스트를 작성하고, 투두가 탭되었을 때 투두의 정보를 보여주는 새로운 스크린(위젯)으로 이동하겠습니다.

디렉션

1. 투두 클래스 정의

2. 투두 리스트 화면출력

3. 투두의 정보를 표시할 디테일 스크린을 작성

4. 디테일 스크린으로 데이터를 넘겨주면서 화면이동

1. 투두 클래스 정의

먼저 투두를 표현할 수 잇는 것이 필요합니다. 두개의 정보(타이틀, 설명)를 가지는클래스를 정의하겟습니다.

class Todo{

  final String title;

  final String description

  Todo(this.title, this.description);

}

2. 투두 리스트 화면출력

투두리스스트를 화면에 출력해 봅시다. 이 예제에서 20개의 투두를 작성하고 ListView를 사용해 보여주도록 하겠습니다.

리스트 동작에 대한 정보를 확인하시려면 기본 리스트 레시피를 참고하세요

2-1. 투두 리스트 작성

final todos = List<Todo>.generate(20, (i)=>Todo('Todo $i', .A description of what need to be done for Todo $i'));

2-2 투두리스트를 ListView를 사용해 화면출력

List.builder(

  itemCount : todos.length,

  itemBuilder : (context, index){

    return ListTile(

      title : Text(todos[index].title)

    );

  }

)

이렇게하면 20개의 투두를 ListView를 통해서 화면에 출력하게 됩니다.

3. 투두의 정보를 표시할 디테일 스크린을 작성

이제 디테일 스크린을 작성해 보겠습니다. 스크린의 타이틀은 투두의 타이틀이고, 스크린의 바디는 투두의 디스크립션이 표시됩니다.

StatelessWidget으로 만들것이기 때문에 단순히 Todo를 넘기고, 그것을 사용해 위젯을 빌드하는것으로 하겠습니다. 

class DetailScreen extends StatelessWidget{

  final Todo todo;

  DetailScreen({Key key, @required this.todo}) : super(key : key);

  @override

  Widget build(BuildContext context){

    return Scaffold(

      appBar :AppBar(title:Text(todo.title)),

      body : Padding(

        padding:EdgetInsets.all(16.0),

        child : Text(todo.desciption)

      )

    );

  }

}

4. 디테일 스크린으로 데이터를 넘겨주면서 화면이동

DetailScreen은 준비가 되었으면 화면이동을 실행할 준비가 된 것입니다. 사용자가 투두리스트의 투두를 탭하면 DetailScreen으로 화면 이동할 것입니다. 그때 투두를 넘기도록 하겠습니다.

먼저, ListTile 위젯에 onTap 콜백을 작성하도록하겠습니다. onTap콜백에서 Navigation.push 메소드를 사용하겠습니다.

ListView.builder(

  itemCount : todos.length,

  itemBuilder : (context, index){

    return ListTile(

      title : Text(todos[index].title),

      onTap : (){

        Navigator.push(context, MaterialPageRoute(builder(context)=>DetailScreen(todos[index])));

      }

    )

  }

);

import 'package:flutter/material.dart';

void main() {

runApp(MaterialApp(

title: "passing data",

home: TodoScreen(

todos: List.generate(

20,

(index) => Todo('Todo $index',

"A description what needs to be done for Todo $index")))));

}

class Todo {

final String title;

final String description;

Todo(this.title, this.description);

}

class TodoScreen extends StatelessWidget {

final List<Todo> todos;

TodoScreen({Key key, @required this.todos}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text("TodoScreen")),

body: 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])));

});

}));

}

}

class DetailScreen extends StatelessWidget {

final Todo todo;

DetailScreen({Key key, @required this.todo}) : super(key: key);

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text(todo.title)),

body: Padding(

padding: EdgeInsets.all(16.0),

child: Text(todo.description),

));

}

}

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