Fluttering on Rails: Full Stack CRUD Application Part 1 Setup, Model & Controller generation

I love Flutter and Rails so I decided to build a CRUD application using Flutter as my Front End and Rails as the back end. The app allows for items to be Created, Read updated (PATCH & PUT), and Destroyed. Additionally I crafted queries for searching items by name, price and database id.

This tutorial will walk you through how I built this application. Checkout the demo and the repos below.

https://www.youtube.com/watch?v=7osnJgyrgRk

Rails Repo => https://github.com/gardnerapp/Fluttering_on_Rails_db

Flutter Repo=> https://github.com/gardnerapp/Fluttering_on_Rails_Front

Step 1: Create a New Flutter and Rails Projects

I like to make things easy on myself, I just use the intelj IDEA and RubyMine text editors from JetBrains ❤️ which make it extremely easy to work with Flutter and Rails. Just start a normal Flutter project and start a Rails project in API mode by using the command:

Now its time to get coding !

Step 2: Generate an Item Model

We could just generate a scaffold and make our lives easy and if thats what you want to do you can run (from the directory holding your rails app). If you’d rather build the entire app from scratch 🤪 like me run the second command.

if your new to Rails the first command generates both a model and a CRUD controller for the Item model. The second command only generates the model itself. In Rails a model is a way of representing data from the database as a ruby object. This is easier then directly dealing with the database itself because we no longer have to write SQL or PG queries by hand.

lets migrate our database:

Step 3: Generate an Item Controller

A controller is a way for users to interact with the application. In rails controller’s are classes and the methods of the class are called actions. Each action is requested via a HTTP request, from there the action does what we program it to do ie. Create,Read Update or Destroy. Rather then having our views shown in HTML format we will have pages in our flutter application act as our views. If your not familiar with MVC architecture read: https://en.wikipedia.org/wiki/Model%E2%80%93view%E2%80%93controller

To generate a new controller run the command:

Usually we don’t prefix controllers with things like v1 but doing so makes it easier to control the API version we are working with, v1 ie. version 1.

head to the app/config/routes.rb file. This file is where we specify the relationship between our application URLs and the actions of our controller. In this file add:

using the namespace block with the v1 symbol prefixes all of our items controller actions with /v1. The Resources method makes CRUD urls, and the subsequent actions of the items controller available.All request to the items_controller will follow this format:

If your application is running locally the base_url will be localhost:3000. To see the new routes, the actions and the keywords they correspond with you can run:

That concludes this post, in our next post we will start by creating the Create action in our items controller and begin designing the home and create screen of our flutter UI. Stay tuned !

Be sure to checkout my youtube channel: https://www.youtube.com/channel/UCfd8A1xfzqk7veapUhe8hLQ

and my podcast: https://anchor.fm/coreys-corner

Programmer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store