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.
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:
rails new --api flutter_crud
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.
rails g scaffold Item name:string price:integerrails g model Item name:string price:integer
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:
rails g controller v1/Items
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:
namespace :v1 do
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