Flutter Dasar

Pertemuan #2

oleh : k4ilham & LT

Toko Kopi Haqiqi Cilebut, 13 Juli 2019

Materi Pertemuan#2

Basic Dart
Parsing Data
Card Widget
StateFul Widget

Basic Dart

https://dartpad.dartlang.org/

https://www.petanikode.com/belajar-dart/

Heloo Bro!

main() {
  print('Hello Bro!');
}

Variabel & Tipe Data

void main(){
    // membaut variabel dengan tipe data
    String nama = "Dian";
    int umur = 23;
    double tinggi = 180.43;
    bool isMenikah = false;

    // membuat veriabel dengan kata kunci var
    var alamat = "Lombok, Indonesia";

    // mencetak variabel
    print("Nama saya $nama. Umur $umur tahun. Tinggi sekitar $tinggi cm.");
    print("Menikah: $isMenikah");
    print("Alamat: $alamat");
}

Operator

main() {
  print("PROGRAM OPERATOR");

  double a = 5;
  double b = 2;

  double hasil;

  // operator penjumlahan
  hasil = a + b;
  print("$a + $b = $hasil");
  
  // operator pengurangan
  hasil = a - b;
  print("$a - $b = $hasil");
  
  // operator perkalian
  hasil = a * b;
  print("$a * $b = $hasil");
  
  // operator pembagian
  hasil = a / b;
  print("$a / $b = $hasil");
  
  // operator sisa bagi
  hasil = a % b;
  print("$a % $b = $hasil");

}

If

void main(){
    print("### Program Kasir ###");
    int totalBelanja = 200000;

    if( totalBelanja >= 100000 ){
        print("Selamat anda dapat hadiah!");
    }
}

If Else

main(){
  print("=== Login ===");

  String password = "teh";

  // cek password yang diinputkan
  if(password == "kopi"){
    print("Selamat datang bos!");
  } else {
    print("Kamu siapa? Pergi sana!");
  }
}

If Majemuk

main(){
  print("*** Program Grade ***");


  int nilai = 64;

  String grade;

  if(nilai >= 90) grade = "A+";
  else if(nilai >= 80) grade = "A";
  else if(nilai >= 70) grade = "B+";
  else if(nilai >= 60) grade = "B";
  else if(nilai >= 50) grade = "C+";
  else if(nilai >= 40) grade = "C";
  else if(nilai >= 30) grade = "D";
  else if(nilai >= 20) grade = "E";
  else grade = "F";

  print("Grade: $grade");
  
}

Switch Case

main(){
  print("~~~ Quote Harian ~~~");
 
  String hari = "sabtu";

  String quote;

  switch(hari){
    case "senin": {
      quote = "Mari kita mulai dari senin";
      break;
    }
    case "selasa": {
      quote = "Selesaikan tugas, dan bersantailah";
      break;
    }
    case "rabu": {
      quote = "Serbu! hari ini penuh semangat!";
      break;
    }
    case "kamis": {
      quote = "Meski hujan gerimis, aku belajar coding";
      break;
    }
    case "jumat": {
      quote = "Jum'at berkah";
      break;
    }
    case "sabtu": {
      quote = "Tenangkan jiwa di hari akhir!";
      break;
    }
    case "minggu": {
      quote = "Selamat berlibur!";
      break;
    }
    default: {
      quote = "Hari yang anda masukan salah!";
    }
  }

  print(quote);
}

Operator Ternary

main(){
  print("apakah kamu suka aku?");
  String jawab = 't';

  // menggunakan operator ternary sebagai ganti if/esle
  var hasil = (jawab == 'y') ? "menikah" : "jomblo lagi";

  print("Selamat kamu $hasil");
}

For

main(){
  print("Jumlah perulangan: ");
  int n = 10;

  for(int i = 1; i <= n; i++){
    print("Perulangan ke-$i");
  }
}

For Each

main() {
  var languages = ["C", "C++", "Java", "Dart", "Javascript"];

  for(var language in languages){
    print(language);
  }

  print("Total bahasa: ${languages.length}");
}

Function

int luasPersegi(int sisi){
  return sisi * sisi;
}

main(){
  print("--- Program luas persegi ---");
  print("Input panjang sisi: ");
  int s = 5;

  // memanggil fungsi
  int hasil = luasPersegi(s);

  print("Luas: $hasil");
}

