JediPixels

For you who have been wondering who I am as a Flutter developer, I wanted to upload this video to give you an overview of my developer journey. You can find out more about me at: https://JediPixels.dev #flutter #flutterdev #flutterdeveloper #dart

Vue 3 TypeScript - Responsive Composition API - Getting Started - Build an application to automatically detect mobile or web - Show different pages according to the device - Overview of Tasks and Goals using Composition API - Use Composition API to monitor screen size changes - Use reactive to monitor browser and device size - Use reactive state to monitor sizes and return if it’s mobile or larger - Add Event Listener to monitor resize changes - Live Coding - Cloning responsive GitHub starter and final project - Create Composable useMonitorSize function - Run the Application and resize the browser window to watch the appropriate Mobile or Web page displayed - Summary - You learned to use Composition API to monitor screen size changes - You used the Composable function to monitor screen size changes - You used the reactive state to monitor sizes and return if it’s mobile or larger - You used Event Listener to monitor resize changes - Thank you GitHub link: https://github.com/JediPixels/responsive Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev #vuejs #vue3 #typescript #responsivewebdesign

Coffee Break Codelab - Sticky Grouped Headers in Flutter Need to create grouped sticky headers? There is a new widget in town, the SliverMainAxisGroup allows you to arrange multiple slivers together. Create sticky headers that are pushed out of view as each sliver group scrolls by. You’ll learn to use the SliverMainAxisGroup with AppBar or SliverPersistentHeaderDelegate to create sticky headers. In this coffee break course, you'll explore CustomScrollView using slivers for scrolling effects and performance Group data with the SliverMainAxisGroup widget containing sticky headers and grouped data Create sticky headers for each group by using SliverAppBar Create sticky headers for each group by using SliverPersistentHeaderDelegate Format actual grouped data with ListTile and the leading icon Create a service to load JSON quotes list and map them to a class model Create reusable widgets Explore all concepts without using any third-party packages Course Link: https://academy.droidcon.com/course/sticky-grouped-headers-in-flutter #flutter #flutterdev #dart

Products Part 1 – Introduction What we’ll cover: Take a look at the dummyjson.com free JSON service Ability to test Authentication Retrieve records with Authentication Token Create a Project called products Separate Business Logic UI/UX Create Models needed for API calls Auth Model Auth Error Model Product Model Products List Model Create Services to make API Calls API Values Service Authentication Service Connection Service – Check Internet Connection Product List Service Product Service Create Reusable Widgets Products ListView Products ListView Item 1 Products ListView Item 2 Products ListView Card Star Rating Status Message Create Helpers App Helpers Performance – Rebuild only what is needed by using… StreamBuilder Streams ValueListenableBuilder ValueNotifier Parse JSON server response via json.decode Parse JSON Via compute – Spawn a Isolate Parse JSON Via Isolate.spawn – Manually spawn Isolate plus message Retrieve Records via pagination ScrollController ScrollController Listener ScrollController check scrolling offset and maxScroll Extent to retrieve the next 10 records Themes Light Mode Dark Mode Switch Between Modes Version Control GitHub GitHub: https://github.com/JediPixels/products Blog Article: https://jedipixels.dev/flutter-produc... Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev #flutter #fluttertutorial #dart #flutterdev #flutterdeveloper #appdevelopment

