- 46
- 229 164
Rabee Omran
United Arab Emirates
Приєднався 17 кві 2022
I'm Rabee Omran, a software engineer, a mobile app developer, and this is my channel.
My goal is to help you build real, efficient, high-quality applications and make you able to handle your projects professionally.
For business or advertising? Let's get in touch rabeeomran2@gmail.com
My goal is to help you build real, efficient, high-quality applications and make you able to handle your projects professionally.
For business or advertising? Let's get in touch rabeeomran2@gmail.com
Responsive UI in Flutter | Design Once, Run Anywhere | Flutter Tutorial
بهاد الفيديو رح نتعرف على كيفية إنشاء واجهات مستخدم متجاوبة باستخدام فلاتر بحيث تكون متوافقة مع جميع الأجهزة، سواء كانت موبايل، ويب، أو تابلت. و رح نشوف خطوات بسيطة وفعالة لبناء تطبيقات فلاتر متجاوبة بكود منظم و بشكل جميل على أي شاشة.
تابع الفيديو لتتعلم أهم التقنيات والنصائح لتحقيق واجهات مستخدم متجاوبة بكل سهولة
Welcome to this comprehensive Flutter tutorial, where you’ll learn how to create a Responsive UI that adapts seamlessly across mobile, web, and tablet devices. Whether you’re a beginner or an experienced Flutter developer, this video will guide you through the essential steps to ensure your apps look stunning on any screen size.
In this tutorial, we cover:
• The fundamentals of responsive design in Flutter.
• How to structure your Flutter app for multi-device compatibility.
• Techniques to make font sizes and UI elements responsive.
• Building a reusable responsive template using Flutter’s powerful widgets.
• Tips and tricks to optimize your design workflow and improve app performance.
By the end of this video, you’ll have a solid understanding of how to implement responsive design in Flutter, allowing you to create apps that are both beautiful and functional, regardless of the device.
Source Code | github.com/Rabee-Omran/Responsive-UI-in-Flutter-Design-Once-Run-Anywhere-Flutter-Tutorial
Timeline
00:00 Intro
04:13 Use MediaQuery
01:07 Start creating Web and Mobile UI - Expanded Widget
11:20 Breakpoint Web/Mobile
18:08 Make code cleaner
23:00 Add tablet size
25:08 flutter_screenutil package
28:40 Responsive font size
33:00 flutter_screenutil extensions (sw, sh)
34:18 The end
Social Media: Follow Me :-)
Facebook Account | RabeeOmran2
Facebook Page | rabeeomran.developer
Linkedin | www.linkedin.com/in/RabeeOmran
GitHub | github.com/Rabee-Omran
#dart #flutter #responsive #tutorial #RabeeOmran
Like & Share & Activate The Bell
Thanks For Watching :-)
تابع الفيديو لتتعلم أهم التقنيات والنصائح لتحقيق واجهات مستخدم متجاوبة بكل سهولة
Welcome to this comprehensive Flutter tutorial, where you’ll learn how to create a Responsive UI that adapts seamlessly across mobile, web, and tablet devices. Whether you’re a beginner or an experienced Flutter developer, this video will guide you through the essential steps to ensure your apps look stunning on any screen size.
In this tutorial, we cover:
• The fundamentals of responsive design in Flutter.
• How to structure your Flutter app for multi-device compatibility.
• Techniques to make font sizes and UI elements responsive.
• Building a reusable responsive template using Flutter’s powerful widgets.
• Tips and tricks to optimize your design workflow and improve app performance.
By the end of this video, you’ll have a solid understanding of how to implement responsive design in Flutter, allowing you to create apps that are both beautiful and functional, regardless of the device.
Source Code | github.com/Rabee-Omran/Responsive-UI-in-Flutter-Design-Once-Run-Anywhere-Flutter-Tutorial
Timeline
00:00 Intro
04:13 Use MediaQuery
01:07 Start creating Web and Mobile UI - Expanded Widget
11:20 Breakpoint Web/Mobile
18:08 Make code cleaner
23:00 Add tablet size
25:08 flutter_screenutil package
28:40 Responsive font size
33:00 flutter_screenutil extensions (sw, sh)
34:18 The end
Social Media: Follow Me :-)
Facebook Account | RabeeOmran2
Facebook Page | rabeeomran.developer
Linkedin | www.linkedin.com/in/RabeeOmran
GitHub | github.com/Rabee-Omran
#dart #flutter #responsive #tutorial #RabeeOmran
Like & Share & Activate The Bell
Thanks For Watching :-)
Переглядів: 837
Відео
Dart Naming Conventions - Boost Readability! | Essential Tips for Flutter Developers
Переглядів 2232 місяці тому
Discover essential tips for naming conventions when organizing your Dart files and folders in Flutter projects. Whether you're a beginner or looking to refine your coding practices, these insights will streamline your development process. Learn how to structure your directories effectively, choose intuitive names for your classes, variables, and functions, and avoid common pitfalls. Elevate you...
Create Smooth Animations in Flutter with animate_do Package | Flutter Tutorial
Переглядів 4873 місяці тому
في هذا الفيديو سوف نتعرف على مكتبة تساعدنا في اضافة تأثيرات جذابة للتطبيق الخاص بنا بأقل مجهود وبنتائج جميلة Hello Flutter developers! In this tutorial, we dive into the animate_do package, a fantastic tool for adding smooth and engaging animations to your Flutter apps. Whether you're new to Flutter or a seasoned pro, this video will help you enhance your app's user interface with ease. Join ch...
Mastering Shimmer Effects: Exploring Flutter's Shimmer and Fancy Shimmer Image Package
Переглядів 7267 місяців тому
In this video, we will delve into the world of shimmer effects in Flutter, specifically focusing on the usage of the Shimmer and Fancy Shimmer image packages. Whether you're an experienced Flutter developer or just starting out, this video will provide you with the knowledge and skills to create captivating shimmer effects that will enhance your Flutter applications. Join us as we uncover the m...
Flutter Bloc Library Tutorial - Freezed Code Generation Package | Build Flutter Apps Faster - Part 2
Переглядів 1,7 тис.11 місяців тому
في هذا الفيديو سوف نتعرف على الFreezed package ماهي ؟ وكيف نتعامل معها ونستخدمها مع الBLoC وسنرى فائدتها وكيف توفر علينا الكثير من الوقت والجهد وذلك من خلال مثال عملي يتعامل مع API - الجزء الثاني. Flutter Bloc Library Tutorial - Todos App | Fetching Data From API ua-cam.com/video/-I2SyPPjilo/v-deo.html Flutter Bloc Library Tutorial - Bloc Observer | Debug and Observe your Bloc Easily ua-cam.com...
Flutter Bloc Library Tutorial - Freezed Code Generation Package | Build Flutter Apps Faster - Part 1
Переглядів 3,2 тис.Рік тому
في هذا الفيديو سوف نتعرف على الFreezed package ماهي ؟ وكيف نتعامل معها ونستخدمها مع الBLoC وسنرى فائدتها وكيف توفر علينا الكثير من الوقت والجهد وذلك من خلال مثال عملي يتعامل مع API. Flutter Bloc Library Tutorial - Todos App | Fetching Data From API ua-cam.com/video/-I2SyPPjilo/v-deo.html Flutter Bloc Library Tutorial - Bloc Observer | Debug and Observe your Bloc Easily ua-cam.com/video/3f6kTBRG...
Localize App Name And Change App Icon | Flutter Tutorial
Переглядів 939Рік тому
في هذا الفيديو سوف نقوم بتغيير اسم التطبيق بشكل ديناميكي حسب لغة الجهاز وأيضاً سوف نقوم بتغيير الأيقونة الخاصة بالتطبيق. How to localize the app name shown in the launcher and change the app icon using Flutter? In this video, we will change the name of the application dynamically according to the language of the device, and we will also change the icon for the application. For IOS: medium.com/@...
#18 Flutter Clean Architecture Course - Project Update | 10-5-2023
Переглядів 1,5 тис.Рік тому
في هذا الفيديو سوف نقوم بتحديث المشروع والمكتبات لآخر إصدار من فلاتر حتى تاريخ 10/5/2023. In this video, we will update the project and dependencies to the latest version of Flutter to date 10/5/2023. Source Code | github.com/Rabee-Omran/flutter-clean-architecture-posts-app-youtube-course Social Media: Follow Me :-) Facebook Account | RabeeOmran2 Facebook Page | rabeeo...
Flutter Search Bar | Search in Flutter using SearchDelegate
Переглядів 1,5 тис.Рік тому
في هذا الفيديو سوف نتعرف على كيفية تضمين البحث في التطبيق باستخدام الSearch Delegate بالتفصيل وأهم ميزاته وكيفية تخصيصه وجعله متوافقاً مع الثيم الخاصة بالتطبيق. In this video, we will learn how to create a search bar within Flutter. for this you will need to add the show Search inside a function. The show search will required a custom search delegate. We will show you how to create the most sim...
Flutter Bloc Library Tutorial - Infinite Scroll List | Lazily load & display pages of items - part 2
Переглядів 3 тис.Рік тому
في هذا الفيديو سوف نكمل مابدأنا به في الفيديو السابق وسنتعرف على كيفية عمل الpaganation او ال Infinite scroll list في flutter بالتفصيل وباستخدام الBloc State Management وذلك من خلال تطبيق ومثال عملي. In this video, we will complete what we started with in the previous video and learn How to create an Infinite Scroll List with pagination in Flutter using bloc and http package for HTTP GET method...
Flutter Bloc Library Tutorial - Infinite Scroll List | Lazily load & display pages of items - part 1
Переглядів 4,6 тис.Рік тому
في هذا الفيديو سوف نتعرف على كيفية عمل الpaganation او ال Infinite scroll list في flutter بالتفصيل وباستخدام الBloc State Management وذلك من خلال تطبيق ومثال عملي. In this video we will learn How to create an Infinite Scroll List with pagination in Flutter using bloc and http package for HTTP GET method to fetch and load more data from a server and add this data to the list as the user scrolls ...
Shared Preferences Library Tutorial | Store & Load Data For Data Persistence | Like A Pro
Переглядів 896Рік тому
في هذا الفيديو سوف نتعرف على مكتبة Shared Preferences ماهي ، كيف نستخدمها ، وكيف نخزن ونقرأ مختلف انواع البيانات فيها ومنها وعملية الحذف وسنتعرف أيضاً على كيفية التعامل باحترافية مع هذه المكتبة المهمة. Source code : github.com/Rabee-Omran/Shared-Preferences-Library-Tutorial-Store-Load-Data-For-Data-Persistence-Like-A-Pro Facebook page : rabeeomran.developer Facebook account : faceb...
Type Conversion in Dart | Conversion between different Data Types in Dart
Переглядів 648Рік тому
Type Conversion in Dart | Conversion between different Data Types in Dart
Flutter Bloc Library Tutorial - Bloc Observer | Debug and Observe your Bloc Easily
Переглядів 2,9 тис.Рік тому
Flutter Bloc Library Tutorial - Bloc Observer | Debug and Observe your Bloc Easily
Flutter Bloc Library Tutorial - Todos App | Fetching Data From API
Переглядів 4,6 тис.Рік тому
Flutter Bloc Library Tutorial - Todos App | Fetching Data From API
Mixins in Dart - Understand Dart & Flutter Fundamentals (Tutorial)
Переглядів 1,5 тис.Рік тому
Mixins in Dart - Understand Dart & Flutter Fundamentals (Tutorial)
Flutter Bloc Library Tutorial - Theme App | Dynamic Theme Change
Переглядів 4,4 тис.Рік тому
Flutter Bloc Library Tutorial - Theme App | Dynamic Theme Change
Enums in Dart - Understand Dart & Flutter Fundamentals (Tutorial)
Переглядів 2,1 тис.Рік тому
Enums in Dart - Understand Dart & Flutter Fundamentals (Tutorial)
Flutter Bloc/Cubit with Connectivity Plus Library Tutorial - Check Internet Connection
Переглядів 7 тис.2 роки тому
Flutter Bloc/Cubit with Connectivity Plus Library Tutorial - Check Internet Connection
Flutter Bloc Library Tutorial - Cubit - Localization App
Переглядів 12 тис.2 роки тому
Flutter Bloc Library Tutorial - Cubit - Localization App
Flutter Localization in Details - Internationalization with JSON
Переглядів 8 тис.2 роки тому
Flutter Localization in Details - Internationalization with JSON
Flutter Bloc Library Tutorial - Counter App
Переглядів 25 тис.2 роки тому
Flutter Bloc Library Tutorial - Counter App
Equatable Package | Simplify Equality Comparisons
Переглядів 3,1 тис.2 роки тому
Equatable Package | Simplify Equality Comparisons
ماهي أفضل State Management في Flutter ؟
Переглядів 6 тис.2 роки тому
ماهي أفضل State Management في Flutter ؟
Dart Extension Methods (Methods, Generic Extensions & Operators) with Examples in Dart / Flutter
Переглядів 1,9 тис.2 роки тому
Dart Extension Methods (Methods, Generic Extensions & Operators) with Examples in Dart / Flutter
#17 Flutter Clean Architecture Course - The end
Переглядів 2,6 тис.2 роки тому
#17 Flutter Clean Architecture Course - The end
#16 Flutter Clean Architecture Course - Create Post detail page in presentation layer
Переглядів 2,9 тис.2 роки тому
#16 Flutter Clean Architecture Course - Create Post detail page in presentation layer
#15 Flutter Clean Architecture Course - Create Post add update page in presentation layer - part 2
Переглядів 2,7 тис.2 роки тому
#15 Flutter Clean Architecture Course - Create Post add update page in presentation layer - part 2
#14 Flutter Clean Architecture Course - Create Post add update page in presentation layer - part 1
Переглядів 3,1 тис.2 роки тому
#14 Flutter Clean Architecture Course - Create Post add update page in presentation layer - part 1
على هي الحالة لو حابب الديزاين يكون 100% responsive فأنا مضطر اعمل اكتر من نسخة من كل سكرين ؟ لو فرضا عندي تطبيق مالح يشتغل ويب موبايل + تابلت فقط وفي عدد معين من الviews بهي الحالة حيكون الوضع اصعب للصيانة وكمية ال repeated code كبيرة جدا ؟ صحيح الكلام استاذ او لا ؟
شكرا لمتابعتك صديقي وبعتذر اذا اتاخرت عليك .. الفكرة انو ماشرط دايما تستعمل اسلوب انو لكل قاس ملف لحالو بجوز التصميم ابسط وبكفي انك تكتب if متل ماساوينا .. في تصاميم تلقائيا اذا استخدمت فيها expanded بتصير responsive ... بجوز ماكل الشاشات بحاجة انها تكون responsive
شكرا الك شرح اكثر من رائع
شكرا الك لمتابعتك وكلامك ❤️
رائع ربيع شكرا لجهودك 🎉
وضاح الحبيب ❤️
Can you create videos in English?
Maybe in future
@@RabeeOmran sure
يعطيف الف عافيه شرح بسيط جدا ومنظم ❤
تسلم تسلم ياصديقي المحترم بشكرك جدا على كلامك ومتابعتك ❤️
يعطيك العافية معلم ❤
الله يعافيك يامحترم وشكرا لمتابعتك ❤️
عظيم
شكرااا
راائع ياهندسة🤩🤩
شكرااااا 💙💙
ممكن تعمل سلسه عن devTools ، و لو فيه وسيلة تواصل معاك
ان شاء الله .. موجودة حساباتي في وصف القناة وبالوصف الخاص بهاد الفيديو
جزاك الله كل خير🌟🌟
شكرآ لمتابعتك ❤️
عظيم ❤
تسلم صديقي الغالي وشكرا لمتابعتك ❤️
شكرا بارك الله فيك سلسلة مفيدة كثير بس عندي طلب اذا ممكن تكمل السلسة وتضيف درس يعالج تسجيل الدخول واضافة بوست تبع المستخدم
شكرا لمتابعتك.. ان شاء الله ❤️
جزاك الله خيرا و نفع الله بك الامة 🌟 شرح رائع 🌟🌟
شكرا شكرا لكلامك وشكرا لمتابعتك وبارك لله بك ❤️
ممكن رابط فيديو extension الذي ذكرته في الفيديو
اكيد وشكرا لمتابعتك ❤️ ua-cam.com/video/pWDtTjeB-JY/v-deo.htmlsi=Dse3P0FWArJ5FNBf
اتمنى تكمل فيديوات ولو بشكل مدفوع 🤎
كلامك على راسي تسلم وشكرا لمتابعتك ❤️
Good job
شكرا لمتابعتك ❤️
الله يوفقك 🤎
ويوفقك يا صديقي .. وشكرا لمتابعتك ❤️
اشكرك تابعتك من البداية واستفدت كثير
والله انا اللي بشكرك على كلامك ومتابعتك ❤️
اشكرك جدا
شكراً على الشرح الواضح 🤎
شكرآ لمتابعتك ❤️
thanks ya handasa
شكرا لمتابعتك يامحترم ❤️
ابدااع.. الله يعطيك العافية يا رب 🙏
الله يعافيكي يارب 💙💙
شرح رائع جدا بمستوى احترافي بمعنى الكلمة، الرجاء الاستمرار بالنشر
تسلم تسلم يا محترم والله كلامك فرحني جدآ وهاد الكلام اللي بخليني استمر .. بشكرك جدآ على متابعتك وسعيد اني قدمتلك الافادة ❤️❤️
استاذنا لو سمحت انا عندي مشكلة بتطبق انه المستخدم يضيف منتج مرفق بالوقت كيف اقدر اذا كان تاريخ الجوال غير صحيح ينبه المستخدم وما يسمح له بإضافة منتج وشكرا كتير الك
يا هلا صديقي .. الحل اللي ببالي حاليا انه يكون عندك api يرجعلك الوقت والتاريخ الصح وتقارنن مع وقت وتاريخ الهاتف الحالي
تمام استاذ شكرا على الرد
محتوى ينافس المحتوى الاجنبي اذا لم يتفوق عليه
شكرآ على تعليقاتك اللي كلها دعم ومحبة
تحفه !!
تسلم تسلم وشكرآ لمتابعتك ❤️❤️
Can u use the Navigator 2.0 With Go_router package or whatever ?
Bravoooo
شكرا لمتابعتك ❤️
يسعد لي جدك يا شيخ!
لك تسلم ❤️😅
ماشاء الله . ابداع لايوصف بالشرح .. كنت فاقد الامل اتعلم الbloc بس بعد شرحك يابطل ستفدت كتير❤
والله كلامك فرحتي واسعدني جدآ.. بشكرك جدآ على متابعتك وانبسطت اني قدرت افيدك وبارك الله فيك ❤️
الله يعطيك العافية استاذ ❤❤
الله يعافيك يارب ❤️
وحشش ❤
تسلم تسلم وشكرا لمتابعتك ❤️❤️
قبل ما اكمل الفيديو انت رائع استمر ودائما جيب مواضيع جديدة ولك منا كل الدعم❤ تحياتي
لك تسلم تسلم يا مذوق .. ممنون جدآ لكلامك ولطفك يا محترم وشكرا لمتابعتك ❤️❤️❤️
❤❤❤❤
❤️❤️❤️
من اهم الحاجات فعلا استمر❤️
تسلم يا صديقي شكرا لمتابعتك ❤️
❤❤❤
يعطيك العافية ❤❤
احلى شريك ❤️
❤❤❤
😘😘😘😘
❤️❤️❤️
🎉🎉🎉🎉
❤❤❤❤
الله يعافيك, الحمد لله
شكرا لمتابعتك ❤️
يعطيك العافية لو قررت استخدم الباكيج في تطبيق clean arithuctier الموجود بالقناه هل اعدل على ملف المودل و الفليور حاله الوراثه من مكتبة ايكتبول
الله يعافيك وشكرا لمتابعتك وطبعا ساوي متل ماعم تقول وموفق ❤️
thank you 😊
Thanks for watching ❤️❤️
بارك الله فيك أحسن شرح قد تجده
تسلم تسلم .. شكرا لمتابعتك ❤️❤️
الله يبارك لك بجد
شكرا لمتابعتك ❤️
لو تحط رابط أداة
ادخل على موقع pub.dev واكتب بالبحث animate_do
يعطيك العافية اسألك، لازم نضيف كود لأجل ان تعمل أيضاً في نظام ال IOS ? مثل اضافة Intl تحتاج لإضافة سطر كود .. هل نحتاحها هنا؟
الله يعافيك يارب وشكرا لمتابعتك ❤️ لا ما محتاج نضيف شيئ
@@RabeeOmran ممكن بعد تغيير اللغة يتغير بشكل مباشر بدون ما نضطر نسكر التطبيق ونرجع نضوي؟ وكيف بتم الأمر لو سمحت
❤❤❤ لا تبتعد عنا كثيرا
حاضر ❤️❤️