One Day Builds: Instagram Clone Using Flutter

One Day Builds: Instagram Clone Using Flutter
"Clean Code Friday"
If you want to receive one short email from me every week, where I go through a few of the most useful things I have explored and discovered this week. Things like; favourite apps, articles, podcasts, books, coding tips and tricks. Then feel free to join kalletech.com/...
If you want to learn more about algorithms check this out:
www.algoexpert...
And if you want to check out my twitch channel you can do so here:
/ kallehallden
In this video I build an Instagram UI clone using the Flutter framework that is developed by google.
GitHub: github.com/Kal...
--------------------------------------------------------------------------------------------------------
CONTACT: [e-mail]
INSTAGRAM: / kallehallden
Computer: Macbook Pro - amzn.to/2GX54SU
Camera Gear:
Panasonic GH5 - amzn.to/2Nr09L2
MAIN LENS: Lumix 12-35mm - amzn.to/2tzgJzp
DRONE: DJI Mavic Air - amzn.to/2NqkQa1
Secondary Lens: Panasonic 25mm - amzn.to/2UcTA1e
Secondary Lens: Olympus 45mm - amzn.to/2Ebp5SV
Zoom Lens: Panasonic 100-300mm - amzn.to/2U3UH3j
Monitor: AOC 27” - amzn.to/2U6hF9Z
Songs:
Rays - Ikson
Harmony - Ikson
/ ikson

[@manuele.espinal1130]

Hey Kalle, you should do a video about good practices when coding in fluttter, or maybe just things you like to do in a certain manner when coding

[@Hallden_]

Yeah that's a great idea, although I don't think I follow many of the conventions in flutter 😬😬

[@macdonalds6039]

That's just a linter..

[@patelsameer529]

Make a full tutorial on how to make this

[@lerdi]

2:03 This is how Instagram came to be if you've ever wondered

[@williamkyorazo3521]

I'm studying flutter now, and dart it's a delicious language, very similar to Java.. i'm enjoying!

[@Hallden_]

Glad to hear it! :)

[@einnorw]

i can't imagine how frustrating this process was, but you pulled through which is awesome

[@Hallden_]

Thank you! Yeah it was incredibly frustrating, and a real test The third time I was dead tired and ready to give up

[@firdeusx]

Commenting on your code makes it easier and simple

[@borisllonalonso99]

One day builds are so inspiring, continue like that!

[@Hallden_]

That's great to hear man! I will continue with them, really cool to hear that they inspire you :)

[@anthoxel]

you're gonna be the first one im watching on twich obviously... bring up the Flutter!

[@Hallden_]

Haha nice! :)

[@muntder1435]

man, I am facing a serious problem with the notifications! I've just realised that you have posted two videos before this one !!!

[@Hallden_]

Hahah okay that's no good man😆 Don't want to miss these incredible videos haha 😉

[@gerhenry7127]

Kalle: "Ive been filming for 5 and half hours and im going to start over and i havent eaten" - this is the difference between hard work and getting things done versus procrastinating and being lazy

[@Hallden_]

Haha thanks man! It was a struggle for sure and also tested my patience like crazy 😆

[@dancamdev]

Nice job with this build! you might want to check out the SafeArea widget instead of using padding to move up the Navigation bar, just wrap the whole UI with the SafeArea widget and you’re good to go

[@Hallden_]

Thank you! Oh yeah a few people have mentioned that haha Good advice, I appreciate it! :)

[@adjuvara]

Given your Sports background maybe do a MyFitnessPal clone in the future :D

[@Hallden_]

Yeah that's a good idea! That might have to be the next one day build Flutter video that I do! :)

[@mahditalebi1770]

this was really great to watch it all come together. you got yourself a new sub dude

[@salamfarmandehnanautaoffic6355]

I love you kalle you are so great!

[@eduardopina7964]

Impressive, achieving that in one single day.

[@Hallden_]

Thank you man, I appreciate it! :)

