Building an Epic Augmented Reality Solar System with Flutter and ARKit | Unpacking Flutter Packages

Опубликовано: 31 Январь 2025
на канале: Trey Codes

1,213

👋🏾 Welcome back 👋🏾

🚀 Video Overview:
In this video, I’ll be breaking down how to harness the power of Flutter for a solid user interface and ARKit for the immersive augmented reality experience. Whether you're a seasoned developer or just starting out, this tutorial will be great for you.

🔍 What's Covered:
Working with Flutter: Explore some basics of Flutter and understand how to use its features for this stellar project.
ARKit Integration: Dive into the fascinating world of Augmented Reality with ARKit, Apple's AR framework.
Solar System Modeling: Create 3D models of planets and celestial bodies, making your AR Solar System visually stunning and scientifically (somewhat) accurate.
User Interaction: Implement interactive features, allowing users to tap and learn about each planet in your AR Solar System.

🛠️ Technologies Used:
Flutter
VSCode
Dart
ARKit

📚 Prerequisites:
Basic understanding of Augmented Reality and its dual-world operation.

🕒 Timestamps:
00:00 - Introduction
01:22 - Overview
03:31 - iOS Configuration
05:32 - Current Files Explanation
08:17 - Add ARKitSceneView & ARKitController
11:25 - Add A White Sphere To The Scene
15:46 - Update White Sphere to Orange Sphere
17:24 - Update Orange Sphere to Sun
19:13 - Rotate the Sun
22:24 - Add Mercury & Rotate
23:43 - Have Mercury Orbit The Sun
25:52 - Build Orbit Path For Mercury
28:43 - Celestial Body Helper Function
30:49 - Orbit Path Helper Function
31:45 - Create Anchor For Spinning
33:52 - Create Anchor For Orbiting
36:27 - Node, Anchor, & Orbit Helper Function
42:01 - Add Remaining Planets
43:17 - Add On Tap Event
46:03 - Add Reset Scene Feature
48:34 - Outro

📄 Related Resources:
ARKit Plugin - Flutter Package: [ https://pub.dev/packages/arkit_plugin ]
My Source Code For This Example: [ https://github.com/trey-a-hope/Demos/... ]
Chris Jungmann - iOS Workshop Virtual Solar System Setup Using ARKit: [    • iOS Workshop Virtual Solar System Set...   ]

💡 Tip:
If this tutorial is moving too fast, try creating something smaller and quicker with ARKit, like a white cube or a yellow ring. Play around with it and see what you can find!

🔗 Connect with me:
Instagram: [   / trey.codes   ]
Tik Tok: [   / trey_codes   ]
LinkedIn: [   / trey-hope-69a3a774   ]
GitHub: [ https://github.com/trey-a-hope ]

👍 Like the Video?
If you find this video helpful, please give it a thumbs up, share it with your friends, and subscribe to the channel for more content on mobile app development, especially Flutter!

💬 Have Questions or Suggestions?
Drop your thoughts in the comments section below, and I’ll get back to you as soon as possible!

🔔 Stay Updated:
Hit the bell icon to receive notifications for my latest videos!

Happy Coding! 🚀