Creating a Flutter App with a Google Sheets Database

Are you looking to build a Flutter app with a simple, cost-effective, and easy-to-use database? Look no further than Google Sheets! In this tutorial, I will show you how to create a custom API to connect a Flutter app to a Google Sheets database, allowing you to store and retrieve data from your app.
I'll start by explaining the basics of using Google Sheets as a database for your Flutter app. Then, I'll walk you through how to set up a custom API using Google Apps Script and connect it to your Flutter app using HTTP requests.
By the end of this tutorial, you'll have a fully functional Flutter app connected to a Google Sheets database, giving you a powerful and flexible solution for storing and managing data for your app.
Whether you're a beginner or an experienced app developer, this tutorial is perfect for anyone looking to build a Flutter app with a simple and easy-to-use database solution. So, grab your favorite beverage and join us in this exciting journey of building a Flutter app with a Google Sheets database!
#FlutterAppDevelopment #GoogleSheetsAPI #CustomAPI
🕑Timestamps
________________
0:00 Introduction
0:10 Setting up Database
3:17 Writing Apps Script
6:33 Deploying our Web App (API)
7:48 Coding our App
14:47 Updating our Data
15:39 Outro
🛡️Join this channel to get access to perks: www.youtube.com/@Spellthorn/join
Help me reach my sub goal by subscribing youtube.com/@Spellthorn?sub_c...
||||||||||||||| 233% ||||||||||||||| 4.66K/2K
Most recent subscriber: jtcdarkstar darkstar
@Spellthorn is a talented web/mobile developer who is dedicated to helping others improve their coding skills. Through their TH-cam channel, they create informative and engaging videos that cover a wide range of programming topics. - spellthorn.com/

[@tacowaco]

Thank you. This must have taken a lot of work to prepare.

[@Spellthorn]

You're welcome. I tried to keep the data simple for the video. But I've used this in other projects with tons of data. Definitely an easier work flow. Making this video with chat gpt help did make it take longer due trying to get the prompting perfect 😄

[@alessandroscimone5463]

oooooo yessss!! This is very useful! Thank you!

[@Spellthorn]

Glad it was helpful! Makes coding your apps very easy and easy to update.

[@adamen111]

How did I not know about Apps Script before this video? Thanks so much this is gamechanger

[@Spellthorn]

Yea I learned it a few years ago when making a database app for Pokemon unite but then Android wouldn't let me upload the app lol

[@mohamadalbakour6348]

Thank You very Match. شكرا جزيلا لك على كل المعلومات الرائعة

[@Spellthorn]

You're welcome 🤗

[@JoshComninellis]

Does this same or similar process work for using Google Sheets as a for Flutterflow

[@jrnight7694]

Hey i've just found your channel and this video is so useful and understandable, i'm in the middle of my project using data from microcontroller ESP to send into google sheet then into flutter app that like google map to show information from ESP but yeah i guess the map is kinda the hard part to me .Anyway thank you for your explaniation it helping me out.

[@Spellthorn]

I'm glad it was helpful 😊

[@subsavage5722]

Daaamn, great video man.

[@Spellthorn]

Glad you liked it!

[@fedimakni1200]

Thank you very much for the video.
I have 2 questions if possible:
- i am a beginner to flutter, where's the function doGet you wrote in apps script mentioned in flutter code?
-Other than getting the data, can we also send data to google sheet?
May i ask if you can tell us the steps (no need to be in detail just the big lines) should i add a set function to apps script first and then call it in flutter but i return to my first question about the location of get function in flutter code.

[@Spellthorn]

The appsScript is used to create the "API" so you would do that all on sheets side, then in Flutter just access the API like you would access any other API.
As for posting to it, yea you should be able to easily post to it but will have to add that functionality to the appsScript. ChatGPT may be able to guide you on this, you can do a doPost etc

[@abdullahflutter]

hello can i send you something and you can tell me how to fix
it is an error but i don't know how to fix

[@Spellthorn]

I can certainly try. Have you tried chat gpt you can send it all your code and ask whats wrong 😁

[@abdullahflutter]

@@Spellthorn yea i did but even chatgpt can't find the problem

[@swatirawat2515]

Unfortunately google no longer allows the api to deploy
It blocks the deployment everytime showing 'This app tried to access sensitive info in your Google Account. To keep your account safe, Google blocked this access.'

[@Spellthorn]

Hmmm. I'll have to look into this. Thanks for the info

[@TrikNgonlen]

A W E S O M E !

[@Spellthorn]

Thanks. Glad you liked it

[@informativeinformations9580]

Block chain(from scratch) with flutter please

[@Spellthorn]

I can look into it 😁

[@informativeinformations9580]

Thanks😃

[@naveensinghkhatri]

Can you not just prompt ChatGPT to give you step by step instructions on how to do what you want to do? 😂

[@Spellthorn]

ChatGPT is better at doing what its told rather than thinking for itself. I find i have better results when giving it rules to follow and then letting it decide off of those rules, let me know if you have better prompting ideas that work 😁

[@abdullahflutter]

this is a sign in screen but the erro is when i added the image the buttons are not in the bottom screen anymore :
import 'package:flutter/material.dart';
class SigninScreen extends StatelessWidget {
const SigninScreen({Key? key}) : super(key: key);
@override
Widget build(BuildContext context) {
return Scaffold(
body: Stack(
alignment: Alignment.bottomCenter,
children: [
Image.asset(
'images/veg.png',
),
Positioned(
bottom: 130,
child: SizedBox(
width: 300,
height: 65,
child: ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.telegram, color: Colors.white),
SizedBox(width: 8),
Text('Sign in with Telegram', style: TextStyle(fontSize: 20)),
],
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[700],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
),
Positioned(
bottom: 50,
child: SizedBox(
width: 300,
height: 65,
child: ElevatedButton(
onPressed: () {},
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.facebook, color: Colors.white),
SizedBox(width: 8),
Text('Sign in with Facebook', style: TextStyle(fontSize: 20)),
],
),
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[900],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
),
),
),
],
),
);
}
}

[@Spellthorn]

sorry your comment got flagged as spam as you can't paste the code in chat I don't think.

[@abdullahflutter]

@@Spellthorn the code is in this comment
just press on show more

[@Spellthorn]

Oh sorry, it wasn't showing on the comments in my studio.

[@Spellthorn]

I would suggest not using Stack. and use Column. Here's example, Hope it helps
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.end,
children: [
Expanded(
child: Image.asset('images/veg.jpg'),
),
SizedBox(
width: 300,
height: 65,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[700],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.telegram, color: Colors.white),
SizedBox(width: 8),
Text('Sign in with Telegram', style: TextStyle(fontSize: 20)),
],
),
),
),
const SizedBox(height: 16),
SizedBox(
width: 300,
height: 65,
child: ElevatedButton(
onPressed: () {},
style: ElevatedButton.styleFrom(
backgroundColor: Colors.blue[900],
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(30),
),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.facebook, color: Colors.white),
SizedBox(width: 8),
Text('Sign in with Facebook', style: TextStyle(fontSize: 20)),
],
),
),
),
const SizedBox(height: 130), // added padding at the bottom
],
),
);