- 61
- 62 344
JBtronic
Pakistan
Приєднався 15 жов 2021
👨🏫 Mobile App Developer 👨🏻💻
Coding • Tech • Programming
Collab and projects: jawwadbilgrami98@gmail.com
Do SUPPORT ME ♡ so that I will bring more & more content for you guys.
Peace ✌️
Coding • Tech • Programming
Collab and projects: jawwadbilgrami98@gmail.com
Do SUPPORT ME ♡ so that I will bring more & more content for you guys.
Peace ✌️
Instagram Modern Login Screen 📱 • Flutter UI • Speed Code ♡
Hello guys, in this video I will show you how to create a modern Instagram Login screen UI in Flutter. Flutter is a popular open-source mobile app development framework that allows developers to build high-performance, cross-platform apps for iOS and Android.
In this tutorial, we will start by setting up a new Flutter project. Then, we will create a beautiful and responsive login screen with modern design elements like elevated buttons, dynamic text fields, and Gradient Text.
Whether you are a beginner or an experienced developer, this tutorial will provide you with valuable insights and practical knowledge to help you build stunning Flutter apps.
I hope you like this video and learn from this video. If you have any questions. Please write in the comments!
GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/insta_login_ui
Complete Flutter Tutorial Playlist: ua-cam.com/play/PLMstFUjTFBs7_Rorn097UD2hCS-UCm88a.html
🌎 Follow me here:
Facebook ➜ learnwithjbtronic
Instagram ➜ learnwithjbtronic
LinkedIn ➜ www.linkedin.com/company/jbtronic
Website ➜ www.jbtronic.com
Medium ➜ jbtronic.medium.com
TimeStamp:
00:00 Intro
00:10 Adding Instagram Image
01:34 TextField Widget
03:50 Making TextField Dynamic
05:05 Forget Password?
06:16 Login Button
07:21 FaceBook image & Text in a Row
09:05 Designing for --OR-- with Divider
10:35 Don't have an account? Text and Sign Up Button
11:50 "From Facebook" with Gradient Text
16:36 Wrapping all Widgets with Padding
17:12 Disabling Debug Banner
17:46 Fixed Bottom Overflowed issue when Keyboard appears
18:09 Fixed issue when On Tap, the Keyboard doesn't dismiss
19:32 Outro
#flutter #instagram #login
In this tutorial, we will start by setting up a new Flutter project. Then, we will create a beautiful and responsive login screen with modern design elements like elevated buttons, dynamic text fields, and Gradient Text.
Whether you are a beginner or an experienced developer, this tutorial will provide you with valuable insights and practical knowledge to help you build stunning Flutter apps.
I hope you like this video and learn from this video. If you have any questions. Please write in the comments!
GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/insta_login_ui
Complete Flutter Tutorial Playlist: ua-cam.com/play/PLMstFUjTFBs7_Rorn097UD2hCS-UCm88a.html
🌎 Follow me here:
Facebook ➜ learnwithjbtronic
Instagram ➜ learnwithjbtronic
LinkedIn ➜ www.linkedin.com/company/jbtronic
Website ➜ www.jbtronic.com
Medium ➜ jbtronic.medium.com
TimeStamp:
00:00 Intro
00:10 Adding Instagram Image
01:34 TextField Widget
03:50 Making TextField Dynamic
05:05 Forget Password?
06:16 Login Button
07:21 FaceBook image & Text in a Row
09:05 Designing for --OR-- with Divider
10:35 Don't have an account? Text and Sign Up Button
11:50 "From Facebook" with Gradient Text
16:36 Wrapping all Widgets with Padding
17:12 Disabling Debug Banner
17:46 Fixed Bottom Overflowed issue when Keyboard appears
18:09 Fixed issue when On Tap, the Keyboard doesn't dismiss
19:32 Outro
#flutter #instagram #login
Переглядів: 928
Відео
Easiest Way to Integrate Package in Flutter | Add Packages in Flutter | Install Packages in Flutter
Переглядів 1,1 тис.Рік тому
In this video, I will tell you how to import and use the flutter packages from pub.dev. I will guide you step by step. I hope you will like this video and learn from this video. If you have any questions. Please write in the comments! Complete Flutter Tutorial Playlist: ua-cam.com/play/PLMstFUjTFBs7_Rorn097UD2hCS-UCm88a.html 🌎 Follow me here: Facebook ➜ learnwithjbtronic Instagram ...
Add Icon with Text Field in Flutter | Flutter UI | Speed Code
Переглядів 1,6 тис.Рік тому
In this video, I will tell you how to add icons with TextField in Flutter. We will use TextField Widget and an Icon Widget and Text Editing Controller with considering UI responsiveness. I hope you like this video and learn from this video. If you have any questions. Please write in the comments! GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/icons_with_textfield Compl...
How to change Text Size with Slider in Flutter | Flutter UI | Speed Code
Переглядів 1,1 тис.Рік тому
In this video, I will tell you how to change the text size with a slider in Flutter. We will use Slider Widget and a Text Widget and give the default font size value. I hope you like this video and learn from this video. If you have any questions. Please write in the comments! GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/text_change_with_slider Complete Flutter Tutor...
Toss a Coin App in Flutter | Flutter UI | Speed Code
Переглядів 1,2 тис.Рік тому
In this video, I will tell you how to flip a coin with animation in Flutter. I hope you like this video, and learn from this video. If you have any questions. Please write in the comments! GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/toss_coin Complete Flutter Tutorial Playlist: ua-cam.com/play/PLMstFUjTFBs7_Rorn097UD2hCS-UCm88a.html 🌎 Follow me here: Facebook ➜ face...
How to create Bottom Navigation Bar in Flutter | Custom Navigation Bar
Переглядів 196Рік тому
How to create a bottom navigation bar in Flutter? Today’s video will show how you can create your own custom Bottom App Bar with Flutter. A step-by-step guide to using the bottom navigation bar. This is a flutter tutorial for beginners. If you have any questions. Please write in the comments! GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/bottom_navigation_bar Complete...
What is Stateful and Stateless Widget in Flutter | Flutter App Development Tutorial 2023
Переглядів 392Рік тому
In this video, we will talk about one of the fundamental concepts in Flutter development which is stateful and stateless widgets. As you know that, widgets are the building blocks of the user interface in Flutter, and there are two most common types of widgets: stateful and stateless widgets which are mostly used in every Flutter Project. So, basically, stateless widgets are those widgets that ...
How to make Twitter Sidebar Menu in Flutter | Flutter App Development Tutorial 2023
Переглядів 513Рік тому
In this video, I will tell you how to create a navigation menu or we can say the sidebar menu in a flutter. I will explain how we can design with different widgets and layout properties to make the most beautiful and responsive navigation drawer in flutter which supports mobile, desktop, and web. GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/side_bar_menu Complete Flu...
Portfolio App in Flutter | Flutter App Development Tutorial 2023
Переглядів 1,6 тис.Рік тому
Hello guys, In this video I have shown you how to create a portfolio app in a flutter. I will explain how to use different widgets and layout properties to make the most beautiful and responsive portfolio app in flutter which supports mobile, desktop, and web. GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/portfolio_app Complete Flutter Tutorial Playlist: ua-cam.com/pl...
Rows & Columns in Flutter | Flutter App Development Tutorial 2023
Переглядів 319Рік тому
In this video, I will tell you about Rows & Columns Widgets in Flutter. How to use all different types of properties in it. Rows are a group of cells arranged horizontally to provide uniformity. Columns are a group of cells aligned vertically, and they run from top to bottom. GitHub Repository: github.com/JBtronic/Flutter-UA-cam-Tutorial/tree/main/rows_column Complete Flutter Tutorial Playlist:...
What is Container Widget in Flutter | Flutter App Development Tutorial 2023
Переглядів 287Рік тому
In this video, We will look into our Container Widget which is a fundamental widget that we will use all the time for laying out your app. Flutter's container class is a useful widget that combines the standard painting, positioning, and scaling of widgets. To store one or more widgets and arrange them on the screen as we see fit, we can use a container class. A container is essentially a box u...
How To Run and Test Flutter App On Real Android Phone | Flutter App Development Tutorial 2023
Переглядів 739Рік тому
In this video, I will tell you how to run and test your Flutter App on a real physical Android Phone. Previously, we run & test our Projects on Emulator but in this video, you will learn that how you can run your app on Android Device. So, follow video step-by-step and run your app on a physical phone. Complete Flutter Tutorial Playlist: ua-cam.com/play/PLMstFUjTFBs7_Rorn097UD2hCS-UCm88a.html 🌎...
How to add App Icon in Flutter | Flutter App Development Tutorial 2023
Переглядів 12 тис.Рік тому
In this video, I will tell you how to add App Icon to your App so that it looks pretty. By default, we get the Flutter logo icon as your app icon but when you build multiple apps then it will be very confusing for you as to which app should I run. Besides that, you have to upload your app to Google Play Store or App Store, you don’t want it to look like Flutter's default logo, right? So, follow...
How to add an Image widget | Flutter App Development Tutorial 2023
Переглядів 345Рік тому
How to add an Image widget | Flutter App Development Tutorial 2023
Create your first app on Flutter | Flutter App Development Tutorial 2023
Переглядів 729Рік тому
Create your first app on Flutter | Flutter App Development Tutorial 2023
How to Install Flutter on VSCode | Flutter App Development Tutorial 2023
Переглядів 3 тис.Рік тому
How to Install Flutter on VSCode | Flutter App Development Tutorial 2023
How to install Flutter on Android Studio | Flutter App Development Tutorial 2023
Переглядів 19 тис.Рік тому
How to install Flutter on Android Studio | Flutter App Development Tutorial 2023
Flutter Pre Requisite | Flutter App Development Tutorial 2023
Переглядів 204Рік тому
Flutter Pre Requisite | Flutter App Development Tutorial 2023
What is Flutter | Flutter App Development Tutorial 2023
Переглядів 227Рік тому
What is Flutter | Flutter App Development Tutorial 2023
Introduction to Flutter | Flutter App Development Tutorial 2023
Переглядів 785Рік тому
Introduction to Flutter | Flutter App Development Tutorial 2023
How to create Button programmatically in Swift | XCode 14
Переглядів 9622 роки тому
How to create Button programmatically in Swift | XCode 14
FIXED | Collect2.exe error id returned 1 exit status
Переглядів 1,8 тис.2 роки тому
FIXED | Collect2.exe error id returned 1 exit status
How to make a Portfolio Website & move to Live Website in under 30 Minutes using WordPress
Переглядів 1,6 тис.2 роки тому
How to make a Portfolio Website & move to Live Website in under 30 Minutes using WordPress
WordPress Installation Guide using LocalWP in 4 Minutes!
Переглядів 3922 роки тому
WordPress Installation Guide using LocalWP in 4 Minutes!
C Language Tutorial # 16 | Pragma Directive
Переглядів 5702 роки тому
C Language Tutorial # 16 | Pragma Directive
How to Remotely Access Your Laptop or PC Using Teamviewer
Переглядів 1472 роки тому
How to Remotely Access Your Laptop or PC Using Teamviewer
How to run MacOS 12 on Windows with VMware Workstation
Переглядів 1,2 тис.2 роки тому
How to run MacOS 12 on Windows with VMware Workstation
C Language Tutorial # 15 | Preprocessor
Переглядів 1222 роки тому
C Language Tutorial # 15 | Preprocessor
thanks brooooooo
You're welcome!
Thank you
You're welcome
helpful
Glad to hear that!
what should be the original size of your image and what about android adaptive icon?
I haven't tested it but it will adapt icon accordingly. See for yourself on device and share your experience.
Thanks, this is the best way other than using any package.
Glad it helped!
best turtorial
Thank you <3
The first video to TRULY teach the right way. Thank you so much!
Thank you so much for your comment. It would surely help the algorithm. <3
Hey Just found yiur page it's amazing Please pump out more content. How can i change the spash screen
Hi It's good to hear that you like my content. I will surely through out more content but I'm thinking to make new YT channel. Will share it soon.
thank you!!
You're welcome!
Hi brother can you please help me I sent you one app can you change it name and icon please i pay for it
Ok share it
Nice
Thanks
goooooood nice and short
thanks
How to get an emulator device on vs code
You have to connect android studio with vs code. so instead of using vs code go with android studio where the vitual device will be present always
Thanks
No problem
very helpful
Glad it helped
i have uninstalled my android studio and reinstalled it many time, my issue is it's importing old settings, not creation dart files, main.dart, li/main.dart not found etc
Check ua-cam.com/video/42qMM5TcqaM/v-deo.html
thank you that was very helpful
Glad to hear it!
good work
Thanks
thanks brother for short video with complete information.
Glad you liked it
thanks a lot
You are most welcome
Straight to the point. Thanks man ❤
Welcome
still processing how this man covered number of stages in 7 minutes xD. Thanks alot. Good job :)
I try to make short video’s with complete process so that I don’t waste user time.
@@JBtronic keep up the good work
🙃
thank u so much bro this is a good video but why did Vscode not ask me to choose a device? automatically the web app opens I want google pixel open so how do I do that bro thx
Yes, it automatically opens web app, once you will select your google pixel device then it will always open in pixel device. This is one time setting
thank u so much bro 😍👍
Welcome 😊
With latter sndroud studio flaminggo already have pluggin flatter, just one two click finish. Already have flatter projek
Wonderful ❤️
thank you so much for this
You're very welcome!
Does the original icon that you upload to the website need padding around the edges first?
Depends upon your requirement!
im getting socket pub error
A socket error is basically a connection error. And in the case of running flutter pub get a socket error is very likely due to a firewall. Check your firewall settings. Ensure that no component of Flutter, Dart, or your IDE is being blocked by your firewall or antivirus program.
Вряд-ли у Carbon или Rust получится
Exactly!
@@JBtronic D lang возможно еще
Thanks Brother, Appreciated
My pleasure
thanks
You're welcome!
Outstanding! 💞
Thank you! 😊
Wow very informative thanks a lot 🤗
Glad it was helpful!
❤
💗
Wow
☺️
Amazing 😍🤩
Thanks 🤗
Fantastic ❤
Thanks 🤗
Superb 😍😍
Thanks 🤗
😍😍😍😍
😀
i love javascript <3
Same :)
Even *Objective-C* was make by _Apple_.
Exactly 💯
😍😍
🥲
Bro After Doing everything when using my Smartphone as a Device, It Doesn't Show the Hot Reload Button. I check in languages hot reload is on and working fine with browser. But it doesn't work with my physical device is it a problem of my device or Android Studio ???
Did you unplug the device after installing app on your phone?
👍
😊
Awesome 🤟
Thanks ✌️
Nice tuto :)
❤️
🤟
😊
Superb 😍
Thank you! Cheers!
Superb 😍
Thanks 🤗
👍🏻👍🏻👍🏻👍🏻
❤️