[@toatsbarley]

Nice job! You might want to look into the SafeArea widget instead of manually padding the bottom navbar.

[@Hallden_]

Okay nice! Thank you, I will check it out :)

[@adamtak3128]

If you need the outline material Icons, you can sue this package - outline_material_icons: ^0.1.0

[@billy-ps7jz]

use

[@blackhatson13]

I always sue a package if I like it.

[@imprakharshukla]

😂

[@theo1680]

these types of videos are pure gold ! Thanks 👍🏻

[@Hallden_]

That's awesome to hear that you think so, I really appreciate it so thank you :)

[@abdurrehmankhalid2290]

I was looking to learn something during these summer vacations and i came at your video and it looks pretty cool building you a very famous application. I think I should add Dark and Flutter in my learning list as well. I am currently working on the Java Full Stack Development which includes Java Spring MVC, Spring Boot, Hibernate and Angular 7.

[@goth14wx47]

Well Java it's good for get a job, but it would be better that you put some attention to the new technologies, good luck.

[@abdurrehmankhalid2290]

@@goth14wx47 Yes Sir, Currently Working On Angular 7 Which is Modern JavaScript Framework and it is very useful in building Enterprise Level Web Applications, As We all know that Node.Js cannot handle a huge amount of data that is being sent from the server side so in this Java is Great.

[@mayraamaral7267]

Awesome quality as always!

[@Hallden_]

Awesome support as always! :)

[@xiaoshou6752]

Really nice video as always, keep it up! Something that slightly bothered me however: maybe it might be an idea to cut the left part of your webcam which doesn't really show something important out, as it's blocking the top right of your VSCode. Other than that, a pleasure to watch!

[@Hallden_]

Thank you man! I really appreciate that sort of feedback, I will change that for sure :)

[@abhishekgovekar5542]

Great!! It really helped me. Thank you for the video Kalle

[@DuckFace31]

streaming on twitch would be awesome 👌🏼

[@Hallden_]

Glad you think so! It's coming as soon as I can get it set up :)

[@shavar67]

I’ve also cloned Instagram just the homepage and the like button functionality but i used a listview builder, also you should give the like button a splash color when it’s clicked :p

[@Hallden_]

Nice man! Yes I agree :)

[@ramayani-12]

Your eork is just amazing. Genuinely loving ur videos keep it up

[@Hallden_]

Thank you for that, I truly appreciate it! :)

[@mariemlachker3218]

It's an amaizing job 👌👍

[@SydarLM]

Kalle, like your computing system.

[@marioskadriu441]

Great video as always I like this type of videos. When Livestreams will begin ?

[@Hallden_]

Thank you, really appreciate it! I am working on the livestream setup to get everything working and now I pretty much only have to learn how to work with the streaming software and how twitch livestreaming works and then I can start. It won't be long if everything goes according to plan I am hoping to do my first one next Sunday (23rd) but no guarantees. Everything tends to always take longer than planned. But that's at least a rough idea :)

[@rebarius]

Maybe you'll add the like-animation to the favorite iconbutton :)

[@KayoleKnight]

i'd love to see this.....or even the "typing"

[@msinfo32]

this looks much better than instagram

[@azemajroski7720]

Great and inspiring video bro respect

[@Hallden_]

Cool to hear that you found it inspirational! Thank you :)

[@laurinnoelfrank6312]

real cool project, keep up the good work

[@matthcw8745]

Sweet!

[@MrPherez]

The course is good, for purpose of sharing and learning you should try do a slow tutorial or give an option for the same.

[@kingrut69]

Kalle man I love your videos. Think you could do a coding setup video? Basically what you use in vscode and in combination with flutter extensions etc. I've been looking for a good setup and yours looks good. Just need a little guidance.

[@gaxkiller]

4:30 use MediaQuery.of(context).padding.bottom as the margin value so if you are on a device without bottom bar (aka not iphone X) you don't have randomly big marging

