Flutter: agregar objetos 3D

Los objetos 3D son aquellos objetos que tienen 3 dimensiones de largo, ancho y profundidad. Estos objetos brindan una excelente experiencia de usuario cuando se usan para varios propósitos. Y agregar este tipo de visualización a su aplicación será muy útil para el usuario, lo que a su vez ayuda a que su aplicación crezca y atraiga a una gran audiencia.

Así que hoy crearemos una aplicación simple basada en aleteo para demostrar cómo puede agregar objetos 3D a su proyecto de aplicación.

Paso 1: crear un nuevo proyecto de aplicación flutter y agregar las dependencias necesarias

• Abra VS Code, presione «Ctrl + Shift + P» y seleccione «Flutter: Nuevo proyecto de aplicación»
• Seleccione la carpeta a la que desea agregar este proyecto de aleteo o cree uno nuevo
• Luego, después de seleccionar la carpeta, asigne un nombre a su proyecto y presione «Enter»
• Flutter creará un nuevo proyecto para usted, luego, en la parte inferior izquierda, haga clic en el archivo «pubspec.yaml»
• Agregue las siguientes dependencias, que incluyen el paquete flutter cube para agregar los objetos 3D a su proyecto

dependencies:
  flutter:
    sdk: flutter
  flutter_cube: ^0.0.6

Paso 2: crear la carpeta de activos y agregar los activos necesarios.

• En el lado izquierdo, busque la opción «Nueva carpeta», agregue una nueva carpeta y asígnele el nombre de » activos «.
• Haga clic derecho en la carpeta y haga clic en «Mostrar en el Explorador de archivos».
• Vaya a este enlace , descargue las carpetas, o puede elegir sus objetos 3D favoritos desde aquí o desde cualquier otro sitio web que proporcione modelos 3D.
• Copie estas carpetas a la carpeta de activos, abra el archivo » pubspec.yaml » nuevamente y agregue lo siguiente a la sección » flutter «

flutter:
  uses-material-design: true
  assets:
      - assets/Astronaut/
      - assets/material/
      - assets/earth/

Paso 3: código Dart para agregar los objetos 3D.

Este es el código para el archivo “ main.dart ” en la carpeta “ lib ”

import 'package:flutter/material.dart';
import 'package:flutter_3d/home_page.dart';
  
import 'home_page.dart';
  
void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter 3D',
      debugShowCheckedModeBanner: false,
      theme: ThemeData(
        primarySwatch: Colors.blue,
        visualDensity: VisualDensity.adaptivePlatformDensity,
      ),
      home: HomePage(),
    );
  }
}

Paso 4: agregar el código de la página de inicio a nuestro proyecto 

• Haga clic derecho en la carpeta «lib», agregue el nuevo archivo y asígnele el nombre » home_page.dart » .
• El siguiente es el código para el archivo “ home_page.dart”

// Dart Program to add 3D objects to your project
  
// importing material.dart
import 'package:flutter/material.dart'; 
  
// importing flutter cube package
import 'package:flutter_cube/flutter_cube.dart';
  
// creating class of stateful widget
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
    
  // adding necessary objects
  Object earth;
  Object astro;
  Object material;
  @override
  void initState() {
      
    // assigning name to the objects and providing the
    // object's file path (obj file) 
    earth = Object(fileName: "assets/earth/earth_ball.obj");
    astro = Object(fileName: "assets/Astronaut/Astronaut.obj");
    material = Object(fileName: "assets/material/model.obj");
    super.initState();
  }
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      extendBodyBehindAppBar: true,
        
      // creating appbar
      appBar: AppBar(
        centerTitle: true,
        title: Text(
          "3D Objects in Flutter",
          style: TextStyle(
              color: Colors.greenAccent,
              fontWeight: FontWeight.bold,
              fontSize: 25),
        ),
        backgroundColor: Colors.transparent,
        elevation: 0.0,
      ),
      body: Container(
          
        // providing linear gradient to the
        // background with two colours
        decoration: BoxDecoration(
            gradient: LinearGradient(
                colors: [Colors.blueAccent, Colors.greenAccent],
                begin: Alignment.topLeft,
                end: Alignment.bottomRight)),
        child: Column(
          children: [
            Expanded(
                
              // adding the cube function to
              // create the scene of our object
              child: Cube(
                onSceneCreated: (Scene scene) {
                  scene.world.add(material);
                  scene.camera.zoom = 10;
                },
              ),
            ),
              
            // adding the earth object
            Expanded(
              child: Cube(
                onSceneCreated: (Scene scene) {
                  scene.world.add(earth);
                  scene.camera.zoom = 10;
                },
              ),
            ),
              
            // adding the astro object
            Expanded(
              child: Cube(
                onSceneCreated: (Scene scene) {
                  scene.world.add(astro);
                  scene.camera.zoom = 10;
                },
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Paso 5: agregar un nuevo dispositivo y ejecutar el proyecto

• Agregue un nuevo dispositivo a su proyecto como cualquier emulador móvil de Android, dispositivo real o Chrome (web)
• Después de eso, presione «Ctrl + F5» o vaya a «Ejecutar»> «Ejecutar sin depurar» y vea el resultado en su dispositivo conectado

Producción: