Tutorial menambahkan 3D models ke dalam aplikasi projek Flutter dengan vectary

Selamat malam semuanya....

Sesuai dengan judul artikel ini,kali ini saya akan bahas bagaimana menambahkan 3D model ke dalam aplikasi Project flutter dengan memanfaatkan fitur dari website vectary...

Untuk menggunakan fitur dari website vectary,hal pertama yang harus kita lakukan adalah mendaftar ke website tersebut atau bisa langsung dengan login menggunakan akun google kita...

Buka website vectary.com. Selanjutnya masuk dengan akun google.

Setelah berhasil login,kita akan di diperlihatkan halaman dashboard dari website vectary. Selanjutnya pilih new project -> Pilih Template yang ingin ditampilkan pada project aplikasi kita.

Setelah proses diatas selesai,selanjutnya kita kembali ke project flutter (disini saya menggunakan Android Studio). Untuk menampilkan template yang kita pilih dari website vectary ke dalam project flutter,disini kita harus menambahkan package webview_flutter.

Setelah package ditambahkan jangan lupa untuk klik pub get. Setelah proses diatas selesai selanjutnya buat file dart baru dengan nama vectary_screen.dart dan ikuti kode nya seperti dibawah.

import 'package:flutter/material.dart';
import 'package:webview_flutter/webview_flutter.dart';

class VectaryScreen extends StatefulWidget {
  const VectaryScreen({Key? key}) : super(key: key);

  @override
  State<VectaryScreen> createState() => _VectaryScreenState();
}

class _VectaryScreenState extends State<VectaryScreen> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Colors.white,
      appBar: AppBar(
        title: const Text('Vectary'),
        elevation: 0,
        actions: const [
          Icon(Icons.shopping_cart),
          SizedBox(
            width: 20,
          ),
          Icon(Icons.share),
          SizedBox(
            width: 20,
          ),
        ],
      ),
      bottomNavigationBar: _buildBottomBarActions(),
      body: Column(
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          const Expanded(
            child: WebView(
              initialUrl:
                  'https://app.vectary.com/p/4lepw7bb8QnDkTRO8uRiB7',
              javascriptMode: JavascriptMode.unrestricted,
            ),
          ),
          const SizedBox(
            height: 20,
          ),
          _buildProductTitle(),
        ],
      ),
    );
  }

  Widget _buildBottomBarActions() {
    return Padding(
      padding: const EdgeInsets.symmetric(horizontal: 16.0),
      child: Column(
        mainAxisSize: MainAxisSize.min,
        children: [
          Row(
            children: [
              Expanded(
                  child: Container(
                height: 50,
                decoration: BoxDecoration(
                  border: Border.all(color: Colors.black),
                  borderRadius: BorderRadius.circular(4),
                ),
                child: const Center(
                  child: Text(
                    'Buy Now',
                    style: TextStyle(
                      color: Colors.black,
                      fontSize: 16,
                    ),
                  ),
                ),
              )),
              const SizedBox(
                width: 8,
              ),
              Expanded(
                child: Container(
                  height: 50,
                  width: 200,
                  decoration: BoxDecoration(
                    color: Colors.black,
                    border: Border.all(color: Colors.black),
                    borderRadius: BorderRadius.circular(4),
                  ),
                  child: const Center(
                    child: Text(
                      'Add to bag',
                      style: TextStyle(
                        color: Colors.white,
                        fontSize: 16,
                      ),
                    ),
                  ),
                ),
              )
            ],
          ),
          const SizedBox(
            height: 20,
          )
        ],
      ),
    );
  }

  Widget _buildProductTitle() {
    return Column(
      children: const [
        Text(
          'Sneaker',
          style: TextStyle(
            fontWeight: FontWeight.bold,
            fontSize: 20,
          ),
        ),
        SizedBox(
          height: 8,
        ),
        Text(
          'Sneaker X',
          style: TextStyle(
            fontSize: 16,
          ),
        ),
        SizedBox(
          height: 8,
        ),
      ],
    );
  }
}

Setelah itu ubah file main.dart seperti code dibawah

import 'package:flutter/material.dart';
import 'package:tutorials_vectary/vectary_screen.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Tutorial Vactary',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const VectaryScreen(),
    );
  }
}

Jika semua langkah sudah dilakukan,jalankan aplikasinya maka hasilnya seperti ini

Link demo:https://www.youtube.com/shorts/es4sAPyTRbI?&ab_channel=ShortsYu