DEV Community

Create a Todos app with Flutter and Provider

Shakib Hossain on June 03, 2019

Todo apps have always been a good first app for starters to learn something new. I also created this app solely for learning purposes. I have used ...

Read full post

Ayusch • Aug 7 '20

Great tutorial.
Helped me get started on my own journey towards provider pattern.

I've written something about it: ayusch.com/flutter-provider-patter...

Would love to get your feedback on this :)

Hugo Heneault • Sep 2 '19

Hi there! Thanks for this tutorial. Don't you forget to add the provider in the main.dart file?

I had an "could not find the correct provider above this Consumer Widget" until I wrapped my HomeScreen in an MultiProvider widget:

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MultiProvider(
        providers: [
          ChangeNotifierProvider(
            builder: (_) => TodoModel(),
          ),
        ],
        child: MaterialApp(
          title: 'Flutter Demo',
          theme: ThemeData(),
          home: HomeScreen(),
     );
  }
}

EDIT: it looks like you did that on the add toto page. But you should do it earlier as the empty list wont work until you add the provider ;)

Shakib Hossain • Sep 2 '19

Glad that you liked the tutorial.

Actually I did wrap the MaterialApp inside a ChangeNotifierProvider widget in the lib/main.dart file. We do not need to use MultiProvider because we are only using a single Provider in our app.

fild • Jul 18 '19

Hey, great tutorial.
Shouldn't it be final List<Task> _tasks and not final List<Todo> _todos at this part:

  final List<Todo> _todos = [
    Todo(title: 'Finish the app'),
    Todo(title: 'Write a blog post'),
    Todo(title: 'Share with community'),
  ];

Shakib Hossain • Jul 18 '19

I am glad you liked it.
And nice catch. I'll fix it ASAP. ✌️

Suzuki Tomohiro • Feb 9 '20

Thank you for the great tutorial.

(I noticed that with higher-order functions, you can combine completed_tasks.dart, incomplete_tasks.dart, and all_tasks.dart into one.

github.com/suztomo/flutter_todos/c... )

Huthaifah Mustafa • Apr 23 '20

Thanks @shakib609 ..

Best, Simple, Great tutorial ever seen.

Your great man..

Shakib Hossain • Apr 30 '20

Thanks. Glad you liked it. 😀

Peter Loos • Sep 17 '19

Excellent tutorial -- congratulations !!!

Shakib Hossain • Sep 18 '19

Glad you liked it :D

Bidhan Rai • Aug 5 '19

Shouldn't you wrap the widgets in alltasks, compltedTasks and inCompleteTasks with ChangeNotifierProvider ?

Shakib Hossain • Aug 5 '19

I actually forgot to include the changes I made in lib/main.dart file. It should work now. Thanks for pointing it out.

Breno Augusto da SIlva Moreno • Jul 22 '19

Isn't that the example that the Flutter's team gave at Google IO 2019? You should give them the credit if so...

Shakib Hossain • Jul 22 '19

Thanks for reading my post.
I actually did not copy this project from anywhere. And after you said I searched and found that, the flutter team actually created a dynamic pie-chart in Google I/O '19 when they introduced Provider.