[@hamdanshafiq4403]

I just come here for the satisfaction of watching someone code well....I cant code my myself

[@xugxug5277]

Nice Job

[@dirisleabdi364]

❤️Flutter Ilove ❤️

[@Andrew-pz8jx]

I am so amazed by your knowledge! I've been learning Python and maybe someday get to this level.. Nice vid.

[@Hallden_]

Thank you, but the videos might make me look better than I am because it's not really that difficult I promise :)

[@Andrew-pz8jx]

Kalle Hallden love it!! Thank you for being super supportive. Watching you do these builds is great to push me further...kudos✌️

[@pradeepkumarhitz]

I love to study web application development, what are the programming skills I needed to create an application?

[@microcosm2377]

a good front-end toolkit: CSS, HTML, Javascript, jQuery (along with a framework like Vue.js, Angular, or React). If you intend to do anything like user authentication, blogs, forums, etc, I would recommend some back-end like: SQL, MongoDB, and a decent language like Ruby on Rails, Python, or Node.js. Sorry if this doesn't answer your question.

[@deistormmods]

@@microcosm2377 Would you recommend Firebase for authentication?

[@prashantindurkar]

you are great Bro...

[@Hallden_]

Thank you, you too...

[@mockingbird3809]

Cool Kalle That's Cool Idea.

[@Hallden_]

Thank you man! :)

[@YT-ld2fl]

Hi Kalle, do you have other videos explain how data is saved in the background?

[@جياالحق]

God Bless you

[@omaryousifkamal4290]

great

[@urosisakovic7711]

For icons in the future u could use font awesome i use it on almost every project where i have to deal with that type of stuff. Nice video my man :)

[@Hallden_]

Okay yeah I will check it out! Thank you :)

[@daxdax89]

Nice video. Keep making flutter videos!

[@Hallden_]

Thank you, I will for sure! :)

[@esmul]

Love your videos man, been doing Flutter myself after taking the Udemy course on it. Had a question for you though: do you ever get distracted during a programming session? Like on this one day build, you said you went from 9am to 9pm, do you ever quit for a couple hours and come back? When I code, I feel like I get easily distracted and can only code for like a hour before my attention goes elsewhere, like I have ADD or something. So I plan on spending 8 hours on something, and end up coding for only 3 hours. Do you ever deal with that? And if so, what have you done to mitigate that?

[@cuong1112035]

please make a video to share about how to create and open a flutter project with VS or Android Studio using terminal

[@ekamahendra1061]

Amazing your app , i want to be like you.

[@app11120]

Everyone can be a programmer. Good luck

[@ekamahendra1061]

@@app11120 I need friend for learn programmer 😥

[@Hallden_]

Thank you, and I want to be like you :)

[@leightonchen9381]

Flutter is the future.

[@Hallden_]

Yes I hope so 👍

[@leightonchen9381]

@@Hallden_ IT's not a hope, but a fact.

[@Alex-kg1xh]

I guess you will spend much time for Stories/Streaming (webrtc, maybe custom protocols) implementation, adding cache storage, image filters (speed up by Render Script, Metal/OpenGL) ... a lot of work. But Instagram UI is quite simple and easy to implement.

[@veronicagilbert5592]

Hey Kalle Hallden, thanks for the video... it was very useful. But people who are interested in starting a business, try out a clone of popular websites/apps. For example, UberEats Clone App, BlaBlaCar Clone App, Airbnb Clone App, Instagram Clone App, etc.

[@praveenapoojary8031]

Use whole content inside a widget called "SafeArea" instead of struggling with margins. Good work though. Keep it up.

[@Hallden_]

Yes will look into it :)

[@simonhaas1243]

Nice to have an Instagram UI. But how do you actually connect it with a backend server now? This is something I still struggle to understand with flutter. A 'One Day Build: Instagram Backend' would be nice. This might be a different question but how do you build an app which can be used completely offline and has the functionality to sync to a server when connected with the internet?

