Building a Mobile App with Flutter and Laravel

By Devin

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.

About Devin

I am a developer based in Austin, Texas. I run a little theme shop called DevPress and help manage a WooCommerce shop with Universal Yums. Find me on twitter @devinsays.

6 Responses

  1. Anuj Joshi

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

    1. Devin

      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.

  4. satch

    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 ?

  5. shedrack kitomari

    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

Leave a Reply