Channel Title: Marcus Ng Channel Description: Welcome to my channel where you'll learn Flutter and create amazing apps. I am a Google Developer Expert (GDE) in Flutter and Dart. I enjoy teaching developers how to create beautiful UIs and production ready apps. Remember to subscribe :) Check out https://www.LaunchClub.io for courses and updates! <video> Flutter Chewie Video Player (Assets, URLs, & Gallery/Photo Library) | Learn Flutter Fast Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk https://www.launchclub.io/blog/chewie-video-player-tutorial » Flutter Job Board 👋 https://drp.li/T9bLq Learn how to display videos from local assets, network, and photo library using the chewie video player package in your Flutter apps. » Resources 📂 Video Player Package: https://pub.dev/packages/video_player Chewie Package: https://pub.dev/packages/chewie Image Picker: https://pub.dev/packages/image_picker Apple Docs - NSAppTransportSecurity: https://developer.apple.com/documentation/bundleresources/information_property_list/nsapptransportsecurity Sintel Video URL: https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/Sintel.mp4 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Intro 0:22 Pubspec, iOS, & Android Setup 0:52 VideoPlayerView 2:08 Select Video from Photo Library 2:49 Dynamic Aspect Ratio » Music 🎶 Track: Tobu - Candyland [NCS Release] Music provided by NoCopyrightSounds. Watch: https://www.youtube.com/watch?v=IIrCDAV3EgI Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #FlutterVideoPlayer #flutterdeveloper </video> <video> Animations Package Tutorial | Flutter Package Spotlight Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq Learn how to add animations to your Flutter apps. Animations are crucial in making your app stand out in the crowd. With Flutter, it's really easy to add animations to spice up your app. Thanks to the Material Design Team, we can use the animations package to add high quality, prebuilt transitions to our apps. I'll go over PageTransitionSwitchers, ContainerTransforms, SharedAxisTransitions, and Fade and FadeThrough Transitions. » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Resources 📂 Starter Project: https://github.com/MarcusNg/flutter_animations_demo/tree/starter_project Complete Source Code: https://github.com/MarcusNg/flutter_animations_demo Animations Package: https://pub.dev/packages/animations » Timestamps 🕒 0:00 Flutter Animations Tutorial Introduction 0:51 Download the starter project 1:02 Project Walkthrough 2:48 PageTransitionSwitch with FadeThroughTransition 3:51 OpenContainer (Container Transform) 5:23 SharedAxisTransition 6:28 Thanks for watching 🙏 » Music 🎶 Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #LearnFlutter #FlutterAnimations </video> <video> Flutter Budget Tracker with Notion API Tutorial | Apps From Scratch Description: Sign up to Notion for free 👉 http://ntn.so/marcusnotion » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq I'm going to teach you how to build a Budget Tracker with Flutter and the Notion API. You'll learn how to set up a database in Notion, use Notion's API to retrieve data, and visualize this data in your Flutter apps. Notion: https://www.notion.so/ Notion API Docs: https://developers.notion.com/ » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Resources 📂 Complete Source Code: https://github.com/MarcusNg/flutter_notion_budget » Timestamps 🕒 0:00 Introduction 0:46 Notion Budget Table Setup 2:18 Notion API Integration 3:00 Pubspec and .env Setup 4:29 main.dart 4:47 Item Model 5:08 Budget Repository and Notion API 9:20 Budget Screen - ListTiles 10:50 Spending Chart and Label Indicators 12:32 Refreshing Data 13:02 Thanks for watching 🙏 » Affiliates 🔥 3D Mockups - https://LaunchClub.io/rotato » Music 🎶 Joakim Karud (https://www.youtube.com/JoakimKarud) This video was sponsored by Notion. #Flutter #Notion #NotionAPI </video> <video> Write Less Code with Flutter Hooks | Learn Flutter Fast Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk https://www.launchclub.io/blog/flutter-hooks-tutorial » Flutter Job Board 👋 https://drp.li/T9bLq Stateful widgets are great and all, but they come with a lot of boilerplate code when dealing with controllers like TextEditingControllers, AnimationControllers, ScrollControllers, and more. Write fewer lines of code and improve code reuse throughout your application with flutter hooks. » Resources 📂 Flutter Hooks Package: https://pub.dev/packages/flutter_hooks » Remember to like, subscribe, comment, and share this video!🚨 https://youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Flutter Hooks Intro 0:12 Stateful Widget Form 1:00 Hook Widget Form 1:40 useEffect Hook 2:17 More hooks » Music 🎶 Track: Lost Sky - Dreams [NCS Release] Music provided by NoCopyrightSounds. Watch: https://youtu.be/SHFTHDncw0g Free Download / Stream: http://ncs.io/DreamsYO Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #FlutterHooks #flutterdeveloper </video> <video> Flutter Audio Players and Background Audio (Assets, URLs, & Playlist) | Learn Flutter Fast Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq Learn how to play audio files from local assets and URLs using just_audio. Arrange them into a playlist and keep audio files playing in the background. » Resources 📂 Just Audio Package: https://pub.dev/packages/just_audio Just Audio Background Package: https://pub.dev/packages/just_audio_background Cached Network Image Package: https://pub.dev/packages/cached_network_image Audio Video Progress Bar Package: https://pub.dev/packages/audio_video_progress_bar rxdart Package: https://pub.dev/packages/rxdart » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Intro 0:16 Pubspec, iOS, and Android Setup 1:40 AudioPlayer from Local Assets 2:00 Controls (Play/Pause) 2:24 Progress Bar 3:17 AudioPlayer from URL/Network 3:33 Playlist 5:04 Background Audio (Lock Screen/App In Background) » Music 🎶 Lakey Inspired (https://soundcloud.com/LAKEYINSPIRED) #Flutter #FlutterAudioPlayers #flutterdeveloper </video> <video> Flutter Freezed Code Generation - Data Classes, Unions/Sealed Classes, & Bloc Tutorial Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk https://www.launchclub.io/blog/flutter-freezed-code-generation » Flutter Job Board 👋 https://drp.li/T9bLq Code generation will take your Flutter app development process to the next level. In this video, you'll learn how to use Freezed to generate data classes and unions to greatly reduce the amount of boilerplate code in your apps. » Resources 📂 Freezed Package: https://pub.dev/packages/freezed Equatable: https://pub.dev/packages/equatable Dart Data Class Generator: https://marketplace.visualstudio.com/items?itemName=BendixMa.dart-data-class-generator » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Flutter Freezed Code Generation Intro 0:24 Normal User Model 0:39 Equatable 0:51 copyWith 1:14 toJson & fromJson 1:24 VSCode Extension - Dart Data Class Generator 1:58 Freezed Package 3:06 Generate Code 3:26 analysis_options.yaml - Exclude .g.dart and .freezed.dart files 3:34 Freezed toJson & fromJson 4:07 Freezed Custom Methods 4:34 Data Model Relationships 5:10 Serialize Nested Lists of Freezed Objects 5:26 Freezed Unions/Sealed Classes 5:30 Flutter Bloc 6:18 Freezed & Bloc 7:13 Pattern Matching with .when 7:32 Thanks for watching 🙏 » Affiliates 🔥 3D Mockups - https://LaunchClub.io/rotato » Music 🎶 [NCS (https://www.youtube.com/user/NoCopyrightSounds)] Sky High - Elektronomia (https://soundcloud.com/elektronomia) Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #Freezed #CodeGeneration </video> <video> Flutter 3.7 // Flutter Forward 2023 Recap - The Future of Flutter & Dart Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk https://www.launchclub.io/blog/flutter-3.7-flutter-forward-recap » Flutter Job Board 👋 https://drp.li/T9bLq Flutter Forward in Nairobi, Kenya has set the direction of Flutter & Dart for the next couple of years! There are over 5,000,000 Flutter developers and 700,000 published apps built with Flutter. » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Intro 0:22 Flutter 3.7 0:57 Material 3 1:30 Custom Shaders 1:46 The Future of Dart 2:43 The Future of Flutter Web 3:09 The Future of Flutter Mobile » Music 🎶 Bensound: "Elevate" (https://www.youtube.com/watch?v=NFcGmLyOh4w) #Flutter #FlutterForward #flutterdev </video> <video> Flutter Spotify Clone Desktop/Web UI | Apps From Scratch Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq I'm going to teach you how to build Spotify's user interface for desktop and web. With Flutter, it's super easy to develop responsive apps that work across different platforms. Users will be able to select tracks and our UI updates accordingly. We'll use provider to share state throughout our application and keep track of the currently selected song. Throughout the video, I'll hit upon some easy UI tricks to help you develop a clean and beautiful user experience. » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Resources 📂 Starter Project: https://github.com/MarcusNg/flutter_spotify_ui/tree/starter_project Complete Source Code: https://github.com/MarcusNg/flutter_spotify_ui » Timestamps 🕒 0:00 Introduction 1:00 Download the starter project 1:09 Project Walkthrough 4:31 Shell 8:37 Side Menu 19:19 Playlist Screen 29:08 Playlist Header 38:01 Tracks List 41:20 Provider - Current Track Model 47:21 Current Track 58:32 Responsive 1:00:14 Thanks for watching 🙏 » Affiliates 🔥 3D Mockups - https://LaunchClub.io/rotato » Music 🎶 Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #LearnFlutter #FlutterSpotify </video> <video> Flutter Firebase Setup - iOS, Android, Web, & MacOS | FlutterFire CLI Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://LaunchClub.io Using the FlutterFire CLI, we can set up Firebase in our Flutter projects for iOS, Android, Web, and MacOS. » Resources 📂 FlutterFire CLI: https://pub.dev/packages/flutterfire_cli Docs: https://firebase.flutter.dev/docs/cli » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 FlutterFire CLI Intro 0:10 Flutter Project Setup 0:17 Firebase Project Setup 0:31 Install FlutterFireCLI and Firebase Tools 0:51 Android App ID & iOS Bundle ID 1:20 Generate Firebase Options 2:23 Android, iOS, & macOS Versions 2:52 Firebase Core 3:15 Thanks for watching 🙏 » Affiliates 🔥 3D Mockups - https://LaunchClub.io/rotato » Music 🎶 Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #Firebase #FlutterFire </video> <video> Flutter Video Calling with Agora | Apps From Scratch Description: Get started with Agora for free 👉 https://bit.ly/3vcDzNV » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq In this video, we'll use the video calling SDK from Agora to integrate video calls into our messaging app. Agora also offers SDKs for voice calls, live streaming, and real-time messaging. I highly recommend that you take a look at their docs at https://agora.io and check out all they have to offer. » Resources 📂 Agora: https://agora.io Agora Docs: https://docs.agora.io Agora UI Kit Package: https://pub.dev/packages/agora_uikit » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Flutter Video Call Intro 0:37 Project Setup - Pubspec 0:55 Android and iOS Permissions 1:21 Fix M1 iOS Simulator Error 1:49 App Theme 2:02 Folder Structure 2:15 Chat Screen 2:34 Message Bubble Widget 3:40 Message Text Field Widget 4:05 Unfocus Widget 4:33 Video Call Screen - Agora UI Kit 5:23 Agora Dashboard - App ID, Channel Name, Temp Token Generation 6:21 Testing Video Calls 6:44 Thanks for watching 🙏 » Affiliates 🔥 3D Mockups - https://LaunchClub.io/rotato » Music 🎶 Epidemic Sound Joakim Karud (https://www.youtube.com/JoakimKarud) This video was sponsored by Agora. #Flutter #Agora #FlutterVideoCalls </video> <video> Flutter Image Picker & Cropper From Camera & Gallery | Learn Flutter Fast Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq Learn how to allow users to select images from their photo library or camera and crop images using the image_picker and image_cropper packages. » Resources 📂 Image Picker Package: https://pub.dev/packages/image_picker Image Cropper Package: https://pub.dev/packages/image_cropper » Remember to like, subscribe, comment, and share this video!🚨 https://youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Intro 0:13 Image Picker and Image Cropper Setup 1:03 Image Helper 1:26 Select single image 1:57 Select multiple images 2:28 Cropping images 2:52 UI 4:22 Select video » Music 🎶 Track: Diviners feat. Contacreast - Tropic Love [NCS Release] Music provided by NoCopyrightSounds. Watch: https://www.youtube.com/watch?v=u6RJv7f__Mg Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #ImagePicker #flutterdeveloper </video> <video> Inside the mind of a Mobile Dev // Flutter Scrolling Parallax Effect Tutorial Description: 🧠 Courses, tutorials, & source code: https://drp.li/Iq9Bk https://launchclub.io/blog/flutter-parallax-effect-tutorial 💼 Flutter Job Board: https://drp.li/T9bLq One of my favorite animations is the scrolling parallax effect. I see it in a lot apps and websites, and I think it's about time I implement it myself using Flutter. But instead of just applying the parallax effect to images, I decided to apply it to videos. This parallax effect also works with images if you display images instead of videos. 📱 Socials: GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg 🕒 Timestamps: 0:00 Intro 0:15 PageView 0:48 Video Cards 1:11 Playing Videos 1:50 Parallax Effect 3:01 Animated Container 🎨 Dribble Parallax Animations: https://dribbble.com/shots/4460149-Parallax-video-cards https://dribbble.com/shots/4218897-NASA-Parallax-Animation https://dribbble.com/shots/13961411-Breathtaking https://dribbble.com/shots/5099873-iPhone-Card-Swipe-Animation-Concept 🎶 Music: Ambient Gold · StreamBeats by Harris Heller #Flutter #flutterdev #flutterdeveloper </video> <video> Flutter Flavors, App Icons, and Firebase Tutorial Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq When developing apps, it’s very important to separate out your development and production environments. App flavors allow us to create multiple versions of our app with the same codebase, making it easy to create and test new features without the risk of destroying production data. You'll also learn how to generate an app icon for each flavor using the flutter_launcher_icons package and link each flavor to a different Firebase project. » Resources 📂 Package Info Plus: https://pub.dev/packages/package_info_plus Flutter Launcher Icons: https://pub.dev/packages/flutter_launcher_icons Flutter Flavors & Firebase Medium Article: https://medium.com/@animeshjain/build-flavors-in-flutter-android-and-ios-with-different-firebase-projects-per-flavor-27c5c5dac10b Build Phase Runner Script: https://gist.github.com/animeshjain/b7f754adee0a0a5ff1c41d698e6c6fb5#file-firebase-sh » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Flutter Flavors Intro 0:53 app.dart and main files 2:00 .vscode/launch.json 2:48 Android Product Flavors 3:35 iOS Xcode Schemes 5:20 App Icons with flutter_launcher_icons 6:50 App Icons - iOS Setup 7:12 Flavors work! 7:25 Firebase Setup 7:51 Flutter Firebase Flavors - Android 8:18 Flutter Firebase Flavors - iOS 9:07 Thanks for watching! » Affiliates 🔥 3D Mockups - https://LaunchClub.io/rotato » Music 🎶 Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #MobileDevelopment #AppIcons </video> <video> Flutter Google Maps API Tutorial | Markers, Polylines, & Directions API Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq Learn how to add Google Maps to your Flutter apps. I'll go over how to add map markers, create info windows, make HTTP requests to the Google Directions API for route information, display polylines, and animate the map camera. Note: When you add a billing account to your project for the Directions API, you also get $200 in credit that gets applied to your account every month. That's 40,000 free calls ($0.005 per request for the first 100,000 requests) for the Directions API. "For each billing account, for qualifying Google Maps Platform SKUs, a $200 USD Google Maps Platform credit is available each month, and automatically applied to the qualifying SKUs." More info here: https://developers.google.com/maps/documentation/directions/usage-and-billing » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Resources 📂 Complete Source Code: https://github.com/MarcusNg/flutter_gmaps Dio Package: https://pub.dev/packages/dio Flutter Polyline Points Package: https://pub.dev/packages/flutter_polyline_points Google Maps Package: https://pub.dev/packages/google_maps_flutter » Timestamps 🕒 00:00 Flutter Google Maps Tutorial Introduction 00:49 Pubspec Packages 01:12 Google Maps API Key 01:34 Google Maps Setup Android and iOS 02:00 Adding Our Map 02:45 Animate Map Camera to Location 03:31 Add Map Markers by Long Pressing 05:29 AppBar and TextButtons 06:00 Google Directions API - DirectionsRepository 07:21 Directions Model - Parsing JSON 08:36 Get Directions Info 09:09 Animate Map Camera to LatLngBounds 09:24 Distance & Duration Container 09:49 Display Polylines / Route 10:13 Recap 10:44 Thanks for watching 🙏 » Music 🎶 [NCS (https://www.youtube.com/user/NoCopyrightSounds)] Endless - Marin Hoxha (https://soundcloud.com/marin-hoxha) Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #FlutterGoogleMaps #FlutterTutorial </video> <video> Flutter Wordle Clone Mobile/Web/Desktop Tutorial | Apps From Scratch Description: » Flutter courses, writeups, and source code on Launch Club 🧠 https://drp.li/Iq9Bk » Flutter Job Board 👋 https://drp.li/T9bLq So you've probably heard of Wordle by now. Practically everybody's been playing it for the past few months and the New York Times bought it for a low seven figures a few weeks ago. I thought it'd be a fun project to build in Flutter, so let's get into it. » Resources 📂 Wordle: https://www.nytimes.com/games/wordle/index.html Equatable Package: https://pub.dev/packages/equatable Flip Card Package: https://pub.dev/packages/flip_card » Remember to like, subscribe, comment, and share this video!🚨 https://www.youtube.com/MarcusNg?sub_confirmation=1 » Socials📱 GitHub: https://github.com/MarcusNg Twitter: https://twitter.com/MarcusLNg » Timestamps 🕒 0:00 Flutter Wordle Clone Intro 0:25 Wordle Tutorial 0:51 Project Setup 1:01 Folder Structure 2:03 Letter Model 2:45 Word Model 3:29 Wordle Screen - Game State 4:13 Board & Board Tile 4:42 Keyboard & KeyboardButton 5:39 Keyboard Interactions 6:55 Check If Win/Loss 7:29 Maintain Keyboard State 7:59 Flip Tiles 9:00 Thanks for watching 🙏 » Affiliates 🔥 3D Mockups - https://LaunchClub.io/rotato » Music 🎶 LAKEY INSPIRED (https://www.youtube.com/channel/UCOmy8wuTpC95lefU5d1dt2Q) Joakim Karud (https://www.youtube.com/JoakimKarud) #Flutter #Wordle #AppsFromScratch </video>

Contacts and Links

Description

Welcome to my channel where you'll learn Flutter and create amazing apps.

I am a Google Developer Expert (GDE) in Flutter and Dart. I enjoy teaching developers how to create beautiful UIs and production ready apps.

Remember to subscribe :)

Check out https://www.LaunchClub.io for courses and updates!

Videos from channel