[@yurvan]

In Flutter Is it possible to show the image and the video in the same widget, Are there any common widget?

[@DelliumM8]

You should stream here on KZbin instead of Twitch, all your fan base is on this platform.

[@Hallden_]

My plan right now is to stream on twitch and then upload it to KZbin as some sort of long form coding session :)

[@Karinnederland]

What courses you recommend to learn dart and Flutter? Or Java development:)

[@mdtanvirhasanjabir1759]

Bro can you please make the Facebook clone. And one thing , I really enjoying your video. Thanks bro.

[@BigerBoy]

🔥

[@saratiko]

Would this app work on all platforms for multiple users? I didnt notice any database nor something similar to a database to actually store posts etc. How do you manage that?

[@mohilsheth611]

Jim Sundqvist you’ve to understand this is more complex than how it’s shown on this video. Instagram isn’t stupid to have 100s developers working when there’s only one needed. This is just a good start, but in real it needs a lot more complex architecture to build an app like Instagram. Just appreciate this guys effort and move on.

[@saratiko]

Mohil Sheth yeah I understand something else is going on and I saw Firebase is an alternative to use as a backend for flutter, which I believe I might end up using when I finish my app and actually come up with the proper idea I want to build, currently just trying to learn the language

[@gausoft]

Thanks!! I would like to know if we are not likely to be prosecuted if we made apps clone for learning purposes

[@emmanuelogbewe2334]

Great vid!!

[@Hallden_]

Thank you!

[@ishanksharma9051]

Hey can you increase the font size for your future vids, amazing video btw

[@Hallden_]

Yes for sure!

[@chethiyairoshana5402]

Nailed it bro :D :D :D :D :D

[@Hallden_]

Thank you! :)

[@hft3004]

Hi Kalle Hallden ,i am new to flutter.May i ask you a question please? How to solve two appbar in one page? At scene 14:16 you are using 'return container' to replace Scaffold to achieve the goal but when you said want to handle back button issues, at scene 14:32 you are using 'return Scaffold '. Thanks. Btw i love your flutter video and keep going!

[@origindunya]

Would you recommend to use dart for creating fang type apps or would you rather go with native apps, react native or python ?

[@Atameow]

wow music is way 2 loud compared to voice... gota adjust every time u start coding..nty

[@Hallden_]

Sorry about that! Will fix for upcoming videos for sure :)

[@abulbasharkhanrakib3591]

Great work bro😍

[@Hallden_]

Thank you!

[@abulbasharkhanrakib3591]

@@Hallden_ bro suggest me how can learn flutter best way😍

[@CanalDoFabinho]

Hey man, I've sent you an email asking if I could use this app in one of my videos? Messaging here too in case it got lost in the spam folder :) Thanks for the video, it's amazing!

[@Timeside..]

im in my last year of computer science but i know like no single code-line im so disappointed i feel awful i wish i could be like this guy he looks to be so good and on point when he said at your job test you will be given problems to solve i felt like dying from inside like a hole in my chest please ''any advice dear programmers'' out there.

[@printmpg6323]

waooo good job bro.....

[@blackknight7963]

Should we learn java and android studio for Android app dev or flutter and dart what you'll suggest?

[@ayxxshhh]

If you just wanna make apps for Android then you can learn java but if you wanna make apps both for android and iOS flutter is way to go 👁️👄👁️

[@alloo12dal]

Wow this is so amazing how fast you can build apps with flutter! I really need to learn this for rapid development! Any tips on where / how I can learn?

[@Hallden_]

Haha thank you! Yeah I would suggest searching KZbin for 'UI design Flutter' and that should get you started :)

[@alloo12dal]

Kalle Hallden awesome!! Will get started ASAP!

[@rixtacarde7333]

Did you create an alias for the command create to make a new github repo, readme file, and push and commit as well as open those files in vs code??

[@Hallden_]

Yes in my video 'automatin my projects with python' :)

