Categories
Berita PDSI

Memahami Konstruktor Flutter

Konstruktor digunakan untuk membuat objek yang memiliki nilai awal. Di Flutter, konstruktor dapat dijalankan dengan tiga jalan, yaitu konstruktor standar, konstruktor bernama dan konstruktor faktori.

Daftar Isi

Konstruktor di Flutter

Hampir semua kode yang ditulis di dalam Dart (Flutter) akan ditulis di dalam bentuk kelas. Sebuah kelas mendeskripsikan sebuah objek yang dibuat, di mana objek sendiri dapat menampung data dan logika apapun.

— Memahami Konstruktor Flutter
https://pdsi.unisayogya.ac.id/memahami-konstruktor-flutter/ 2021-08-10 14:45:58

Untuk memahami bagaimana konstruktor/objek di dalam Flutter, maka dapat memperhatikan contoh kode dengan komentar di bawah ini

|-Konstruktor Standar dan Konstruktor Bernama

import 'package:flutter/material.dart';

void main()
{
  runApp( MaterialApp(home: MyApp()) );
}

class MyApp extends StatelessWidget
{
  @override
  Widget build(BuildContext context){
    //contoh penggunaan getter setter
    Kotak square = new Kotak.tinggi(20);
    square.setLebar = 10;
    //atau square.lebar = 10;
    return Scaffold(
      body: Center(
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          // crossAxisAlignment: CrossAxisAlignment.end,
          children:[
            Flexible(
                child: square,
                flex:2,
                fit: FlexFit.loose //loose tidak ikut di scretch
            ),
            Flexible(
                //contoh pemanggilan konstruktor dengan parameter
                child: Kotak(75, 30),
                flex:1,
                fit: FlexFit.tight //tight ikut di scretch
            ),
            Flexible(
                //contoh pemanggilan konstruktor dengan property
                child: Kotak.tinggilebar(tinggi: 50),
                flex: 1,
                fit: FlexFit.tight //tight ikut di scretch
            )
          ]
        )
      )
    );
  }

}

class Kotak extends StatelessWidget{
  double? tinggi;
  double? lebar;

  //override getter setter
  //secara default tidak perlu ada getter setter
  //kecuali ada sesuatu untuk pengesetan
  set setLebar(double lebar) => {if (this.lebar! < 10) { this.lebar = lebar }};
  double? get getLebar => this.lebar;

  //konstruktor standar hanya digunakan sekali
  Kotak(this.tinggi, this.lebar);
  //bisa juga dibalik,
  //konstruktor standarnyanya Kotak({this.tinggi, this.lebar});
  //konstruktor bernamanya Kotak.tinggilebar(this.tinggi, this.lebar);

  //konstruktor bernama
  Kotak.tinggilebar({this.tinggi, this.lebar}); //konstruktor dengan property
  Kotak.tinggi(this.tinggi);

  // @override
  // Widget build(BuildContext context){
  //   return Container(
  //     width: lebar,
  //     height: tinggi,
  //     decoration: BoxDecoration(
  //         color: Colors.blue,
  //         border: Border.all()
  //     ),
  //   );
  // }
  //atau
  @override
  Widget build(BuildContext context)
  =>
  Container(
    width: lebar,
    height: tinggi,
    decoration: BoxDecoration(
                  color: Colors.blue,
                  border: Border.all()
                ),
  );
}

|-Konstruktor Faktori

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Konstruktor Faktori',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: MyHomePage(title: 'Contoh Konstruktor Faktori'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key? key, required this.title}) : super(key: key);
  final String title;
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage>{

  AksesAPI() async{
    var hasil = await http.get(Uri.parse("http://192.168.20.216:8080/pegawai"))
        .timeout(Duration(seconds: 10));
    Map<String, dynamic> jsonHasil = jsonDecode(hasil.body);

    //contoh 1 penggunaan konstruktor faktori
    Autogenerated objAllPeg = Autogenerated.fromJson(jsonHasil);
    //cetak id dari objek 0
    //contoh output: 1
    print(objAllPeg.pegawai![0].id);

    //contoh 2 penggunaan konstruktor faktori
    Pegawai objPeg = Pegawai.fromJson(jsonHasil["pegawai"][0]);
    print(objPeg.id);

    //cetak seluruh objek
    //contoh output: [id:1, nama: Fulan, tanggal lahir: 12122020, jenis kelamin: L, id:2, nama: John Doe, tanggal lahir: 20122020, jenis kelamin: L]
    print(objAllPeg);
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    AksesAPI();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
          ],
        ),
      ),
    );
  }
}

class Autogenerated {
  List<Pegawai>? pegawai;

  Autogenerated({this.pegawai});

  Autogenerated.fromJson(Map<String, dynamic> json) {
    if (json['pegawai'] != null) {
      pegawai = <Pegawai>[];
      json['pegawai'].forEach((v) {
        pegawai!.add(new Pegawai.fromJson(v));
      });
    }
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    if (this.pegawai != null) {
      data['pegawai'] = this.pegawai!.map((v) => v.toJson()).toList();
    }
    return data;
  }

  @override
  String toString() => this.pegawai.toString();
}

class Pegawai {
  int? id;
  String? nama;
  String? tanggalLahir;
  String? jenisKelamin;

  Pegawai({this.id, this.nama, this.tanggalLahir, this.jenisKelamin});

  Pegawai.fromJson(Map<String, dynamic> json) {
    id = json['id'];
    nama = json['nama'];
    tanggalLahir = json['tanggal_lahir'];
    jenisKelamin = json['jenis_kelamin'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['id'] = this.id;
    data['nama'] = this.nama;
    data['tanggal_lahir'] = this.tanggalLahir;
    data['jenis_kelamin'] = this.jenisKelamin;
    return data;
  }

  @override
  String toString()
  =>
      "id:" + this.id.toString() +
          ", nama: " + this.nama.toString() +
          ", tanggal lahir: " + this.tanggalLahir.toString() +
          ", jenis kelamin: " + this.jenisKelamin.toString();
}

|-Mengubah Nilai Objek Melalui setState

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
void main() => runApp(MaterialApp(home: Utama()));

class Utama extends StatefulWidget{
  @override
  State<StatefulWidget> createState() => MyAppState();

}

class MyAppState extends State{
  Kotak square = new Kotak();

  @override
  void iniState(){
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    Future.delayed(
      Duration(seconds: 2),
        () => {
          //objek dapat diubah melalui setState
          setState(() {
            square.tinggi = 300;
            square.tampil = !square.tampil;
          }
          )
        }
    );
    return Scaffold(
        body:
        AnimatedContainer (
            duration: Duration (seconds: 2),
            width: square.lebar,
            height: square.tinggi,
            color: square.warna
        )
    );
  }
}

class Kotak{
  MaterialColor warna = Colors.yellow;
  double tinggi = 200;
  double lebar = 200;
  bool tampil = false;
}

Pelatihan Mobile Programming with Flutter hari kedua (10/8/2021) sebagai bagian dari penggunaan dana hibah PKKM tahun anggaran 2021 dengan mentor Faizal Rahman (https://pdsi.unisayogya.ac.id/unisa-yogyakarta-menerima-bantuan-pemerintah-pkkm-tahun-anggaran-2021/). [bst]

Sumber:

By basit

Biro Pengembangan Teknologi Dan Sistem Informasi

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.