Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Flutter Todo App Final Code
// Import MaterialApp and other widgets which we can use to quickly create a material app
import 'package:flutter/material.dart';
// Code written in Dart starts exectuting from the main function. runApp is part of
// Flutter, and requires the component which will be our app's container. In Flutter,
// every component is known as a "widget".
void main() => runApp(new TodoApp());
// Every component in Flutter is a widget, even the whole app itself
class TodoApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new MaterialApp(
title: 'Todo List',
home: new TodoList()
);
}
}
class TodoList extends StatefulWidget {
@override
createState() => new TodoListState();
}
class TodoListState extends State<TodoList> {
List<String> _todoItems = [];
void _addTodoItem(String task) {
// Only add the task if the user actually entered something
if(task.length > 0) {
// Putting our code inside "setState" tells the app that our state has changed, and
// it will automatically re-render the list
setState(() => _todoItems.add(task));
}
}
void _removeTodoItem(int index) {
setState(() => _todoItems.removeAt(index));
}
void _promptRemoveTodoItem(int index) {
showDialog(
context: context,
builder: (BuildContext context) {
return new AlertDialog(
title: new Text('Mark "${_todoItems[index]}" as done?'),
actions: <Widget>[
new FlatButton(
child: new Text('CANCEL'),
// The alert is actually part of the navigation stack, so to close it, we
// need to pop it.
onPressed: () => Navigator.of(context).pop()
),
new FlatButton(
child: new Text('MARK AS DONE'),
onPressed: () {
_removeTodoItem(index);
Navigator.of(context).pop();
}
)
]
);
}
);
}
// Build the whole list of todo items
Widget _buildTodoList() {
return new ListView.builder(
itemBuilder: (context, index) {
// itemBuilder will be automatically be called as many times as it takes for the
// list to fill up its available space, which is most likely more than the
// number of todo items we have. So, we need to check the index is OK.
if(index < _todoItems.length) {
return _buildTodoItem(_todoItems[index], index);
}
},
);
}
// Build a single todo item
Widget _buildTodoItem(String todoText, int index) {
return new ListTile(
title: new Text(todoText),
onTap: () => _promptRemoveTodoItem(index)
);
}
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Todo List')
),
body: _buildTodoList(),
floatingActionButton: new FloatingActionButton(
onPressed: _pushAddTodoScreen,
tooltip: 'Add task',
child: new Icon(Icons.add)
),
);
}
void _pushAddTodoScreen() {
// Push this page onto the stack
Navigator.of(context).push(
// MaterialPageRoute will automatically animate the screen entry, as well as adding
// a back button to close it
new MaterialPageRoute(
builder: (context) {
return new Scaffold(
appBar: new AppBar(
title: new Text('Add a new task')
),
body: new TextField(
autofocus: true,
onSubmitted: (val) {
_addTodoItem(val);
Navigator.pop(context); // Close the add todo screen
},
decoration: new InputDecoration(
hintText: 'Enter something to do...',
contentPadding: const EdgeInsets.all(16.0)
),
)
);
}
)
);
}
}
@Nxele

This comment has been minimized.

Copy link

Nxele commented Apr 14, 2020

great work this is the best app so far for getting started with flutter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
You can’t perform that action at this time.