6.5 hours Flutter Dart - Products Full Tutorial What is covered In this project, this is a small partial list of what you are going to take a look at: - API - Auth - Auth to load Products Feed - Check the Internet Connection - json.decode - Isolate - compute - Spawn a Isolate - Isolate.spawn - StreamBuilder - StreamController - Sink - Streams - ValueListenableBuilder - ValueNotifier - ScrollController - ListView - ListTile - ThemeData() - SliverToBoxAdapter - SliverList - SliverChildBuilderDelegate - RoundedRectangleBorder - AspectRatio - Image.network - FadeInImage - loadingBuilder - ImageChunkEvent - NumberFormat.simpleCurrency() - NumberFormat.percentPattern() - Services - Models - Widgets - Helpers - Business Logic - UI/ UX - packages Timeline 00:00:00 - Part 1 Intro 00:04:43 - Part 2 00:39:42 - Part 3 01:48:32 - Part 4 02:34:49 - Part 5 03:30:15 - Part 6 04:00:22 - Part 7 04:48:53 - Part 8 05:39:56 - Part 9 06:11:37 - Part 10 06:34:01 - Outro Introduction What we’ll cover: Take a look at the dummyjson.com free JSON service Ability to test Authentication Retrieve records with Authentication Token Create Project called products Separate Business Logic UI/UX Create Models needed for API calls Auth Model Auth Error Model Product Model Products List Model Create Services to make API Calls API Values Service Authentication Service Connection Service – Check Internet Connection Product List Service Product Service Create Reusable Widgets Products ListView Products ListView Item 1 Products ListView Item 2 Products ListView Card Star Rating Status Message Create Helpers App Helpers Performance – Rebuild only what is needed by using… StreamBuilder Streams ValueListenableBuilder ValueNotifier Parse JSON server response via JSON.decode Parse JSON Via compute – Spawn an Isolate Parse JSON Via Isolate.spawn – Manually spawn Isolate plus message Retrieve Records via pagination ScrollController ScrollController Listener ScrollController check scrolling offset and maxScroll Extent to retrieve the next 10 records Themes Light Mode Dark Mode Switch Between Modes Version Control GitHub GitHub: https://github.com/JediPixels/products Blog Article: https://jedipixels.dev/flutter-products-full-app-tutorial TruthSocial: https://truthsocial.com/@JediPixels Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev #flutter #fluttertutorial #dart #flutterdev #flutterdeveloper

Flutter Products - Auth, API Demo Teaser What is covered In this project, you are going to take a look at: - API - Auth - Auth to load Products Feed - Check the Internet Connection - Isolate - StreamBuilder - Streams - ValueListenableBuilder - ValueNotifier - ScrollController - Services - Models - Widgets - Helpers - Business Logic - UI/ UX GitHub: https://github.com/JediPixels/dashboard_changenotifier Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Blog Article: https://jedipixels.dev/flutter-state-management-using-changenotifier-animatedbuilder #flutter #fluttertutorial #dart #flutterdev #flutterdeveloper

Dashboard using `ChangeNotifier` and `AnimatedBuilder`. State Management by using built-in Flutter classes. No Packages. What is covered In this project, you are going to take a look at: - How to use `ChangeNotifier` and `AnimatedBuilder` to selectively rebuild individual widgets for performance - State Management with build-in classes, no packages The Problem: - Dashboard app needs to chart espresso, coffee, latte and total consumption - Drawing each section bar, the chart needs to refresh independently for performance The Solution: - Use the `ChangeNotifier` and `AnimatedBuilder` to allow to selectively rebuild individual widgets for performance ChangeNotifier and AnimatedBuilder The `ChangeNotifier` and `AnimatedBuilder` allow to selectively rebuild individual widgets for performance 1. Create a class that extends `ChangeNotifier` 2. Add fields to contain data 3. Add methods to modify data and call the `notifyListeners()` method 4. Add the `AnimatedBuilder` widget in the widget tree to rebuild widgets selectively if the data changed How it Works `ChangeNotifier` and `ValueListenableBuilder` - The `ChangeNotifier` and `AnimatedBuilder` allow to selectively rebuild individual widgets for performance. Use fields to contain data defining them in the `ChangeNotifier`. Use methods to modify data and call the `notifyListeners()` method. Use the `AnimatedBuilder` widget in the widget tree to rebuild widgets selectively if the data changed. GitHub: https://github.com/JediPixels/dashboard_changenotifier Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Blog Article: https://jedipixels.dev/flutter-state-management-using-changenotifier-animatedbuilder #flutter #fluttertutorial #dart #flutterdev #flutterdeveloper

Hello everyone, first I would like to thank you for all of the support you have given and the videos you have shared, it's greatly appreciated. I would love to get your feedback on what the next tutorials should be. Please leave in the comments what you would like to see. Until next time. GitHub: https://github.com/JediPixels Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev #flutter #fluttertutorial #dart #flutterdev

