Easy Split – Add screen navigation – Flutter – Day 4

Let us try to add the following features today.

1. Allow users to delete a row from the list view.
2. Users should be able to tap of a row in List View and navigate to next screen.
3. Pass the selected user from one screen to another

Delete a row in List View

In order delete a row from Listview, we are going to user ListView.builder to show the list of users. By this way we can use Dismissible class to provide swipe to delete feature.

return Dismissible(
            key: Key(item),
            onDismissed: (direction) {
              setState(() {
                _users.removeAt(index);
              });

              Scaffold.of(context)
                  .showSnackBar(SnackBar(content: Text("$item dismissed")));
            },

In the above code, snackBar displays toast kind of message with the deleted user name.

Tap ListView item to navigate to next screen

Use the Navigator class for transition from user page screen to expense list screen.

 Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ExpenseListPage('$item'),
                    ));

A new page ‘ExpenseListPage’ has been created with a constructor that accepts the selected user as an argument. Here is the code snippet for expenseListPage.dart

import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/cupertino.dart';

class ExpenseListPage extends StatelessWidget {
  final String userName;

  ExpenseListPage(this.userName);

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text('Expenses'),
      ),
      child: SafeArea(child: Text(userName)),
    );
  }
}

Here is modified userPage.dart

import 'package:easysplit/expenseListPage.dart';
import 'package:flutter/material.dart';
import 'package:flutter/widgets.dart';
import 'package:flutter/cupertino.dart';

class UserPage extends StatefulWidget {
  @override
  _MyListState createState() => _MyListState();
}

class _MyListState extends State<UserPage> {
  TextEditingController _textController;
  List<String> _users = ['Ravi', 'Ganesh', 'Prabhu', 'Venkatesh'];

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

  @override
  void dispose() {
    _textController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return CupertinoPageScaffold(
        navigationBar: CupertinoNavigationBar(
          middle: Text('Users'),
          trailing: CupertinoButton(
              padding: EdgeInsets.zero,
              child: Icon(
                CupertinoIcons.add,
                size: 35,
              ),
              onPressed: () {
                _textController = TextEditingController(text: '');
                _openDialog(context);
              }),
        ),
        child: _buildList(context));
  }

  Widget _buildList(BuildContext context) {
    return Scaffold(
      body: ListView.builder(
        itemCount: _users.length,
        itemBuilder: (context, index) {
          final item = _users[index];
          return Dismissible(
            key: Key(item),
            onDismissed: (direction) {
              setState(() {
                _users.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(
              title: Text('$item'),
              onTap: () {
                Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => ExpenseListPage('$item'),
                    ));
              },
            ),
          );
        },
      ),
    );
  }

  void _openDialog(ctx) {
    showCupertinoDialog(
        context: ctx,
        builder: (_) => CupertinoAlertDialog(
              title: Text('Add User'),
              content: CupertinoTextField(controller: _textController),
              actions: [
                // Close the dialog
                // You can use the CupertinoDialogAction widget instead
                CupertinoButton(
                    child: Text('Cancel'),
                    onPressed: () {
                      Navigator.of(ctx).pop();
                    }),
                CupertinoButton(
                    child: Text('Save'),
                    onPressed: () {
                      setState(() => _users.add(_textController.text));
                      Navigator.of(ctx).pop();
                    })
              ],
            ));
  }
}