Easy Split – Link Expense and User object – Flutter – Day 7

In this post, we will try do the following

1. Create a User class and associate expenses with a User.
2. Build the Expense List from the added expenses in Expense page.

Create User model and associate expenses

Earlier we used to pass the entered user name to the expense list page. Let us an add User model that will also hold expenses for that user.

import 'package:easysplit/model/expense.dart';

class User {
  String name;
  double totalExpense;
  double recieve;
  double pay;
  List<Expense> expenses;
}

Now update the userPage.dart to hold the user information in instance of User class.

  CupertinoButton(
                    child: Text('Save'),
                    onPressed: () {
                      setState(() {
                        User _user = new User();
                        _user.name = _textController.text;
                        _users.add(_user);
                      });
                      Navigator.of(ctx).pop();
                    })
              ],
            ));

Change the ListView to read from the users list with instances of added users.

List<User> _users = [];

Widget _buildList(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _users.length,
        itemBuilder: (context, index) {
          final item = _users[index];
          return Dismissible(
            key: Key(item.name),
            onDismissed: (direction) {
              setState(() {
                _users.removeAt(index);
              });

              Scaffold.of(context).showSnackBar(
                  SnackBar(content: Text(item.name + ' dismissed')));
            },
            // Show a red background as the item is swiped away.
            background: Container(color: Colors.red),
            child: ListTile(
              title: Text(item.name),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ExpenseListPage(item),
                    ));
              },
            ),
          );
        },
      ),
    );
  }

There are other properties defined in User class like totalExpense, receive and pay. We will be using these properties in the Summary page.

Populate user from the User object

class _MyExpenseListState extends State<ExpenseListPage> {
  TextEditingController _textController;
  final User user;
  List<Expense> _expenses = [];

  _MyExpenseListState(this.user);

  @override
  void initState() {
    super.initState();
    _textController = TextEditingController(text: user.name);
  }

Build the Expense List using Expense model

In the expenseList page, we had hardcoded the expenses. Let us now modify that so that it lists are built using the new added expenses. Also these expenses will be added to the expenses list in user object.

Widget _buildList(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _expenses.length,
        itemBuilder: (context, index) {
          final item = _expenses[index];
          return Dismissible(
            key: Key(item.name),
            onDismissed: (direction) {
              setState(() {
                _expenses.removeAt(index);
              });

              Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text("$item dismissed")));
            },
            // Show a red background as the item is swiped away.
            background: Container(color: Colors.red),
            child: ListTile(
                trailing: Text(item.amount.toString()),
                title: Text(item.name),
                subtitle: Text(item.dateTime.formatDate()),
                onTap: () {
                  moveToExpensePage(user);
                }),
          );
        },
      ),
    );
  }

All the newly added expenses has to be added back to the user object as well.

 void moveToExpensePage(User user) async {
    final Expense expense = await Navigator.push(
        context,
        MaterialPageRoute(
          builder: (context) => ExpensePage(user),
        ));
    setState(() {
      _expenses.add(expense);
      user.expenses.add(expense);
    });
  }