Dashboard using `ValueNotifier` and `ValueListenableBuilder`. State Management by using built-in Flutter classes. No Packages. What is covered In this project, you are going to take a look at: - How to use `ValueNotifier` and `ValueListenableBuilder` to pass data from a parent (ancestor) widget to child (descendant) widgets in the widget tree - State Management with build-in classes, no packages The Problem: - Dashboard app needs to chart espresso, coffee, and latte consumption - Drawing each bar, the chart needs to refresh independently for performance The Solution: - Use the `ValueNotifier` and `ValueListenableBuilder` to allow to selectively rebuild individual widgets for performance ValueNotifier and ValueListenableBuilder The `ValueNotifier` and `ValueListenableBuilder` allow to selectively rebuild individual widgets for performance 1. Create a class that extends `ValueNotifier` 2. Add fields to contain data defining them as `ValueNotifier` 3. Add methods to modify data and call the `notifyListeners()` method 4. Add the `ValueListenableBuilder` widget in the widget tree to rebuild widgets selectively if the data changed by individual field How it Works `ValueNotifier` and `ValueListenableBuilder` - The `ValueNotifier` and `ValueListenableBuilder` allow to selectively rebuild individual widgets for performance. Use fields to contain data defining them as `ValueNotifier`. Use methods to modify data and call the `notifyListeners()` method. Use the `ValueListenableBuilder` widget in the widget tree to rebuild widgets selectively if the data changed by individual field. GitHub: https://github.com/JediPixels/dashboard_valuenotifier Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Blog Article: https://jedipixels.dev/flutter-state-management-using-valuenotifier-valuelistenablebuilder #flutter #fluttertutorial #dart #flutterdev

In this Flutter video, you are going to take a look at how to use the InheritedWidget for State Management - No Packages. • How to use InheritedWidget to pass data from a parent (ancestor) widget to child (descendant) widgets in the widget tree The Problem: - Journal app has a mood selector value to be available to all pages. - All pages need to read selected mood from the parent page. The Solution: - Use the InheritedWidget to allow child pages (widgets) to access the parent page selected mood by going up the widget tree. The InheritedWidget is immutable and allows child widgets to access data (state) above in the widget tree 1. Create a class that extends InheritedWidget 2. Add fields to contain data 3. Add the of() method to access the InheritedWidget from child widgets 4. Add the updateShouldNotify() method to notify (via Flutter framework) widgets to rebuild if the data changed How it Works: - InheritedWidget – The InheritedWidget is great to pass data from an ancestor widget to descendent widget. The InheritedWidget is immutable and the data (attributes) are final (cannot change) and the Flutter framework rebuilds the InheritedWidget to refresh with new data. GitHub: https://github.com/JediPixels/journal_inheritedwidget Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Blog Article:https://jedipixels.dev/flutter-state-management-using-inheritedwidget-for-journal-app #flutter #fluttertutorial #dart

In this Flutter video, you are going to take a look at how to use Flutter's Way State Management - No Packages: • How to use InheritedWidget to pass data from a parent (ancestor) widget to child (descendant) widgets in the widget tree • How to use InheritedModel to selectively rebuild individual widgets for performance • How to use ValueNotifier and ValueListenableBuilder to selectively rebuild individual widgets for performance GitHub: https://github.com/JediPixels/flutters_way_state_management Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Blog Article: https://jedipixels.dev/flutters-way-state-management Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D

In this Flutter video, you are going to take a look at: 00:39 - Tween Animation - 'in-between' 01:07 - How to use AnimatedContainer to gradually change values over time 02:06 - How to use AnimatedCrossFade to cross-fade between two children widgets 03:02 - How to use AnimatedOpacity to show or hide widget visibility by animated fading over time 03:52 - How to use AnimatedSize to animate the size of a widget 04:46 - How to use AnimatedPositioned to animate the position of a widget in a Stack Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D

In this Flutter video, you are going to take a look at: - How hero animation allows a widget transition to fly into place from one page to another - How to use the PageRouteBuilder to create custom navigation transitions with hero animation GitHub: https://github.com/JediPixels/page_hero Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Blog Article: https://jedipixels.dev/flutter-hero-widget-and-pageroutebuilder-animation/ Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D