Class

class Person{
  String _name;
  var _address;

  String getName(){
    return this._name;
  }

  void setName(String name){
    this._name = name;
  }

  String getAddress(){
    return this._address;
  }

  void setAddress(String address){
    this._address = address;
  }
}

// fungsi main
main(){
  var dian = new Person();
  dian.setName("Dian");
  dian.setAddress("Lombok");

  print("Nama: ${dian.getName()}");
  print("Alamat: ${dian.getAddress()}");
}

Parsing Data

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

void main(){
  runApp(new MaterialApp(
    title: "Pertemuan 2",
    home: page1(),
  ));
}

main.dart

import 'package:flutter/material.dart';

class page1 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("Parsing Data"),
      ),
    );
  }
  
}

page1.dart

Card Widget

https://api.flutter.dev/flutter/material/Card-class.html

      body: Container(
        child: new Card(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[
              new Icon(
                Icons.home,
                color: Colors.pink,
                size: 100.0,
              ),
            ],
          ),
        ),
      ),

Custom Card

class customCard extends StatelessWidget{
  
  customCard({
    this.icon,
    this.teks,
    this.warnaIcon,
  });
  
  final IconData icon;
  final String teks;
  final Color warnaIcon;
  
  @override
  Widget build(BuildContext context) {
    
  }
  
}

Tambahkan dibawah class page 1

class customCard extends StatelessWidget{

  customCard({
    this.icon,
    this.teks,
    this.warnaIcon,
  });

  final IconData icon;
  final String teks;
  final Color warnaIcon;

  @override
  Widget build(BuildContext context) {
    return new Container(
      padding: new EdgeInsets.all(5.0),
      child: new Card(
        child: new Column(
          children: <Widget>[
            new Icon(
              icon,
              color: warnaIcon,
              size: 100.0,
            ),
            new Text(
              teks,
              style: new TextStyle(fontSize: 20.0),
            )
          ],
        ),
      ),
    );
  }

}

Pindahkan Widget Card pada page1 ke customcard

Panggil Widget customCard pada body

      body: new Container(
        child: new Column(
          crossAxisAlignment: CrossAxisAlignment.stretch,
          children: <Widget>[

            new customCard(
              icon: Icons.home,
              teks: "Home",
              warnaIcon: Colors.brown ,
            ),

            new customCard(
              icon: Icons.favorite,
              teks: "Favourite",
              warnaIcon: Colors.pink ,
            ),

            new customCard(
              icon: Icons.place,
              teks: "Place",
              warnaIcon: Colors.blue ,
            ),

            new customCard(
              icon: Icons.settings,
              teks: "Setting",
              warnaIcon: Colors.black ,
            ),

          ],
        ),
      )

Latihan

import 'package:flutter/material.dart';

class page2 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("Movie Card"),
        ),
        body: new Container(
          child: new Column(
            crossAxisAlignment: CrossAxisAlignment.stretch,
            children: <Widget>[

              new customCard(
                xImage: "images/spiderman.jpg",
                xIcon: Icons.favorite,
                xIconColor: Colors.pink ,
                xIconSize: 25.0,
                xTitle: "Spider-Man: Far from Home",
                xSubtitle: "Peter Parker dan teman-temannya melakukan perjalanan musim panas ke Eropa. Namun, mereka hampir tidak dapat beristirahat - Peter harus setuju untuk membantu Nick…",
                xCaptionButtonLeft: "Detail",
                xCaptionButtonRight: "Favourite",
              ),

              new customCard(
                xImage: "images/alita.jpg",
                xIcon: Icons.favorite,
                xIconColor: Colors.pink ,
                xIconSize: 25.0,
                xTitle: "Alita: Battle Angel",
                xSubtitle: "Ketika Alita terbangun tanpa ingatan tentang siapa dia di dunia masa depan yang tidak dia kenal, dia ditangkap oleh Ido, seorang dokter yang penuh kasih yang menyadari…",
                xCaptionButtonLeft: "Detail",
                xCaptionButtonRight: "Favourite",
              ),

            ],
          ),
        )
    );
  }

}

class customCard extends StatelessWidget{

  final IconData xIcon;
  final Color xIconColor;
  final double xIconSize;
  final String xTitle,xSubtitle,xCaptionButtonRight, xCaptionButtonLeft,xImage;

