I’ve been developing a mobile app at work using Flutter the last couple months and absolutely love it. It’s a UI framework developed by Google that compiles down to native code for iOS and Android. It makes developing mobile layouts feel like snapping together legos.
To learn Flutter (which uses the programming language Dart), I built the generic “to do” app, exactly as I had done when learning Laravel and React. The mobile app actually uses the same REST API (hosted at laravelreact.com) as that project, which is a really nice benefit of having a decoupled UI.
Here’s a short overview video showing how it works:
You can find the source code on GitHub. There are a lot of example Flutter projects that use Firebase for authentication (which is great), but if you’re building something on top of Laravel or WordPress, this project might be more helpful to look at since it uses a REST API.
The app includes:
- Login
- Registration
- Password Reset
- Add to do
- Toggle to do
- View to dos (includes fetching from a paginated API)
- Log out
For state management across multiple widgets (views) I use the `provider` package. To store the user information and token, I use the `shared_preferences` library.
If you’re just getting started and want to learn more about Flutter, I recommend watching the Flutter in Focus series.
Hi, Devin! I am learning flutter right now and I came across your blog about making To-Do app in flutter and laravel. I watched your video and I decided to make one. I am exploring new aspects of dart and flutter. Thanks for sharing amazing tutorial and keep sharing. :)
Hi, how would you manage offline storage?
It would be cool to see that update..
thanks!
For offline storage you can use a SQLite database. I have another project that is entirely offline and interacts with a database like that: https://github.com/devinsays/gad7
If you’re trying to keep a local copy in sync with a remote copy and also provide an offline mode, you’ll need to write the app in an entirely different way so that changes save local and then get queued to be updated remote when connectivity resumes.
Hi, does this tutorial have the same concept if I create a chatbot with Laravel and Flutter?
Devin – Awesome tutorial . I’m stuck on something and want to understand the use of Provider in the way you have architected the code. Let’s say i have a listview that is called after authentication.
case Status.Authenticated:
return ChangeNotifierProvider(
create: (context) => ConversationProvider(authProvider),
child: Conversations());
Now within the list view onTap i would like to fetch additional details based on a parameter
return ListTile(
onTap: () {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => ConversationDetailPage(
conversation: conversation),
));
},
When i create another provider and use it within the detail page i run into the error below
Error: Could not find the correct Provider above this ConversationDetailPage Widget
This likely happens because you used a `BuildContext` that does not include the provider
Do you have any suggestion ?
Hello Devin, you work is great, I would like to create change password screen where user can enter the default password and compare it with stored password and then enter the new password he/she want to update, I stuck because still i’m new to flutter. In my project i’m using flutter and laravel as backend