In this Flutter video, you are going to take a look at: Navigation: - How to use the Navigator to navigate between pages with arguments (pass data) - How to use the Navigator Named Route with arguments (pass data) - How to use the PageRouteBuilder to create custom navigation transitions GitHub: https://github.com/JediPixels/page_navigator Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Blog Article: https://jedipixels.dev/flutter-navigator-pageroutebuilder-transitions/ Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D

In this Flutter video, you are going to take a look at: Animations: - How to use the AnimationController to create custom animations - How to use the AnimationController to control staggered animations GitHub: https://github.com/JediPixels/floating_balloon Twitter: https://twitter.com/JediPixels Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D

In this Flutter video, you are going to take a look at: - Ways to include images, icons, and decorators - How to use text field widgets to retrieve, validate, and manipulate data - How to check your app’s orientation Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D Twitter: https://twitter.com/JediPixels

In this Flutter video, you are going to take a look at: - How to use basic widgets such as Scaffold, AppBar, SafeArea, Container, Text, RichText, Column, and Row, as well as different types of buttons. You’ll learn how to use the most common widgets. I call them our base building blocks for creating beautiful UI and UX. Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development-ebook-dp-B07YCVJW2D/dp/B07YCVJW2D Twitter: https://twitter.com/JediPixels

In this Flutter video, you are going to take a look at: - The fundamentals of widgets - How to use a full widget tree - How to use a shallow widget tree - Refactoring with a Constant - Refactoring with a Method - Refactoring with a Widget Class The widget tree is how you create your UI; you position widgets within each other to build simple and complex layouts. Since just about everything in the Flutter framework is a widget, and as you start nesting them, the code can become harder to follow. A good practice is to try to keep the widget tree as shallow as possible. To understand the full effects of a deep tree, you’ll look at a full widget tree and then refactor it into a shallow widget tree, making the code more manageable. You’ll learn three ways to create a shallow widget tree by refactoring: with a constant, with a method, and with a widget class. Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development/dp/1119550823 Twitter: https://twitter.com/JediPixels

This video is an introduction to: - Using Functions - Import Packages - Using Classes - Implementing Asynchronous Programming 0:00 Introduction 0:03 Beginning Flutter A Hands On Guide to App Development 0:09 INTRODUCTION - What is covered Functions 0:29 Using Functions 2:44 Import Packages import 'argument' 3:29 Using Classes class Object 5:19 Class Inheritance 6:24 Class Mixins 7:53 Asynchronous Programming Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development/dp/1119550823

This video is an introduction to: - Flow Statements - if and else - ternary - for loops - while and do-while - while and break - continue - switch and case 0:00 Introduction 0:03 Beginning Flutter A Hands On Guide to App Development 0:09 INTRODUCTION - What is covered 0:34 Using Flow Statements 1:41 if and else bool is closed = true 2:19 ternary operator 2:41 for Loops 4:21 while and do-while // While - evaluates the condition before the loop 5:43 while and break 6:26 continue 7:04 switch and case Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development/dp/1119550823

This video is an introduction to: - Why use Dart and what are the benefits? - Commenting Code - Main() entry point - Variables - Numbers - Strings - Booleans - Lists - Maps - Runes - Operators Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development/dp/1119550823 0:00 Introduction 0:09 INTRODUCTION - What is covered 0:39 INTRODUCTION - Why Dart? 2:16 Commenting Code 3:51 The main() Entry Point 4:39 Referencing and Declaring Variables Variables store references to a value 6:15 Numbers 8:43 Maps 9:07 Runes 9:55 Operators

This video is an introduction to: - Understanding the Widget Tree and the Element Tree. - How the Flutter application itself is a widget. - Elements have a reference to the widget and are responsible for comparing the widget differences. - When you see the use of BuildContext objects, they are the Element objects. - There is a third tree called the render tree that is a low-level layout and painting system that inherits from the RenderObject. The RenderObject computes and implements the basic layout and paint protocols. - We'll take a look at the Stateless Widget and Element Tree. - The Stateful Widget and Element Tree. Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development/dp/1119550823

