How to Use FlutterFlow AI Gen for Beginners | How to Make Netflix with FlutterFlow

I'm going to be showing you how to create your very own Netflix using flutterflow you're going to be learning four main things in this video number one how to break down your app idea number two the tools that I'm going to be using to accomplish this three the prompts the AI prompts I use to make this a reality number four the step-by-step process so you can do this yourself first of all let's go with the app idea what am I trying to build I'm trying to create Netflix now what I did was I looked at Google and did Google images and looked at their breakdown of what their app looked like as a reference now what are the tools that I'm going to be using well I'm going to be using flutter flow and another platform called to uto to uto allows you to launch your own Ott platform basically that means Ott means over the top so you can create your own streaming platform over other internet services so instead of trying to build it on uh AWS Amazon web servers or just using Google Cloud platform they make it a lot easier they package it and it's almost creating Netflix out of the box the limitation is a lot of times if you use to uto you might want your own app to look a certain way or behave a certain way and they're like hey take it or leave it but they have something called core by to uto so I can use all the power of their streaming platform and tie it into something like flutter flow so I'm going to be using flutter flow and use their new AI gen now this is going to allow you to build an an app using AI all the way through when I first premiered this about four months ago you could only use flutter flow for like the production of the front end what it looks like but there's a lot of things that's being added with flutter flow aigen not only can you do it for the front end but you can use it through your whole entire Journey let me break it down just just really quick about all these different things that they have I love this number one you can do AI age gen so from text you can create your page visually so so if you feel overwhelmed of how you make up the page yourself what it looks like the color schemes you just type it in what kind of page you're looking for a sign in page a home page all those things and it generates it for you you get to see the code of it you can change the theme colors and then you can generate it in just a few minutes and here are some examples you can do login screens home pages you can do product pages all those things but this is another thing that I love that aigen allows you to do you can generate the back end schema in seconds what does that mean so the back end is how to make the application smart using AI using aigin you can tell it what kind of back-end you're looking for like generate a collection of clients from their past projects reviews and past successful reviews all those things what it just said right there basically what you're saying is you're going to tr you're going to ask aigen to generate the whole backend or the database structure so it saves data correctly that's amazing so instead of understanding all the different nuances or trying to figure it out yourself you can get a really good basic version of this right here with AI gen that's just amazing to me um not only that you can use it for your uh color scheme so you can have the right kind of themes for your app the colors the text fonts all of those different things and if you're going to be using the custom code editor it allows you to co-pilot what you're trying to do back there as well so it you can write it out in plain English and then it will create custom code for you so imagine like copilot X if you've seen it with GitHub and things like that you can use this right here with uh flutter flow it's all included under the aigen really Suite of different tools and it's during you know you use it if you're a paid subscriber you can use this with AI it's just it's just amazing what they're going to be doing to get all the basics of the different pricing structure take a look at the pricing page or one of our other videos for for a full breakdown of the different things you get with the different pricing tiers okay so we went over the tools I'm using I'm using flutter flow and I'm using to uto specifically core by tiuto to make this possible now what are the prompts that I'm going to be using I am just using a notion document right here and I'm writing out the prompts of all the different pages that I'm creating first and then the prompts I'm using for the database and so on and so forth today we're going to be breaking down the prompts I'm using to create the the front end what it looks like in flutter flow so if we look at this now that we have the flutter flow um prompts right here I'm going to show you what I've been able to create with these prompts and by the way I write down in my notes is it successful if it's not successful what did I learn from it and all of those things so let's take a look at what it looks like so when you go into flutter flow and you create a project and you start out in the build section over here either you can go into the UI Builder the widget tree I just go to the page selector once I go there I'm going to go into the main section where I can preview the image and there's going to be two different icons number one it says open floating widget right here or I can click the button right here where it says AI generated page from there that's where you can enter the prompt of what you want the page to look like now the breakdown right here I wanted a login screen I wanted my first one to be a login screen so I wrote out design a login page for a streaming service like Netflix the page needs a login and a sign up option for new and returning users and we're going to preview exactly what this looks like okay so after I did the prompt it created this page give me a basic image at the top but it gave me exactly what I wanted a sign in section where people can enter your email and then also section where it says new to Netflix uh sign up now now this allows me to have a framework I could now build upon this but it gave me exactly what I asked it to um when you ask it to create a page it will also ask you to rank it so if you're familiar with like using chat GPT it will say like thumbs up thumbs down here it gives you three tiers of like did you hate it did you kind of like it or did you love it so that allows the system to learn uh and get better based on you know the prompts and is it on the right track AI is on the right track but also you can regenerate it if you don't like it it also gives you options on the theme and you know the color schemes and all those things but I liked it so I I decided to keep it now we're going to in a moment preview the home page and what that looks like and what I I did but before if before we get there if you're interested in this kind of stuff I have something called Doc's help desk where you can ask questions to me weekly and I do uh recorded amas every single week and that way you get resources you get access to me and you can learn what I'm doing like these kind of projects every single week or when I'm working on such as our new drone project as well or if you want questions answered about your uh your own app question or business you can add you can ask it just being part of Doc's help desk it's five dollars a month or twenty five dollars a year the link is down below and if you want to support the channel or you want have a project you need help with consider joining we would love to have you so let's get back into looking at the next page that I generated as well now I'm one of the home page for my app like Netflix and this is what I had now I had a couple different iterations here and I changed it because based on the length you can only use 400 characters so I wrote down kind of what I wanted and then I kind of went from there in the first prompt I it just it didn't understand me correctly but I think I just gave it too much so this is the prompt that worked it said create a page for a streaming service like Netflix the page needs to include a main image and a section for four categories of movies the page includes a navigation bar at the bottom of the page that has the following icons the falling four icons a home icon a search icon a favorite icon and a profile icon and this is what it generated created this which isn't too bad it had a main icon even has a little setting section right here that the icon up here it has the categories it actually added its own categories it said action comedy drama and Thriller that's pretty cool and pretty cool icon uh images but also right here where I asked it for the navigation the row it did give me the four icons and I thought they were really good the only the only thing I would mention is I sit at the bottom of the page maybe I could describe it a little bit better or describe where I want it it's right under the main image but overall I was pretty satisfied what they created for me and the framework from there I wasn't specific on the image that I wanted gave me a great first image gave me four categories and it named the categories for me and then going from there so I thought it was successful the one thing I would say is the the navigation I would want at the bottom there might be a different way that I should use or describe it to make sure that it understands but I thought it was really good now what are some of the things that I messed up the first time I I asked for four categories but then I named the four categories and then the spacing was really weird when I did it um it was each category had its own like basically section um it was just not very good I think I was just I I might have been too abstract so I just said a section of four categories then it worked perfectly and that is what I have so far I need to create a individual page so when you click on it movie you have a video player and all of those things uh and then go from there start building out the other pages I will say to note when you start using this remember you can only generate five pages per day it does mention right here I'll just read what it says it says page generation limited renews every day unlimited generations for flutter flow subscribers so you can use unlimited pages but they're limit limiting you to five pages per day so just remember when you're starting out think about your five pages then you have to come back the next day uh remember this is an alpha stage they might change that later on but it's something to think about as you're building out your app and as you're going if you if you like this or if you want me to keep going with this series and continue to build this out let me know in the comment section down below this is all depends on you and all of the viewers of this of this channel if you want me to continue with this series to talk more about building a streaming service like Netflix using flutterflow into uto let me know in the comment section down below and if you like these kind of kind of videos make sure that you like and subscribe

Channel: Doc Williams

Views: 7,617

Keywords: No code, adalo, bubble, voice flow, repurpose.io, softr, appgyver, backendless, glide app, no code app builder, app builder, doc williams, bubble app builder, no code development, brand factory, build with me, build app without code

Id: Mh___uQ3TJ4

Length: 12min 19sec (739 seconds)

Published: Tue Aug 01 2023