Flutter – Adding 3D Objects
3D objects are those objects which have 3 dimensions length, width, and depth. These objects provide a great user experience when used for various purposes. And adding such type of visualization to your app will be very helpful for the user, which in turn helps your app to grow and attract a large audience as well.
So today we will be building a simple flutter based app to demonstrate how you can add 3D objects to your app project.
Step 1: Creating a new flutter application project and adding necessary dependencies
- Open VS Code, press “Ctrl+Shift+P” and select “Flutter: New Application Project”
- Select the folder where you want to add this flutter project to or create a new one
- Then after selecting the folder, give a name to your project and hit “Enter”
- Flutter will create a new project for you, then on the left bottom side click on the “pubspec.yaml” file
- Add the following dependencies, which includes the flutter cube package for adding the 3D objects to your project
dependencies: flutter: sdk: flutter flutter_cube: ^0.0.6
Step 2: Creating the assets folder and adding the required assets.
- On the left side look for the “New Folder” option, add a new folder and name it to “assets“
- Right-click on the folder and click on “Reveal in File Explorer”.
- Go to this link, download the folders, or you can choose your favorite 3D objects from here or from any other website which provides 3D models.
- Copy these folders to the assets folder, open the “pubspec.yaml” file again, and add the following to the “flutter” section
flutter: uses-material-design: true assets: - assets/Astronaut/ - assets/material/ - assets/earth/
Step 3: Dart code for adding the 3D objects.
This is the code for the “main.dart” file in the “lib” folder
Step 4: Adding the Home page code to our project
- Right-click on the “lib” folder, add the new file and name it “home_page.dart“
- The following is the code for the “home_page.dart” file
Step 5: Adding a new device and running the project
- Add a new device to your project like any android mobile emulator, real device, or chrome(web)
- After that press “Ctrl + F5” or go to “Run”>”Run Without Debugging” and see the output on your connected device