This video is an introduction to the base architecture of the Flutter framework and the Dart language. But, before diving into code its important to understand how Flutter works behind the scenes. You’ll see in the video the Dart language benefits for deployment and development. The benefits of the Flutter framework to build multi-platform applications from a single code base, how widgets are used to compose the UI and how they form the widget, element and render tree, the widgets lifecycle events, when to use a stateless or stateful widget, how Flutter performance is fast and communicates via platform channels to access native platforms API’s. 0:00 Introduction 0:09 INTRODUCTION - What is covered 1:27 INTRODUCING FLUTTER & DART 3:07 INTRODUCING FLUTTER - Lifecycle Events 3:33 Defining Widgets and Elements 4:34 UNDERSTANDING WIDGET LIFECYCLE EVENTS 5:33 The StatelessWidget Lifecycle 6:27 The StatefulWidget Lifecycle Looking for Updates: https://JediPixels.dev Beginning Flutter Book: https://www.amazon.com/Beginning-Flutter-Hands-Guide-Development/dp/1119550823

#realestateinvestor #realestateinvestment #propertyfliporhold Property Flip or Hold - Hold Assumptions - Rent Mo. Projections - How to Calculate Gross Income - Total income of rent received from tenants to pay for the space. Vacancy Rate % - The percentage of time rental income is lost due to a property being not rented. Usually between 5% to 10% of the Gross Income. Other Income - Any miscellaneous income other than rent like Vending Machines, Laundry Machines, Billboard, Signage, etc. Effective Gross Income - Gross Income after considering vacancy and collection losses. Also known as Gross Operating Income. Property Management % - Usually between 6% to 10% of the Gross Rent. Other Income is not part of the calculation. Other Expenses - Can be used for any other expenses. For example Landlord might be responsible for lawn maintenance, pool cleaning, water... Operating Expenses - Excluding loan payments, it's all of the property expenses. For example Taxes, Insurance, Property Management, HOA, and any Other Expenses. Net Operating Income - Excluding loan payments, it's the Net Operating Income for the property after all Expenses. It is used to compare rental properties without the use of financing. Cash Flow Mo. - Including loan payments, Cash Flow is the total net amount after taking Gross Income minus all of the Expenses including the P.I. (Principal & Interest on Mortgage). Property Flip or Hold helps the Real Estate Investor to calculate and compare profits when Flipping -vs- Holding a property. Flip and take profit now, or Hold/Rent for passive income. Website: https://PropertyFlipOrHold.com/features Quickly analyze properties in 2 easy steps. Step 1: Enter Flip Assumptions Step 2: Enter Hold Assumptions Live Results: View results on the same screen USES Real Estate Property Investors for personal use or others Flip Property Rent Property BRRRR Wholesale Investors Real Estate Agents Agents for their investors REAL ESTATE INVESTING No Complex Calculations No Long Drawn-out Analysis Analyze Flip or Hold Scenarios from one screen Twitter: https://twitter.com/JediPixels Twitter: https://twitter.com/PixoliniInc. Website: https://PropertyFlipOrHold.com Blog: https://PropertyFlipOrHold.com/blog YouTube: https://www.youtube.com/watch?v=MEI2_0J2VuQ

Property Flip or Hold - Equity at Purchase or After Refinance - How to Calculate Equity at Purchase or After Refinance - The equity left in the property. Property Flip or Hold helps the Real Estate Investor to calculate and compare profits when Flipping -vs- Holding a property. Flip and take profit now, or Hold/Rent for passive income. Website: https://PropertyFlipOrHold.com/features Quickly analyze properties in 2 easy steps. Step 1: Enter Flip Assumptions Step 2: Enter Hold Assumptions Live Results: View results on the same screen USES Real Estate Property Investors for personal use or others Flip Property Rent Property BRRRR Wholesale Investors Real Estate Agents Agents for their investors REAL ESTATE INVESTING No Complex Calculations No Long Drawn-out Analysis Analyze Flip or Hold Scenarios from one screen Twitter: https://twitter.com/JediPixels Twitter: https://twitter.com/PixoliniInc. Website: https://PropertyFlipOrHold.com Blog: https://PropertyFlipOrHold.com/blog