[@JamesKooper]

Great content

[@Hallden_]

Thank you!

[@goth14wx47]

I like flutter ,I have been playing with it, but in Linux with lxde and even with the lighter desktop environment, Its laggy a lot, so I have to buy another pc for flutter

[@spiderous]

I've got Linux Mint and it's working perfectly for me

[@jacobgasser3093]

I would love some Flutter tutorials, i am kind of terrible at it haha

[@Hallden_]

A lot of people are asking for that, but I am not really good at building according to the convention or using best practices so I just feel like if I did tutorials I would either have to study up and spend a ton of extra time learning the best practices. Or I would be teaching things that may end up leading you down a wrong path haha

[@jacobgasser3093]

@@Hallden_ I don't mind bad practices ;)

[@JoeyJurjens]

Ever worked with Django? If so, what are your thoughts on it?

[@nabeeghahmed8530]

Joey Jurjens it's kinda high end and a little complex. If you want to make simple web apps like blogs or something use flask, it's light weight and easy

[@Hallden_]

I have not personally used Django (I have done fairly little web development, only used angular and flask) But I would trust Nabeegh Sounds like what I have heard too

[@JoeyJurjens]

Nabeegh Ahmed My next years internship uses it, so I’ve been doing some research on it, but not sure what to think about it yet 😜. Anyways, thanks for your answer :)

[@samkilpatrickisabaddie]

what is the program for the iphone

[@ayxxshhh]

Xcode

[@keexotics3849]

is it possible to upload your website or a site like this on the appstore or is there another program specific for this

[@yogeshingole8842]

Hi brother I like your video I am beginniner I want to become like you so how I start which programing language should I have to learn and where I learn free

[@RoqueMarcelo]

Subscribed!

[@Hallden_]

Nice!

[@it46vistargupta19]

When did you implemented ig api or firebase

[@T1ger8oi]

Hey Kalle, do you know how to use Amazon Amplify? How long would it take you to build an Instagram clone using serverless computing?

[@NicholasMaietta]

If a person ca build an app and a backed in such a sort time, then why do these companies needs thousands of programmers?

[@Eudoffels]

my pessimistic and conspirical opinion, its to save up on tax money, the more employees, the less tax you pay, if you have 20 employees that each earn about $100K a year (so you pay them that money so you "lose" that money) you will still save more on income tax than if you had 0 employees

[@Hallden_]

I didn't build the backend though, just the frontend. And also just a very limited part of the front end

[@tbm5k]

Had to be the first one this time 😂, let me now watch the video 😂😂

[@Hallden_]

Haha nice man!

[@lilqero2252]

Hi all, does anyone know how to run your flutter demo on your mobile phone as Kalle did? Is there something like expo for flutter?

[@brunoabreu590]

Like

[@joshuabellchambers2228]

Hey Kalle, how do you get the iphone side by side on your desktop to see changes while coding?

[@tubbylardman]

Can I ask why you used a margin, for the bottom navbar, as opposed to SafeArea? The set up you have would be fine for an X/Xs/Xr but would be jarring for rectangle phones.

[@Hallden_]

Didn't know about SafeArea 😬😆

[@joshuaatencia4629]

muy bueno

[@shoaibxakhtar]

Nice video .👍👍

[@Hallden_]

Thank you! :)

[@adamhurwitz]

If you were to implement a media player for your Instagram app, ie ExoPlayer on Android, which library would you use for Flutter or would you build out a native solution for iOS and Android then bridge the two together?

[@jackmccowan2246]

pleasseeeee tell me where to find your wallpaper

[@supriyantapoddar6129]

Could you please make little tutorial what you're doing. It will be helpful. Thank you.

[@joedavies6624]

Hey @kalle, what's the app called you use to code with who h has two screens?

[@Kapil_Dhurve]

Bro can show the codes how did you do stories bar in Instagram?

[@MihaiMangu8]

What instagram api were you using? Now there are multiple