Home Mobile Make Access Camera in Flutter

Make Access Camera in Flutter

0

example access camera

Assalamulaikum Wr.Wb..

Haloo teman-teman, pada artikel kali ini kita akan mencoba membuat sebuah aplikasi pada flutter yaitu mengakses camera. Sebelum kita ke pembahasannya, kita bahas sedikit mengenai apa itu Flutter? Flutter merupakan sebuah platform yang diciptakan oleh Google dan juga menyediakan framework serta bersifat open source. Flutter adalah suatu UI(User Interface) SDK(Software Development Kit) yang digunakan oleh banyak developer untuk  membangun aplikasi di OS (Operation System) Android dan IOS serta juga Website app. Untuk membuat satu tampilan desain dibutuhkan satu bahasa dart. Dart juga diartikan sebagai UI (User Interface). Nah mungkin itu dulu penjelasan singkat nya,langsung saja kita masuk ke tahap pembuatan access camera in flutter.

Langkah 1 : buatlah sebuah new flutter project baik di visual code maupun di android studio

Langkah 2 : tambahkan dependecies “image_picker” pada pubspec.yaml yang bisa kita dapatkan dari https://pub.dev/.

copy dependecies nya kemudian dipastekan di pubspec.yaml

Langkah 3 :

edit file main.dart yang ada di folder lib menjadi seperti ini:

import’package:image_picker/image_picker.dart’; -> untuk memanggil library yang sudah kita tambahkan tadi di pubspec.yaml

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:image_picker/image_picker.dart';

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

class MyApp extends StatelessWidget {


  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Access Camera',
      theme: ThemeData(
        primarySwatch: Colors.blue,
        
      ),
      home: AccessCameraPage(),

    );
  }
}

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

  @override
  _AccessCameraPageState createState() => _AccessCameraPageState();
}

class _AccessCameraPageState extends State<AccessCameraPage> {
    File? _image;
  Future<void> openCamera() async{
      final pickedImage = await ImagePicker().pickImage(source: ImageSource.camera);
      if (pickedImage != null) {
        setState(() {
          _image = File(pickedImage.path);
        });
      }



  }
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Access Camera"),
      ),

      body: Container(
        child: Center(
          child: _image == null
              ? Text("NO Image")
              : Image.file(_image!),
        ),
      ),

      floatingActionButton: FloatingActionButton(
        child:  Icon(Icons.add_a_photo, color: Colors.white,),
        backgroundColor: Colors.green,
        onPressed: (){
          openCamera();
        },
      ),
    );
  }
}

kemudian kita save, dan bisa kita running….

berikut hasil running dari access camera:

Tampilan depan setalah dilakukan running

nah, segitu dulu teman-teman.. sampai jumpa lagi di artikel berikutnya…..

Wassalam….