Flutter development-6: Enhancing UI and Features

Flutter UI implementation provides developers with endless possibilities. In this post, we’ll improve the UI implementation of the To-Do list app we created earlier and add some new features. We’ll take the UI implementation to the next level using Flutter’s rich widget library.

1. Improving App UI Implementation

Enhancing UI Visual Effects

Let’s improve the UI implementation using Flutter’s Material Design widgets. First, we’ll wrap each To-Do item with a Card widget to make them visually more distinct. This is one way to enhance the user experience (UX), an important element in UI implementation.

Modify the TodoList class in the lib/main.dart file as follows:

class TodoList extends StatelessWidget {
  final List<Todo> todos;
  final Function(Todo) onTodoToggle;
  final Function(Todo) onTodoDelete;

  TodoList({
    required this.todos,
    required this.onTodoToggle,
    required this.onTodoDelete,
  });

  @override
  Widget build(BuildContext context) {
    return ListView.builder(
      itemCount: todos.length,
      itemBuilder: (context, index) {
        return Card(
          elevation: 2,
          margin: EdgeInsets.symmetric(horizontal: 8, vertical: 4),
          child: ListTile(
            leading: Checkbox(
              value: todos[index].isCompleted,
              onChanged: (_) => onTodoToggle(todos[index]),
            ),
            title: Text(
              todos[index].title,
              style: TextStyle(
                decoration: todos[index].isCompleted
                    ? TextDecoration.lineThrough
                    : null,
              ),
            ),
            trailing: IconButton(
              icon: Icon(Icons.delete),
              onPressed: () => onTodoDelete(todos[index]),
            ),
          ),
        );
      },
    );
  }
}

Using the Card widget this way makes each To-Do item more clearly distinguishable, improving the quality of UI implementation.

Increasing App UI Implementation Responsiveness

One of Flutter’s strengths is the ease of implementing responsive UIs. We can use the setState method to immediately update the UI whenever the state of a To-Do item changes.

void _toggleTodo(Todo todo) {
  setState(() {
    todo.isCompleted = !todo.isCompleted;
    _saveTodos();
  });
}

This responsive app UI implementation greatly improves the app’s usability by providing immediate feedback to the user.

Maintaining Consistency in App UI Implementation

Another important aspect of app UI implementation is design consistency. We can use Flutter’s ThemeData to consistently manage colors and styles across the entire app.

MaterialApp(
  title: 'To-Do List',
  theme: ThemeData(
    primarySwatch: Colors.blue,
    // Other theme properties...
  ),
  home: TodoListScreen(),
)

The theme set this way applies to the entire app, enabling consistent UI implementation.

2. Adding Delete Functionality

Now that we’ve added a delete button to each To-Do item, let’s implement the actual delete functionality. Add the following method to the _TodoListScreenState class:

void _deleteTodo(Todo todo) {
  setState(() {
    todos.remove(todo);
    _saveTodos();
  });
}

Then modify the TodoList widget creation part in the build method as follows:

TodoList(
  todos: todos,
  onTodoToggle: _toggleTodo,
  onTodoDelete: _deleteTodo,
),

3. Adding Edit Functionality

Finally, let’s add functionality to edit existing To-Do items. Add the following method to the _TodoListScreenState class:

void _editTodo(Todo todo) {
  showDialog(
    context: context,
    builder: (BuildContext context) {
      String editedTodo = todo.title;
      return AlertDialog(
        title: Text('Edit todo'),
        content: TextField(
          onChanged: (value) {
            editedTodo = value;
          },
          controller: TextEditingController(text: todo.title),
        ),
        actions: <Widget>[
          TextButton(
            child: Text('Cancel'),
            onPressed: () {
              Navigator.of(context).pop();
            },
          ),
          TextButton(
            child: Text('Save'),
            onPressed: () {
              setState(() {
                todo.title = editedTodo;
                _saveTodos();
              });
              Navigator.of(context).pop();
            },
          ),
        ],
      );
    },
  );
}

And add the onTap property to the ListTile in the TodoList class to connect the edit functionality:

ListTile(
  // ... existing code ...
  onTap: () => onTodoEdit(todos[index]),
),

Remember to appropriately modify the constructor of the TodoList class and the build method of _TodoListScreenState.

4. Final Code

Now the entire main.dart file looks like this:

[The full code is omitted for brevity, but it would be the same as in the Korean version, just translated to English comments and string literals]

Conclusion

In this post, we’ve explored various aspects of UI implementation using Flutter. We improved the To-Do list app by considering visual enhancements, adding functional elements, improving responsiveness, and maintaining design consistency.

UI implementation using Flutter is just the beginning. Referring to Flutter’s official documentation and widget catalog allows for even more diverse and sophisticated UI implementations.

• Flutter Official Website: Flutter – Build apps for any screen
• Flutter Widget Catalog: Widgets | Flutter

In the next post, we’ll look at how to improve the app’s structure and increase UI implementation efficiency by introducing a state management library. If you have any more questions about Flutter app UI implementation, please leave a comment!

Related Posts

Flutter development-1 – CSAI

Flutter Development-2: Project Creation and Structure Understanding – CSAI

Flutter Development-3: Implementing a To-Do List App UI – CSAI

Flutter Development-4: Adding App State Management – CSAI

Flutter Development-5: Adding Local Storage – CSAI