DEV Community

Cover image for Create a Todos app with Flutter and Provider

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 ...
Collapse
 
hugoheneault profile image
Hugo Heneault

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 ;)

Collapse
 
shakib609 profile image
Shakib Hossain

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.

Collapse
 
ayuschjain profile image
Ayusch

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 :)

Collapse
 
mihaelfi profile image
fild

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'),
  ];

?

Collapse
 
shakib609 profile image
Shakib Hossain

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

Collapse
 
suztomo profile image
Suzuki Tomohiro

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... )

Collapse
 
peterloos profile image
Peter Loos

Excellent tutorial -- congratulations !!!

Collapse
 
shakib609 profile image
Shakib Hossain

Glad you liked it :D

Collapse
 
hsul4n profile image
Huthaifah Mustafa

Thanks @shakib609 ..

Best, Simple, Great tutorial ever seen.

Your great man..

Collapse
 
shakib609 profile image
Shakib Hossain

Thanks. Glad you liked it. 😀

Collapse
 
brenoasm profile image
Breno Augusto da SIlva Moreno

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

Collapse
 
shakib609 profile image
Shakib Hossain

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.

Collapse
 
bidhanrai profile image
Bidhan Rai

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

Collapse
 
shakib609 profile image
Shakib Hossain

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