  customCard({
    this.xIcon,
    this.xIconColor,
    this.xIconSize,
    this.xImage,
    this.xTitle,
    this.xSubtitle,
    this.xCaptionButtonLeft,
    this.xCaptionButtonRight,
  });

  @override
  Widget build(BuildContext context) {
    return Center(
      child: Card(
        child: Column(
          mainAxisSize: MainAxisSize.min,
          children: <Widget>[
            ListTile(
              leading: Image.asset(xImage,fit: BoxFit.fill,),
              title: Text(xTitle),
              subtitle: Text(xSubtitle),
              trailing: Icon(
                xIcon,
                color: xIconColor,
              ),
            ),
            ButtonTheme.bar(
              child: ButtonBar(
                children: <Widget>[
                  FlatButton(
                    child: new Text(xCaptionButtonLeft),
                    onPressed: () {},
                  ),
                  FlatButton(
                    child: new Text(xCaptionButtonRight),
                    onPressed: () {},
                  ),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }

}

page2.dart

External Package

https://pub.dev/flutter

pubspec.yaml

Tambahkan Package

english_words: ^3.1.5

kemudian klik Package Get

english word

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

class page3 extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    
    final kataAcak = WordPair.random();
    
    return new Scaffold(
        appBar: new AppBar(
          title: new Text("English Word"),
        ),
        body: new Center(
          child: new Text(kataAcak.asCamelCase),
        ),
    );
  }

}

Stateful Widget

Merupakan Widget yang dapat berubah dinamis. Jadi apapun Widget yang berubah, ya itu disebut dengan Stateful Widget.

Contohnya kita membuat sebuah aplikasi dimana jika setiap kita memencet tombol “+1”. Angka yang ada di tengah tampilan akan bertambah satu.

https://medium.com/meduru-course/memahami-perbedaan-stateless-vs-stateful-widget-flutter-e8ea12e46ac

StatefulWidget



class kataAcak extends StatefulWidget {
  @override
  kataAcakState createState() => new kataAcakState();
}

class kataAcakState extends State<kataAcak> {
  @override
  Widget build(BuildContext context) {
    final WordPair kata = new WordPair.random();
    return new Text(kata.asUpperCase);
  }
}

Source Lengkap

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

class page3 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new Scaffold(
      appBar: new AppBar(
        title: new Text("StateFul Widget"),
      ),
      body: new Center(
        child: new kataAcak(),
      ),
    );
  }
}

class kataAcak extends StatefulWidget {
  @override
  kataAcakState createState() => new kataAcakState();
}

class kataAcakState extends State<kataAcak> {
  @override
  Widget build(BuildContext context) {
    final WordPair kata = new WordPair.random();
    return new Text(kata.asUpperCase);
  }
}

Bonus : iOS Style

https://flutter.dev/docs/development/ui/widgets/cupertino

import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import './hal1.dart';

void main(){
  runApp(
      new CupertinoApp(
        home: hal1(),
      )
  );
}

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

class hal1 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {

    return CupertinoPageScaffold(
      navigationBar: CupertinoNavigationBar(
        middle: Text(
            "Pertemuan 2"),
      ),
      child: Center(
        child: Text(
            "Halo Ilham"),
      ),
    );
  }
}

main.dart

hal1.dart

Bonus : Flutter Animation

https://www.2dimensions.com/

Bonus :Flutter Web

https://github.com/flutter/flutter_web#install-the-flutter_web-build-tools

http://kailham.com/flutterweb/#/

meetap_flutter_basic_02

By Maulana Ilham

meetap_flutter_basic_02

1,127

Flutter Dasar

Pertemuan #2

Toko Kopi Haqiqi Cilebut, 13 Juli 2019

Materi Pertemuan#2

Basic Dart

Heloo Bro!

Variabel & Tipe Data

Operator

If

If Else

If Majemuk

Switch Case

Operator Ternary

For

For Each

Function

Class

Parsing Data

Card Widget

Custom Card

Latihan

External Package

pubspec.yaml

english word

Stateful Widget

StatefulWidget

Source Lengkap

Bonus : iOS Style

Bonus : Flutter Animation

Bonus :Flutter Web

meetap_flutter_basic_02

More from Maulana Ilham