05x02_view.md

Flutter esencial

¡Aprende a crear aplicaciones móviles increíbles con Flutter!

View

presentation/tasks_view.dart

import 'package:clean_mvvm/app/dependency_injection/dependency_injection.dart';
import 'package:clean_mvvm/presentation/model/task.dart';
import 'package:clean_mvvm/presentation/tasks/tasks_viewmodel.dart';
import 'package:flutter/material.dart';

class TasksView extends StatefulWidget {
  const TasksView({super.key});

  @override
  State<TasksView> createState() => _TasksViewState();
}

class _TasksViewState extends State<TasksView> {
  final _tasksViewModel = getIt<TasksViewModel>();

  @override
  void initState() {
    WidgetsBinding.instance.addPostFrameCallback((_) {
      _tasksViewModel.start();
    });
    super.initState();
  }

  @override
  void dispose() {
    _tasksViewModel.finish();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: StreamBuilder<List<Task>?>(
        stream: _tasksViewModel.tasksOutput,
        builder: (_, snapshot) {
          final tasks = snapshot.data;
          if (tasks == null) {
            return const Center(
              child: CircularProgressIndicator(),
            );
          }
          return tasks.isNotEmpty
              ? ListView.builder(
                  itemBuilder: (_, index) {
                    final task = tasks[index];
                    return ListTile(title: Text(task.name));
                  },
                  itemCount: tasks.length,
                )
              : const Center(
                  child: Text('No data'),
                );
        },
      ),
    );
  }
}