{"id":6223,"date":"2024-04-25T14:22:55","date_gmt":"2024-04-25T14:22:55","guid":{"rendered":"https:\/\/www.solutionstreet.com\/blog\/?p=6223"},"modified":"2024-04-25T15:10:48","modified_gmt":"2024-04-25T15:10:48","slug":"flutterflow-tutorial-part-2","status":"publish","type":"post","link":"https:\/\/www.solutionstreet.com\/blog\/2024\/04\/25\/flutterflow-tutorial-part-2\/","title":{"rendered":"FlutterFlow Tutorial – Part 2"},"content":{"rendered":"
\n
\"\"<\/figure>\n<\/div>\n\n\n

Introduction<\/h1>\n\n\n\n

This is Part 2 (of 2) of my FlutterFlow<\/a> tutorial. FlutterFlow is a no-code\/low-code browser-based builder for developing native mobile applications. In Part 1<\/a>, I introduced FlutterFlow and created a mobile app with the basics of authentication using Sign Up\/Sign In page templates with a database connection to a Supabase<\/a> database. In this final part, I will create some mobile pages to display basic CRUD<\/a> processing and then review the overall pros and cons of FlutterFlow.<\/p>\n\n\n\n

Tutorial (continued)<\/h1>\n\n\n\n

To pick up where we left off, we have a blank home page which just has the title of \u201cPage Title\u201d and a logout icon button. Let\u2019s swap to Supabase and create a new database table containing a list of pickleball players. Let\u2019s assume the app we are creating will contain a list of these players with their skill rating<\/a> (this is a number from 1.0 to 5.5). Although we won\u2019t build out the full mobile application you can see how this player listing could be used to schedule games with calendaring functionality or just pair up players for tournaments. For now, let\u2019s just create the players table with mobile UI screens that allows the user to view, edit, delete, and create the players. <\/p>\n\n\n\n

Database Table Creation<\/h2>\n\n\n\n

<\/p>\n\n\n\n

Within Supabase once you are within your DemoDB project, which we created in Part 1 of the tutorial, select the Table Editor menu icon on the left and create a \u201cplayers\u201d table that contains a first_name<\/em>, last_name<\/em>, and skill_rating<\/em>. Add columns to the table at the bottom of the table creation screen. We will also add a user_id<\/em> field to associate the players record to the user such that every user of the mobile app will have their own list of players. By default, Supabase adds an id<\/em> field and a created_at<\/em> timestamp. <\/p>\n\n\n\n

<\/p>\n\n\n\n

Also uncheck the \u201cIs Nullable\u201d toggle via the settings icon for the fields you created.<\/p>\n\n\n

\n
\"\"<\/figure>\n<\/div>\n\n\n

Once you have created the table, you should see the \u201cplayers\u201d table listed in the Table Editor section of Supabase. There you will click on the three dots and select \u201cView Policies.\u201d We need to establish a row level policy<\/a> for access to this table. Here we will only allow the current user the ability to access their own data. Select the \u201cCreate New Policy\u201d button and create a policy where we use the following statement as part of the check: <\/p>\n\n\n\n

((auth.jwt() ->> ‘sub’::text) = user_id)<\/p>\n\n\n\n

\n

This statement is ensuring that the user that\u2019s part of the auth token sent to Supabase is the same as the user_id field. Give this policy a name: \u201cAllow access to players based on user_id,\u201d select the \u201cAll\u201d radio button (since we want this policy to apply to all actions), select the \u201cUse check expression<\/a>\u201d (since we want this policy to apply to new rows), and add the above  statement twice in the policy. Save the policy and we are all set for now with Supabase (verify your work against this screenshot).<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n

Return to your FlutterFlow project and under Settings\/Supabase, click the \u201cGet Schema\u201d button and you should see your \u201cplayers\u201d table fully populate in the IDE. At this point your mobile app has access to reference those fields. You can think of this as the UI database model.<\/p>\n\n\n\n

Reading<\/strong> players<\/h2>\n\n\n\n
\n

Let\u2019s change the \u201cHome Page\u201d to display our player records. From the Column widget, add a Container widget child. Then set the height and width of the container to 100%.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

\n

<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n
\n

From the Container widget, add a ListView widget child. Here we are going to have FlutterFlow retrieve all of the player records associated with the logged in user. On the right side of the IDE (while in the context of the ListView) we are going to add a query.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n
\n

Add the initial fields selecting \u201cSupabase Query\u201d and \u201cplayers\u201d table.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n
\"\"\/<\/figure>
\n

And continue to add the filter (Add Filter button) and set the appropriate values where the user_id of the table record must equal the User ID of the authenticated user.<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

\"\"\/<\/figure>
\n

Also establish ordering by ordering the list via the created_at timestamp in descending order (i.e., last inserted at the top of the list).<\/p>\n<\/div><\/div>\n\n\n\n

<\/p>\n\n\n\n

\"\"\/<\/figure>
\n

Confirm the query creation and you should see this.<\/p>\n<\/div><\/div>\n\n\n\n

\n

Now we need to add a ListTile widget as a child of the ListView to display our data. In the properties of the ListTile we will add the first_name and last_name as a combination text for the title of the ListTile and the skill_rating as the subtitle. First select the combination text.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n
\n

You will select the first_name and last_name from the \u201cPlayers Row\u201d and add a space between the two fields.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n

For the Subtitle we will do something similar by displaying the skill_rating with the text of \u201cRating: \u201c just prior to the field.<\/p>\n\n\n\n

\n

Now we can test out our page, but first we need some data. Let\u2019s manually add some data to Supabase. Go back to Supabase and select the Authentication page. There you will see the user(s) you created previously when signing up for an account. Copy the UUID from the user you wish to test. Go to the Table Editor and select \u201cplayers\u201d and insert select rows of data by only entering the first_name, last_name, skill_rating, and user_id (where the UUID you copied is pasted here). Now that you have a few rows of data, test your app via Test Mode<\/a> (selecting the lightning bolt). You should see something like this with your own data.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n

Deleting<\/strong> players<\/h2>\n\n\n\n
\n

Now that we have the list of players, let\u2019s clean up the Page Title and add create, update, and delete functionality. I\u2019ll move faster through the rest of the instructions since, by now, you should have a handle on the IDE and what\u2019s required. First, change the title of the Home Page to \u201cPickleball Players.\u201d Let\u2019s add the delete functionality first with a slidable widget. Select the ListTile widget and you will see a property called \u201cSlidable.\u201d Turn that on.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n
\n

By default you will have a Share action so change that (the SlidableActionWidget that was just created) to a Delete action (change the icon, text, color).<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

\n

With the Slidable Action Widget selected, open the Action Flow Editor and add these two actions. First we will add the call to Supabase to delete the row. Be sure to add a Filter (Matching Rows) where the id of the database row is equal to the id of the row in the UI.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n

<\/p>\n\n\n\n

\n

Then add a \u201cRefresh Database Request\u201d action on the ListView widget to ensure that the mobile page is refreshed with data. You can now test the delete functionality by sliding the row in test mode to delete the row.<\/p>\n<\/div>

\"\"\/<\/figure><\/div>\n\n\n\n

Creating<\/strong> players<\/h2>\n\n\n\n

Now we can add the Create Player functionality. Let\u2019s add a new page. We can do this in many ways including creating a blank page or copying the Home Page to start. I duplicated the Home Page, renamed the page to \u201cCreatePlayer,\u201d deleted the Container and added all of the necessary fields. Here is what my page looks like and also the widget structure. See if you can recreate what I did.<\/p>\n\n\n\n

\n

Several notes to help you:<\/p>\n\n\n\n