Оценок пока нет Отправка данных на новый экран

Часто вы хотите не только перейти на новый экран, но и передать данные на экран. Например, вы можете передать информацию об элементе, который был прослушан.

Помните: экраны — это просто виджеты. В этом примере создайте список задач. При касании задачи перейдите на новый экран (виджет), в котором отображается информация о задаче. Этот рецепт использует следующие шаги:

1. Определить класс задач.
2. Показать список задач.
3. Создайте подробный экран, который может отображать информацию о задачах.
4. Перейдите и передайте данные на подробный экран.

1. Определяем класс задач

Во-первых, вам нужен простой способ представления задач. Для этого примера создайте класс, который содержит две части данных: заголовок и описание.

class Todo {
  final String title;
  final String description;

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

2. Создаем список задач

Во-вторых, отобразить список задач. В этом примере сгенерируйте 20 задач и покажите их с помощью ListView. Для получения дополнительной информации о работе со списками, см. Рецепт Использовать списки.

Генерация списка задач

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

Отображаем список задач, используя ListView

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

Все идет нормально. Это создает 20 задач и отображает их в ListView.

3. Создайте подробный экран для отображения информации о задачах.

Теперь создаем второй экран. Заголовок экрана содержит заголовок задачи, а тело экрана показывает описание.

Поскольку подробный экран является обычным StatelessWidget, требуется, чтобы пользователь ввел Todo в пользовательском интерфейсе. Затем создайте пользовательский интерфейс, используя заданную задачу.

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Todo.
  final Todo todo;

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

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

4. Перейдите и передайте данные на подробный экран

С подробным экраном DetailScreen вы готовы выполнить навигацию. В этом примере перейдите к DetailScreen, когда пользователь нажимает на задачу в списке. Передайте задачу на DetailScreen.

Чтобы захватить касание пользователя, напишите обратный вызов onTap() для виджета ListTile. В обратном вызове onTap() используйте метод Navigator.push().

ListView.builder(
  itemCount: todos.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(todos[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 to it.
      onTap: () {
        Navigator.push(
          context,
          MaterialPageRoute(
            builder: (context) => DetailScreen(todo: todos[index]),
          ),
        );
      },
    );
  },
);

Полный пример

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';

class Todo {
  final String title;
  final String description;

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

void main() {
  runApp(MaterialApp(
    title: 'Passing Data',
    home: TodosScreen(
      todos: List.generate(
        20,
        (i) => Todo(
              'Todo $i',
              'A description of what needs to be done for Todo $i',
            ),
      ),
    ),
  ));
}

class TodosScreen extends StatelessWidget {
  final List todos;

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

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Todos'),
      ),
      body: ListView.builder(
        itemCount: todos.length,
        itemBuilder: (context, index) {
          return ListTile(
            title: Text(todos[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(todo: todos[index]),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class DetailScreen extends StatelessWidget {
  // Declare a field that holds the Todo.
  final Todo todo;

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

  @override
  Widget build(BuildContext context) {
    // Use the Todo to create the UI.
    return Scaffold(
      appBar: AppBar(
        title: Text(todo.title),
      ),
      body: Padding(
        padding: EdgeInsets.all(16.0),
        child: Text(todo.description),
      ),
    );
  }
}

Данная статья является переводом официальной стать по ссылке Send data to a new screen