Flutterize : Membuat Todo List App Menggunakan Flutter dan Cloud Firestore (PART 2)

Flutterize : Membuat Todo List App Menggunakan Flutter dan Cloud Firestore (PART 2)

Setelah kemarin kita berhasil menampilkan list data dari database yang sudah dibuat di Cloud Firestore, pada postingan ini kita akan membuat operasi insert ke dalam database Cloud Firestore.

Jika belum melihat postingan sebelumnya, silahkan dilihat terlebih dahulu. Link disediakan di bawah.
Flutterize : Membuat Todo List App Menggunakan Flutter dan Cloud Firestore (PART 1)

Pertama, buat Floating Button di pojok kanan bawah untuk berpindah ke screen untuk insert data.

floatingActionButton: FloatingActionButton(
  child: Icon(Icons.add),
  onPressed: () {},
),

Kedua, buat class baru untuk menampung tampilan form insert.

class InsertScreen extends StatefulWidget{
  @override
  State<StatefulWidget> createState() {
    return InsertScreenState();
  }
}

class InsertScreenState extends State<InsertScreen>{
  @override
  Widget build(BuildContext context) {
    return Scaffold();
  }
}

Selanjutnya, buat App Bar. Sehingga kodenya menjadi seperti ini.

class InsertScreenState extends State<InsertScreen>{
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Add New Task"),
        leading: IconButton(
          onPressed: () => Navigator.pop(context),
          icon: Icon(Icons.arrow_back),
        ),
      ),
    );
  }
}

Selanjutnya, buat form untuk memasukkan value yang akan di kirim ke database Cloud Firestore.

Buat controller untuk field nya terlebih dahulu.

TextEditingController titleTaskController = TextEditingController();
TextEditingController descTaskController = TextEditingController();

Setelah itu buat layoutnya.

body: SingleChildScrollView(
  padding: EdgeInsets.all(20),
  child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "Task Name",
          style: TextStyle(
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(
          height: 8,
        ),
        TextFormField(
          validator: (value) {
            if (value.isEmpty || value.trim().length == 0) {
              return "Task name cannot be empty";
            }
            return null;
          },
          controller: titleTaskController,
          style: TextStyle(
            color: Colors.black,
          ),
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: "Insert Task Name....",
          ),
        ),
        SizedBox(
          height: 12,
        ),
        Text(
          "Task Description",
          style: TextStyle(
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(
          height: 8,
        ),
        TextFormField(
          controller: descTaskController,
          validator: (value) {
            if (value.isEmpty || value.trim().length == 0) {
              return "Task description cannot be empty";
            }
            return null;
          },
          style: TextStyle(
            color: Colors.black,
          ),
          maxLines: 4,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: "Insert Task Description....",
          ),
        ),
        SizedBox(
          height: 24,
        ),
        FlatButton(
          minWidth: MediaQuery.of(context).size.width,
          padding: EdgeInsets.all(10),
          color: Colors.blue,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text(
            "Submit",
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
          onPressed: () {
            if (insertFormKey.currentState.validate()){

            } else {

            }
          },
        ),
      ],
  ),
),

Jangan lupa memasukkan layout tersebut kedalam widget Form supaya bisa membuat validasi form. Sehingga kode menjadi seperti ini.

body: SingleChildScrollView(
  padding: EdgeInsets.all(20),
  child: Form(
    autovalidateMode: AutovalidateMode.always,
    key: insertFormKey,
    child: Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        Text(
          "Task Name",
          style: TextStyle(
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(
          height: 8,
        ),
        TextFormField(
          validator: (value) {
            if (value.isEmpty || value.trim().length == 0) {
              return "Task name cannot be empty";
            }
            return null;
          },
          controller: titleTaskController,
          style: TextStyle(
            color: Colors.black,
          ),
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: "Insert Task Name....",
          ),
        ),
        SizedBox(
          height: 12,
        ),
        Text(
          "Task Description",
          style: TextStyle(
            fontWeight: FontWeight.w600,
          ),
        ),
        SizedBox(
          height: 8,
        ),
        TextFormField(
          controller: descTaskController,
          validator: (value) {
            if (value.isEmpty || value.trim().length == 0) {
              return "Task description cannot be empty";
            }
            return null;
          },
          style: TextStyle(
            color: Colors.black,
          ),
          maxLines: 4,
          decoration: InputDecoration(
            border: OutlineInputBorder(),
            hintText: "Insert Task Description....",
          ),
        ),
        SizedBox(
          height: 24,
        ),
        FlatButton(
          minWidth: MediaQuery.of(context).size.width,
          padding: EdgeInsets.all(10),
          color: Colors.blue,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(10),
          ),
          child: Text(
            "Submit",
            style: TextStyle(
              color: Colors.white,
              fontSize: 20,
            ),
          ),
          onPressed: () async {},
        ),
      ],
    ),
  ),
),

Tambahkan juga key form nya.

final insertFormKey = GlobalKey<FormState>();

Setelah itu, tambahkan library rflutter_alert dan juga progress_dialog di pubspec.yaml.

rflutter_alert: any
progress_dialog: any

Buat layout untuk loading, success alert, dan juga error alertnya.

ProgressDialog progressDialog(BuildContext ctx) {
  ProgressDialog loadingDialog = ProgressDialog(
    ctx,
    type: ProgressDialogType.Normal,
    isDismissible: false,
  );
  loadingDialog.style(
    message: "Loading",
    progressWidget: Container(
      padding: EdgeInsets.all(8.0),
      child: CircularProgressIndicator(
        backgroundColor: Colors.blue,
      ),
    ),
    backgroundColor: Colors.white,
    elevation: 10.0,
    insetAnimCurve: Curves.easeInOut,
    messageTextStyle: TextStyle(
      color: Colors.blue,
    ),
  );
  return loadingDialog;
}

successAlert(String title, String subtitle, BuildContext ctx) {
  return Alert(
    context: ctx,
    title: title,
    desc: subtitle,
    type: AlertType.success,
    buttons: [
      DialogButton(
        onPressed: () {
          Navigator.pop(ctx);
        },
        child: Text(
          "Ok",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ],
    style: AlertStyle(
      animationType: AnimationType.grow,
      isCloseButton: false,
      isOverlayTapDismiss: false,
      descStyle: TextStyle(fontWeight: FontWeight.bold),
      descTextAlign: TextAlign.center,
      animationDuration: Duration(milliseconds: 400),
      alertBorder: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(
          color: Colors.grey,
        ),
      ),
      titleStyle: TextStyle(
        color: Colors.blue,
      ),
      alertAlignment: Alignment.center,
    ),
  ).show();
}

errorAlert(String title, String subtitle, BuildContext ctx) {
  return Alert(
    context: ctx,
    title: title,
    desc: subtitle,
    type: AlertType.warning,
    buttons: [
      DialogButton(
        onPressed: () => Navigator.pop(ctx),
        child: Text(
          "OK",
          style: TextStyle(color: Colors.white, fontSize: 20),
        ),
      ),
    ],
    style: AlertStyle(
      animationType: AnimationType.grow,
      isCloseButton: false,
      isOverlayTapDismiss: false,
      descStyle: TextStyle(fontWeight: FontWeight.bold),
      descTextAlign: TextAlign.center,
      animationDuration: Duration(milliseconds: 400),
      alertBorder: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(10),
        side: BorderSide(
          color: Colors.grey,
        ),
      ),
      titleStyle: TextStyle(
        color: Colors.red,
      ),
      alertAlignment: Alignment.center,
    ),
  ).show();
}

Selanjutnya, buat proses insert dari form yang sudah kita buat tadi. Tempatkan proses nya ketika tombol submit di tekan.

if (insertFormKey.currentState.validate()){
  progressDialog(context).show();
  DocumentReference result = await Firestore.instance.collection('todo').add(<String, dynamic>{
    'task' : titleTaskController.text.toString(),
    'description' : descTaskController.text.toString(),
  });
  if (result.documentID != null){
    progressDialog(context).hide();
    successAlert("Success", "Success Insert Task", context);
  } else {
    progressDialog(context).hide();
    errorAlert("Failed", "Failed to Insert Task", context);
  }
} else {
  errorAlert("Failed", "Please fill all the fields", context);
}

Setelah itu tambahkan route dari MyHomePage menuju InsertScreen pada FloatingActionButton.

floatingActionButton: FloatingActionButton(
child: Icon(Icons.add),
onPressed: () => Navigator.push(
context,
MaterialPageRoute(
builder: (context) => InsertScreen(),
)),
),

Nah Setelah sampai sini, bisa dicoba. Namun list nya tidak akan berubah kecuali aplikasi di restart.

Solusinya adalah dengan merubah parent widget ListView dari FutureBuilder menjadi StreamBuilder. Berikut adalah kodenya.

body: StreamBuilder<QuerySnapshot>(
stream: Firestore.instance.collection('todo').snapshots(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.blue,
),
);
}
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data.documents[index]['task']),
subtitle: Text(snapshot.data.documents[index]['description']),
);
},
);
},
),

Maka aplikasi nya akan menjadi seperti ini.

Untuk proses edit, dan delete nya akan ada di artikel selanjutnya.

See Ya’

Link Project : Github

Flutterize : Membuat Todo List App Menggunakan Flutter dan Cloud Firestore (PART 1)

Flutterize : Membuat Todo List App Menggunakan Flutter dan Cloud Firestore (PART 1)

Pada kesempatan kali ini, kita akan membuat aplikasi Todo List menggunakan Flutter dan Firebase Cloud Firestore. Khusus untuk post kali ini, kita akan membahas mengenai cara membaca data atau get data dari Firestore. Untuk proses Insert, Edit, dan Delete nya akan ada di post selanjutnya.

Sebelum lanjut pembuatan aplikasi nya, kita akan berkenalan dahulu dengan Cloud Firestore ini.

Cloud Firestore adalah database yang fleksibel dan skalabel untuk pengembangan seluler, web, dan server di Firebase dan Google Cloud Platform.

– Documentasi Firestore

Dengan kata lain, Firestore merupakan cloud database yang bermodelkan NoSQL. Firestore menyimpan data sebagai kumpulan dokumen. Sedangkan Realtime Database menyimpan data sebagai JSON. Cloud Firestore juga menampilkan kueri yang lebih kaya dan lebih cepat serta menskalakan lebih jauh daripada Realtime Database.

Menyiapkan Projek di Firebase

Siapkan akun Google di Firebase nya. Masuk ke Console.

Pertama, buat project di Firebase terlebih dahulu.

Selanjutnya, buat inisialisasi projeknya dan berikan konfigurasi dasar seperti dibawah.

Selanjutnya, kita akan di bawa ke dashboard dari console Firebase. Tambahkan projek sesuai dengan platform yang akan dibuat. Untuk kali ini, kita akan memilih platform android.

Karena kita akan membuat aplikasi android, maka kita pilih platformnya. Dilangkah pertama ini, masukkan nama package dan juga nama aplikasinya (optional). Untuk sementara, kode sertifikat SHA-1 nya di kosongkan.

Di step kedua, download file JSON yang telah di generate oleh Firebase. File ini akan disimpan di folder android/app/ .

Di step ketiga akan di beritahu untuk menambahkan Firebase SDK. (step ini akan di bahas selanjutnya).

Selesaikan pendaftaran aplikasi androidnya.

Inisialisasi Cloud Firestore

Selanjutnya, pilih Cloud Firestore yang ada di sidebar console, lalu pilih Buat database. Atur Firestore ke dalam metode pengujian. Lokasi server bisa disesuaikan dengan preferensi.

Instalasi Plugin

Beralih ke projek flutternya yang sudah dibuat menggunakan Android Studio atau Visual Studio Code. Tambahkan file google-services.json yang telah kita download ke direktori project flutter nya. Masukkan ke android/app/

Tambahkan dependency google services di direktori android/build.gradle.

dependencies {
        classpath 'com.android.tools.build:gradle:3.5.0'
        classpath "org.jetbrains.kotlin:kotlin-gradle-plugin:$kotlin_version"
        classpath 'com.google.gms:google-services:4.3.3'
    }

Pada direktori android/app/build.gradle apply plugin google services dan juga tambahkan dependency google services serta firebase core.

apply plugin: 'com.android.application'
apply plugin: 'kotlin-android'
apply from: "$flutterRoot/packages/flutter_tools/gradle/flutter.gradle"
apply plugin: 'com.google.gms.google-services'
dependencies {
    implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
    implementation 'com.google.gms:google-services:4.3.3'
    implementation 'com.google.firebase:firebase-core:17.4.4'
}

Jangan lupa juga menambahkan setting untuk multi dex supaya tidak muncul error seperti ini.

Solusi nya adalah dengan mengatur multi dex menjadi enabled. Pengaturannya terdapat pada android/app/build.gradle

defaultConfig {
applicationId "com.quifar.todo_list_firestore"
minSdkVersion 16
targetSdkVersion 29
versionCode flutterVersionCode.toInteger()
versionName flutterVersionName
multiDexEnabled true
}
dependencies {
implementation "org.jetbrains.kotlin:kotlin-stdlib-jdk7:$kotlin_version"
implementation 'com.google.gms:google-services:4.3.3'
implementation 'com.google.firebase:firebase-core:17.4.4'
implementation 'com.android.support:multidex:1.0.3'
implementation "androidx.multidex:multidex:2.0.1"
}

Tambahkan dependency Flutter cloud_firestore dan juga firebase_core pada file pubspec.yaml

dependencies:
  flutter:
    sdk: flutter
  cupertino_icons: ^1.0.1
  cloud_firestore: ^0.13.5
  firebase_core: ^0.4.0+9

Selanjutnya pada teminal (sesuaikan dengan direktori project), ketikkan command dibawah.

flutter pub get

Selanjutnya, kita pindah ke Firestore di Console Firebase. Lalu pilih mulai koleksi. Isi nama koleksi sesuai dengan keinginan.

Lalu tambahkan dokumen pertamanya. Klik ID Otomatis untuk menggunakan id unik otomatis. Jangan lupa Tambahkan kolom beserta isinya untuk inisialisasi koleksi.

Kembali ke projek Flutternya. Bersihkan file lib/main.dart dari komentar supaya lebih rapih. Serta jadikan class _MyHomePageState menjadi seperti ini.

Coding

Selanjutnya tambahkan plugin cloud_firestore import

import 'package:cloud_firestore/cloud_firestore.dart';

pada parameter body kita akan menggunakan Widget FutureBuilder untuk mengambil data dari koleksi Firestore yang sudah kita buat. Parameter future nya diisikan code yang akan return hasil query dari Cloud Firestore.

body: FutureBuilder(
  future: Firestore.instance.collection('todo').getDocuments(),
),

Selanjutnya, tambahkan builder pada widget tersebut untuk membuat Loading CircleProgressIndicator dan juga ListView untuk menampung hasil query yang kita buat sebelumnya.

builder: (context, snapshot) {
  if (!snapshot.hasData) {
    return Center(
      child: CircularProgressIndicator(
        backgroundColor: Colors.blue,
      ),
    );
  }
},

Kode diatas akan mengatasi jika querynya belum atau tidak memiliki data maka akan ditampilkan Loading CircleProgressIndicator.

Selanjutnya, kita akan membuat kode yang akan mengatasi ketika query memiliki hasil atau data. Buat return menjadi ListView.builder seperti ini.

body: FutureBuilder(
  future: Firestore.instance.collection('todo').getDocuments(),
  builder: (context, snapshot) {
    if (!snapshot.hasData) {
      return Center(
        child: CircularProgressIndicator(
          backgroundColor: Colors.blue,
        ),
      );
    }
    return ListView.builder();
  },
),

Lalu berikan parameter itemCount dan isi dengan panjang dari datanya.

return ListView.builder(
  itemCount: snapshot.data.documents.length,
);

Selanjutnya, kita buat layout dari ListView tersebut. Kita akan menggunakan widget ListTile.

return ListView.builder(
  itemCount: snapshot.data.documents.length,
  itemBuilder: (context, index) {
    return ListTile();
  },
);

Di dalam ListTile kita akan menampilkan kolom ‘title’ dan juga ‘description’.

return ListView.builder(
  itemCount: snapshot.data.documents.length,
  itemBuilder: (context, index) {
    return ListTile(
      title: Text(snapshot.data.documents[index]['task']),
      subtitle: Text(snapshot.data.documents[index]['description']),
    );
  },
);

Pada hasil akhir, kodenya akan menjadi seperti ini.

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

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

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

class MyHomePage extends StatefulWidget {
MyHomePage({Key key, this.title}) : super(key: key);
final String title;

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

class _MyHomePageState extends State<MyHomePage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(widget.title),
),
body: FutureBuilder(
future: Firestore.instance.collection('todo').getDocuments(),
builder: (context, snapshot) {
if (!snapshot.hasData) {
return Center(
child: CircularProgressIndicator(
backgroundColor: Colors.blue,
),
);
}
return ListView.builder(
itemCount: snapshot.data.documents.length,
itemBuilder: (context, index) {
return ListTile(
title: Text(snapshot.data.documents[index]['task']),
subtitle: Text(snapshot.data.documents[index]['description']),
);
},
);
},
),
);
}
}

Hasil Akhir

Tampilan nya akan menjadi seperti ini.

Untuk proses insert, edit, dan delete nya akan ada di artikel selanjutnya.

See Ya’

Link Project : Github

Tutorial Flutter #9 – Mengenal dan Memahami Row Widget

Tutorial Flutter #9 – Mengenal dan Memahami Row Widget

Mengenal dan Memahami Row Widget di Flutter. Row widget merupakan salah satu widget yang paling banyak digunakan. Widget ini biasa digunakan untuk membentuk suatu blok yang bersifat horizontal. Di dalamnya, kita bisa menyisipkan beberapa widget di dalam bungkus property childrennya.

Kemampuan seperti itu bisa dimanfaatkan untuk membuat slide, membuat blok-blok tersusun dan masih banyak hal lainnya. Oleh sebab itu, dalam membangun aplikasi mobile menggunakan Flutter, Row Widget begitu powerful dan siap digunakan.

Perhatikan gambar di bawah ini:

Tutorial Flutter #9 – Mengenal dan Memahami Row Widget

Melalui gambar di atas kita dapat melihat blok berwarna tersebut membentang secara horizontal. Selain itu Row widget memiliki beberapa property yang bisa digunakan seperti mainAxixAlignment start, center, end, spaceBetween, scapeEvenly dan spaceAround.

Masing-masing dampak penggunaan valuenya nampak jelas pada gambar di atas.

Sekarang, apakah sudah siap untuk mempelajari Row Widget?

Mulai dari konsep ini:

Row(
    children: <Widget>[
    // widget here
    ],
) 

Blok-blok yang ingin kita buat berada di dalam children Row. Kita bisa memasukan widget yang sesuai dengan aplikasi yang mau dibangun. Dan pastinya perlu diteliti apakah widget yang digunakan cocok pada Row atau tidak.

Agar pemahaman kita terhadap row widget ini semakin matang, mari kita coba dengan membuat contohnya seperti gambar di bawah ini:

Tutorial Flutter #9 – Mengenal dan Memahami Row Widget

Let’s go!

Step #1 – Buat StatelessWidget

Alasannya sederhana, kita tidak sedang membicarakan widget yang dinamis. Jadi kita buat Stateless saja sebagai contoh.

import 'package:flutter/material.dart';
 class RowExample extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
         // Kode here
     );
   }
 }

Step #2 – Tambahkan Padding dan Row

Padding berfungsi untuk memberikan jarak antara border dan content. Pada contoh ini saya menggunakan top untuk memberikan jarak antar contoh dan appBar.

import 'package:flutter/material.dart';

class RowExample extends StatelessWidget {
   @override
   Widget build(BuildContext context) {
     return Scaffold(
       appBar: AppBar(
         title: Text("Row Example"),
       ),
       body: Padding(
         padding: const EdgeInsets.only(top: 20),
         child: Row(
           children: [
               // Kode here
           ],
         ),
       ),
     );
   }
 }

Step #3 – Tambahkan Container

Pada step ini container saya butuhkan untuk membuat blok tertentu dengan masing-masing ukuran yang sama dengan gambar yang berbeda.

 import 'package:flutter/material.dart';

class RowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Row Example"),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 20),
        child: Row(
          children: <Widget>[
          
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
            ),
            Container(
              color: Colors.green,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
} 

Step #4 – Tambahkan Text dan Style

Text dan style bertujuan untuk memberikan text pada masing-masing container.

 import 'package:flutter/material.dart';

class RowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Row Example"),
      ),
      body: Padding(
        padding: const EdgeInsets.only(top: 20),
        child: Row(
          children: <Widget>[
          
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
              child: Center(child: Text("Kolom 1", style: TextStyle(color: Colors.white, fontSize: 20),),),
            ),
            Container(
              color: Colors.yellow,
              height: 100,
              width: 100,
              child: Center(child: Text("Kolom 2", style: TextStyle(color: Colors.white, fontSize: 20),),)
            ),
            Container(
              color: Colors.green,
              height: 100,
              width: 100,
              child: Center(child: Text("Kolom 3", style: TextStyle(color: Colors.white, fontSize: 20),),)
            ),
          ],
        ),
      ),
    );
  }
} 

Step #5 – Final Project

Sebenarnya pada step 4 kita sudah mencapai final project. Sekarang kita coba tambahkan class RowExample di main.dart.

// import  
import 'package:flutter/material.dart';  
import 'package:latihan/row_example.dart'; 
// Kode here
home: RowExample(),

Kesimpulan

Mengenal dan memahami Row Widget di kesempatan kali ini cukup mudah. Tutorial saya sampaikan dengan sedetail mungkin sambal berharap kita bisa mempraktikkannya dengan mudah.

Aamin.

Selamat belajar.

Tutorial Flutter #8 – Mengenal dan Memahami Stack Widget

Tutorial Flutter #8 – Mengenal dan Memahami Stack Widget

Tutorial mengenal dan memahami stack widget di flutter. Stack Widget merupakan widget yang memungkinkan kita untuk memasang beberapa lapis widget di layar.

Widget ini mengambil banyak anak dan memesannya dari bawah ke atas.

Jadi, item pertama adalah yang paling bawah dan yang terakhir adalah yang paling atas.

Contoh:

 Stack(
  children: <Widget>[
    Bottom(),
    Middle(),
    Top(),
  ],
), 

Untuk lebih jelasnya, coba lihat gambar di bawah ini:

Tutorial mengenal dan memahami stack widget di flutter.

Dari gambar di atas maka dapat disimpulkan bahwa urutan kode program menempatkan top di urutan ke 3, sementara dalam hasilnya posisi top berada di atas.

Jadi apapun yang berada di akhir children Stack, maka akan tampil di paling atas.

Contoh Kode:

 import 'package:flutter/material.dart';

class StackExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      color: Colors.white,
      child: Stack(
        children: <Widget>[
          Container(
            width: 300,
            height: 300,
            color: Colors.blue[200],
          ),
          Container(
            width: 200,
            height: 200,
            color: Colors.red[200],
          ),
          Container(
            width: 100,
            height: 100,
            color: Colors.yellow[200],
          )
        ],
      ),
    );
  }
}

Hasilnya:

Tutorial mengenal dan memahami stack widget di flutter.

Praktik Menggunakan Stack Widget

Ini adalah contoh bagaimana kita menggunakan stack widget untuk membuat tampilan semakin menarik. Berikut contoh hasilnya:

Tutorial mengenal dan memahami stack widget di flutter.

Mari kita membuatnya:

Step #1 – Buat Stack

Stack(
  children: <Widget>[

  ],
) 

Step #2 – Tambahkan Sebuah Background

Container(
  decoration: BoxDecoration(
    image: DecorationImage(
      image: AssetImage('images/new_york.jpg'),
      fit: BoxFit.fitHeight,
    ),
  ),
), 

Step #3 – Tambahkan Card widget dan Detail

Card(
  elevation: 8.0,
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(8.0),
  ),
  child: Column(
    children: <Widget>[
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
          "New York",
          style: TextStyle(
            fontSize: 20.0,
            fontWeight: FontWeight.bold,
          ),
        ),
      ),
      Padding(
        padding: const EdgeInsets.all(16.0),
        child: Text(
            "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
      ),
    ],
  ),
), 

Step #4 – Atur posisi Card

Positioned(
  bottom: 48.0,
  left: 10.0,
  right: 10.0,
  child: Card(
    elevation: 8.0,
    shape: RoundedRectangleBorder(
      borderRadius: BorderRadius.circular(8.0),
    ),
    child: Column(
      children: <Widget>[
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
            "New York",
            style: TextStyle(
              fontSize: 20.0,
              fontWeight: FontWeight.bold,
            ),
          ),
        ),
        Padding(
          padding: const EdgeInsets.all(16.0),
          child: Text(
              "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
        ),
      ],
    ),
  ),
), 

Final Code:

import 'package:flutter/material.dart';

class Stack2 extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        children: <Widget>[
          Container(
            decoration: BoxDecoration(
              image: DecorationImage(
                image: AssetImage('images/new_york.jpg'),
                fit: BoxFit.fitHeight,
              ),
            ),
          ),
          Positioned(
            bottom: 48.0,
            left: 10.0,
            right: 10.0,
            child: Card(
              elevation: 8.0,
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(8.0),
              ),
              child: Column(
                children: <Widget>[
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                      "New York",
                      style: TextStyle(
                        fontSize: 20.0,
                        fontWeight: FontWeight.bold,
                      ),
                    ),
                  ),
                  Padding(
                    padding: const EdgeInsets.all(16.0),
                    child: Text(
                        "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book."),
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }
} 

Kesimpulan

Banyak hal yang bisa kita eksplor dengan menggunakan Stack ini. Semangat terus buat berlatih dan cobalah untuk mengenal dan memahami stack widget ini lebih lanjut.

Semoga bermanfaat dan tetap terus belajar.

Tutorial Flutter #7 – Memahami dan Mengenal Expanded Widget

Tutorial Flutter #7 – Memahami dan Mengenal Expanded Widget

Memahami dan mengenal Fitur Expanded Widget di Flutter. Expanded Widget merupakan sebuah widget yang memperluas anak dari Row, Column atau flex sehingga mengisi ruang yang tersedia.

Dengan menggunakan expanded widget, membuat children dari Row, Column dan flex meluas untuk mengisi ruang yang tersedia di sepanjang sumbu utama semisal horizontal maupun vertical.

Jika beberapa anak diperluas, ruang yang tersedia dibagi antara factor flex.

Expanded widget merupakan turunan dari Row, Column atau Flex dan hanya mendukung pada StatelessWidget dan StatefulWidget.

Agar lebih memahami tutorial kali ini saya akan memberikan dua contoh, yaitu:

  1. Expanded Column Widget
  2. Expanded Row Widget

Let’s go!

Expanded Column Widget

Kali ini kita akan mencoba membuat Expanded Widget dengan Column Widget. Jika membahas Column, artinya akan membuat Expanded secara vertical. Berikut kodenya:

import 'package:flutter/material.dart';

class ExpandedColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Column Sample'),
      ),
      body: Center(
        child: Column(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                width: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
}

Hasilnya:

Memahami dan Mengenal Expanded Widget

Expanded Row Widget

Kebalikan dari Column, Row akan memperluas secara horizontal. Berikut contoh kode dan hasilnya:

Kode:

import 'package:flutter/material.dart';

class ExpandedRowExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Expanded Row Sample'),
      ),
      body: Center(
        child: Row(
          children: <Widget>[
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
            Expanded(
              child: Container(
                color: Colors.amber,
                height: 100,
              ),
            ),
            Container(
              color: Colors.blue,
              height: 100,
              width: 100,
            ),
          ],
        ),
      ),
    );
  }
} 

Hasil:

Memahami dan Mengenal Expanded Widget

Kapan Harus Menggunakan Expanded Column Widget?

Expanded Column sebaiknya digunakan apabila kita ingin memperluas wilayah widget secara vertical.

Kapan Harus Menggunakan Expanded Row Widget?

Expanded Row Widget sebaiknya digunakan apabila kita ingin memperluas wilayah secara horizontal.

Penutup Mengenal dan Memahami Expanded Widget

Demikianlah tutorial salah satu fitur terbaik Flutter yaitu tentang expanded widget kali ini.

Semoga artikel ini bermanfaat.

Aamiin.

Tutorial Flutter #6 – Wrap Widget

Tutorial Flutter #6 – Wrap Widget

Pada edisi seri tutorial Flutter kali ini saya akan membahas tentang wrap widget. Flutter memiliki begitu banyak widget-widget yang bisa digunakan untuk membuat aplikasi mobile. Salah satunya yang menurut saya perlu Anda tahu adalah wrap.

Apa itu Wrap Widget?

Wrap widget mirip dengan Row dan Column namun dengan tambahan yang mampu menyesuaikan dengan ukuran layar yang tersedia. By default, wrap widget memiliki layout horizontal. Namun kita bisa membuatnya jika menginginkan layout secara vertikal. Dengan wrap widget kita bisa menyesuaikan ruang di antara children widget yang berdekatan dan garis sesuai dengan kabutuhan.

Bagaimana Wrap Widget Bekerja?

Biasanya layout yang tidak cukup atau melebihi garis pembatas akan mendapatkan tampilan warning. Meski bisa saja digunakan tetapi tidak bagus untuk ditampilkan dalam suatu aplikasi. Oleh sebab itu gunakanlah wrap widget agar widget-widget yang ada di dalam turunan wrap widget bisa otomatis mengambil baris baru.

Contohnya:

Tutorial Flutter #6– Wrap Widget

Pada gambar di atas terlihat sangat jelas bahwa Widget Container berwarna merah secara otomatis mengambil baris baru. Inilah keunggulan saat menggunakan wrap widget.

Contoh Source Code Flutter Wrap Widget

Belajar tanpa disertai praktik merupakan hal yang kurang lengkap. Oleh sebab itu Anda akan melihat dan membaca source code ini untuk mengimplementasikan wrap widget.

Berikut source codenya:

 import 'package:flutter/material.dart';

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

    return Container(
      color: Colors.green,
      child: Column( 
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Wrap(
            spacing: 8.0,
            runSpacing: 4.0,
            children: <Widget>[
              Container(
                color: Colors.yellow,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.red,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.white,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.brown,
                height: 100.0,
                width: 100.0,
              ),
              Container(
                color: Colors.grey,
                height: 100.0,
                width: 100.0,
              ),
            ],
          )
        ],
      ),
    );

  }
} 

Penjelasan:

  1. Penamaan Class. Saya memberikan contoh nama class WrapExample. Silahkan Anda menyesuaikan.
  2. Struktur yang saya gunakan ini tidak menggunakan appBar maupun bottomNavigation. SIlahkan tambahkan jika Anda memerlupannya.
  3. Memanggil return Container yang memiliki child Column. Tujuannya karena di Column memiliki property children. Sehingga kita bisa menambahkan beberapa widget.
  4. Kemudian menggunakan widget Wrap yang memiliki turunan container. Jika diperhatikan tanpa menggunakan Wrap maka layoutnya akan berantakan.

Kapan Harus Menggunakan Wrap Widget?

Saya menyarankan Anda menggunakan wrap widget ketika ada tumpukan widget yang begitu banyak, baik secara horizontal maupun vertikal. Dengan wrap maka tampilan tidak akan terpengaruh dan bisa menyesuaikan ukuran layar. Kalau di websiste itu namanya mobile responsive.

Penutup

Demikianlah ulasan saya tentang wrap widget di edisi kali ini. Semoga bermanfaat khususnya untuk Anda yang sedang memperdalam Flutter dan umumnya buat Anda semua. Aamiin.

flutter splashscreen

Cara Mudah Buat SplashScreen di Flutter

Sudah tahu cara membuat splashscreen di Flutter?

Jika belum, Anda berada di artikel yang tepat. Hari ini saya akan membahas cara membuat splashscreen di flutter. Splashscreen biasa digunakan pada saat pertama kali membuka aplikasi. Hampir semua aplikasi berbasis mobile mengunakan splashscreen.

Betul?

Membuat splashscreen di flutter bisa dikatakan sangat mudah. Hanya membutuhkan dua file saja untuk mencobanya. File pertama untuk Class SplashScreen. File kedua adalah Class Home.

Cara Gampang Buat SplashScreen di Flutter

Tanpa bermaksud lama-lama, mari kita mulai ngodingnya!

Step #1 – Buat file project flutter

flutter create --org=com.rumahcoding --androidx --description="Membuat Splashscreen di Flutter" flutter_splashscreen

Step #2 – Buat Class SplashScreen di Flutter

Buat file baru dengan nama splashscreen.dart di dalam folder lib.

Isi dari splashscreen.dart tersebut bisa Anda ikuti seperti ini:

import 'package:flutter/material.dart';
import 'dart:async';
import 'package:splashscreenproject/home.dart';


class SplashScreen extends StatefulWidget{

  _SplashScreen createState() => _SplashScreen();

}

class _SplashScreen extends State<SplashScreen>{

  void initState(){
    super.initState();
    splashscreenStart();
  }

  splashscreenStart() async{
    var duration = const Duration(seconds: 3);
    return Timer(duration, (){
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => Home()),

      );
    });
  }

  @override 
  Widget build(BuildContext context){

    return Scaffold(
      backgroundColor: Colors.blue,
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            
            Icon(
              Icons.school,
              size: 100.0,
              color: Colors.white,
            ),

            SizedBox(height: 24.0,),

            Text("SEKOLAHKU",
              style: TextStyle(
                color: Colors.white,
                fontWeight: FontWeight.bold,
                fontSize: 30.0,
              ),
            ),
            
          ],
        ),
      ),
    );
  }

}

Kami paham maksudnya, Anda butuh penjelasan kan?

Baik …

Perhatikan ya.

Baris ke 1 merupakan import async bawaan dart. Jadi Anda tidak perlu menginstall apapun.

Baris ke 2 adalah hal yang biasa di flutter. Material.dart ini selalu ada di setiap file yang berguna untuk membangun aplikasi.

Pada baris 4 – 7 kami menggunakan StatefulWidget karena Class ini selalu berubah-ubah. Bila Anda tidak keberatan silahkan kunjungi artikel perbedaan StatelessWidget dan StatefulWidget dahulu.

Class yang kami buat bernama SplashScreen. Karena itu, file ini wajib diketahui untuk dipanggil di main.dart nanti.

Baris ke 9 merupakan class turunan dari class Splashscreen. Di mana isi di dalamnya berupa state-state yang bisa diset maupun diget.

Baris ke 11 – 24 merupakan function yang akan dijalankan pertama kali saat aplikasi di jalankan. Buktinya dengan manambahkan void initState(). Dengan function ini, maka apa yang ada di dalamnya akan dijalankan pada saat class Splashscreen dipanggil.

Kebetulan yang dijalankan adalah function startSplashScreen(). Jadi function inilah yang dijalankan pertama kali saat class Splashscreen dipanggil.

Di dalam function itu terdapat duration dan timer. Dan yang tidak kalah ketinggalan adalah async. Kita bisa mengatur berapa durasi splashscreen yang dibutuhkan pada baris:

var duration = const Duration(seconds: 3);

Silahkan ubah di angka yang kami cetak tebal.

Kemudian Anda juga bisa mengatur setelah class Splashscreen di jalankan akan menuju ke class mana.

Perhatikan potongan kode berikut:

return Timer(duration, (){
      Navigator.push(
        context,
        MaterialPageRoute(builder: (context) => Home()),

      );
}); 

Contoh di atas, kami memanggil class Login. Anda bisa menyesuaikan sesuai aplikasi.

Baris ke 27 – 48 merupakan Widget yang akan ditampilkan saat class SplashScreen dipanggil. Terdapat 2 component Widget penting di dalamnya. Keduanya dibungkus dengan Column Widget.

Pertama widget Icon. Kami menggunakan widget ini sebagai alternatif apabila Anda tidak memiliki file gambar.

Kedua, Text. Widget ini saya gunakan untuk memberi keterangan aplikasi. Anda bisa menyesuaikan sesuai kebutuhan.

Cara Menjalankan Class SplashScreen

Kondisinya kami ingin menjalankan class ini. Oleh karena itu silahkan Anda buka file main.dart, kemudian cari kode:

home:  MyHomePage(title: 'Flutter Demo Homepage') 

Ubah menjadi:

home: SplashScreen()  

Sekarang Anda sudah bisa menjalankan command ini:

flutter run

Hasilnya:

Cara Mudah Buat SplashScreen di Flutter
Flutter Column Widget

Tutorial Flutter #4 – Column Widget

Rumahcoding.co.id – Pembahasan kali ini menyangkut salah satu Widget terbaik milik Flutter, yaitu Column Widget. Pengembangan aplikasi mobile dengan Flutter tidak terlepas dari widget-widget, maka dari itu penting buat siapa saja mempelajari Column Widget ini sebelum mengembangkan aplikasi Mobile dengan Flutter.

Apa itu Column Widget?

Column digunakan untuk menampilkan widget-widget secara vertical (dari atas ke bawah). Column merupakan salah satu widget yang sering digunakan programmer karena sebagian besar aplikasi membutuhkan direction vertical semisal untuk scroliing dan lain-lain

Constructor Column Widget

#1. mainAxixAlignment, berfungsi untuk mengontrol children widget yang ada di dalamnya dalam bentuk vertical.

Konsep mainAxixAlignment bisa Anda lihat melalui gambar ini:

Tutorial Flutter #4 - Column Widget

Sedangkan cara untuk menggunakan mainAxixAlignment cukup mudah, contohnya:

Column(mainAxixAlignment: MainAxixAlignment.start), Column(mainAxixAlignment: MainAxixAlignment.center),
Column(mainAxixAlignment: MainAxixAlignment.end),
Column(mainAxixAlignment: MainAxixAlignment.spaceAround),
Column(mainAxixAlignment: MainAxixAlignment.spaceBetween),
Column(mainAxixAlignment: MainAxixAlignment.Evenly),

Penggunaan Column Widget

Perhatikan gabar di bawah ini:

Tutorial Flutter #4 - Column Widget

Penjelasan:

  • Start digunakan jika Anda ingin menempatkan widget berada di sebelah kiri (left)
  • Center digunakan jika Anda ingin menempatkan widget berada di sebelah tengah (center)
  • End digunakan jika Anda ingin menempatkan widget berada di sebelah kanan (right)
  • spaceAround digunakan jika Anda ingin membuat ruang di antara children widget yang sama..
  • spaceBetween digunakan untuk membuat space di antara children widget yang sama.
  • spaceEvenly digunakan untuk membuat ruang yang sama dengan para children widget.

Baca Juga: Perbedaan Stateless dan Statefull Widget

#2. crossAxixAlignment, digunakan untuk mengontrol children yang ada di dalamnya dalam bentuk horizontal.

Contoh:

Column(crossAxixAlignment: CrossAxixAlignment.start),
Column(crossAxixAlignment: CrossAxixAlignment.center),
Column(crossAxixAlignment: CrossAxixAlignment.end),
Column(crossAxixAlignment: CrossAxixAlignment.spaceAround),
Column(crossAxixAlignment: CrossAxixAlignment.spaceBetween),
Column(crossAxixAlignment: CrossAxixAlignment.Evenly),

Penggunaan CrossAxixAlignment

Perhatikan gambar di bawah ini:

Tutorial Flutter #4 - Column Widget

#3. mainAxixSize, parameter ini dapat memberikan ruang pada Column, namun ruang yang digunakan merupakan ruang maksimal yang dapat Anda tentukan. Misalnya:

Column(mainAxixSize: MainAxixSize.max)

#4. textDirection. Parameter ini mirip dengan verticalDirection, tetapi sedikit berbeda di antara mereka. TextDirection digunakan dalam arah horizontal, tetapi verticalDirection digunakan dalam arah vertikal. Mereka berdua mengontrol arah awal gambar children widget.

Ada dua parament yang bisa digunakan, yaitu: ltr dan rtl.  Lrt berarti mengalirkan text dari kiri ke kanan, sebaliknya.

Contoh:

Column(textDirection: TextDirection.ltr),
Column(textDirection: TextDirection.rtl),

#5. textBaseline, ada dua parameter di textBaseline yaitu alphabetic, merupakan garis horizontal yang digunakan untuk menyelaraskan bagian bawah dalam bentuk alfhabet. Sedangkan yang kedua yaitu ideografik, yaitu garis horizontal yang digunakan untuk menyelaraskan bagian bawah widget dalam bentuk ideografik.

Contoh:

Column(textBaseline: TextBaseline.ideografik),
Column(textBaseline: TextBaseline.alphabetic),

#6. Children, berfungsi untuk memberikan ruang kepada widget-widget yang digunakan di dalam suatu column. Misalnya di dalam column tersebut kita bisa panggil widget Text, Input dll.

Contoh:

 children: <Widget>[
    Container( 
      height: 100,
      width: 100,
      color: Colors.blue,
    ),
    Container( 
      height: 100,
      width: 100,
      color: Colors.yellow,
    ),
    Container( 
      height: 100,
      width: 100,
      color: Colors.red,
    ),
  ],
), 

Contoh Program Menggunakan Column Widget

 import 'package:flutter/material.dart';

class ColumnExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
          title: Text('Column Example'),
      ),
      body: Center(
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: <Widget>[
          Container( 
            height: 100,
            width: 100,
            color: Colors.blue,
          ),
          Container( 
            height: 100,
            width: 100,
            color: Colors.yellow,
          ),
          Container( 
            height: 100,
            width: 100,
            color: Colors.red,
          ),
        ],
      ),
      ),
    );
  }
} 

Hasilnya:

flutter column widget

Demikianlah artikel mengenai Column WIdget ini. Semoga artikel ini dapat membantu Anda memahami Flutter dengan baik. Aamiin.

flutter 3 perbedaan stateless widget dan statefull widget

Tutorial Flutter #3 – Perbedaan Stateless Widget dan Statefull Widget

Rumahcoding.co.id – Perbedaan stateless widget dan statefull widget. Pada kesempatan kali ini kami akan membahasnya secara ringkat namun tetap berupaya agar mudah dipahami oleh Anda.

Biasanya sebuah class di Flutter akan mengextends kedua State ini, yaitu Stateless Widget dan Statefull Widget. Masing-masing dari keduanya punya tugas dan fungsi yang berda-beda. Beberapa dari developer Flutter sering memadukan di antara keduanya.

Nah, langsung saja kita bahas lebih detail tentang keduanya …

Apa itu Stateless Widget?

Stateless Widget adalah widget yang tidak akan pernah berubah. Stateless Widget  merupakan widget yang di-build hanya dengan konfigurasi yang telah diinisiasi sejak awal.

Misalnya kita membuat aplikasi berisi Text dengan kata “Hello World”. Kemudian aplikasi kita tidak punya fungsi untuk merubah kata tersebut. Dalam kasus  yang digunakan di sini adalah Stateless Widget.

Contoh:

 class MyApp extends StatelessWidget {
    @override
    Widget build(BuildContext context) {
        return Scaffold(
            appBar: AppBar(
                title: Text('Flutter Demo'),
            ),
            body: Center(
                child: Text(
                    '10',
                    style: TextStyle(
                        fontSize: 30
                    ),
                ),
            )
        );
    }
} 

Apa Itu Statefull Widget?

Merupakan Widget yang dapat berubah-ubah secara dinamis. Jika dianalogikan Statefull Widget seperti sebuah teko yang berisi air, namun air tersebut bisa berubah-ubah. Misalnya di hari pertama si teko isinya air putih, lalu hari kedua isinya air the dan hari ketiga isinya kopi.

Jadi apapun Widget yang dapat berubah-ubah bisa disebut dengan Statefull Widget. Statefull Widget inipun bisa dikombinasikan dengan Stateless Widget. Karena seringkali kami mendapati kebutuhan aplikasi yang mengharuskan kombinasi di antara keduanya.

Contoh penerapan pada aplikasi di Flutter misalnya kita membuat sebuah aplikasi dimana jika setiap kita memencet icon “+”. Angka yang ada di tengah tampilan akan bertambah satu.

Contoh:

 import 'package:flutter/material.dart';

class FirstApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
      return Scaffold(
          appBar: AppBar(
              title: Text('Flutter Demo'),
          ),
          body: Container(
              child: NumberScreen(),
          )
      );
  }
}

class NumberScreen extends StatefulWidget {
  @override
  _NumberScreenState createState() => _NumberScreenState();
}

class _NumberScreenState extends State<NumberScreen> {
  int number = 1;

  @override
  Widget build(BuildContext context) {
    return Stack(
      children: <Widget>[
        Center(
            child: Text(
                this.number.toString(),
                style: TextStyle(
                    fontSize: 30
                ),
            ),
        ),
        Positioned(
            bottom: 50,
            right: 50,
            child: FloatingActionButton(
                child: Icon(Icons.add),
                onPressed: () {
                    setState(() {
                        this.number += 1;
                    });
                },
            ),
        )
      ],
    );
  }
}

Setelah Anda jalankan (running), maka hasilnya akan seperti ini:

Kesimpulan

Pada intinya Stateless Widget merupakan Widget yang tidak bisa berubah-ubah sedangkan Statefull Widget sebaliknya. Keduanya sangat mudah dipahami karena pengertiannya saling bertolak belakang. Penggunaan kedua widget ini sangat tergantung pada kebutuhan aplikasi. Dan seringnya, keduanya digunakan dalam satu file dart.

Semoga artikel ini bermanfaat. Salam #AnyoneCanCode

Membuat Aplikasi Pertama Anda dnegan Flutter

Tutorial Flutter #3 – Membuat Aplikasi Pertama Anda

Rumahcoding.co.id – Pada kesempatan kali ini tutorial Flutter #3 akan membahas Cara Membuat Aplikasi Pertama Anda di Flutter. Setelah kita mempelajari structure project Flutter, maka akan sangat mudah ketika kita ingin membangun aplikasi menggunakan Flutter.

Sebelumnya, kita perlu tahu apa saja bagian-bagian yang bisa dicustom sesuai dengan project yang akan dibuat, yaitu:

  1. Header, yaitu bagian yang menangani semisal informasi aplikasi, title maupun icon.
  2. Body, yaitu bagian yang berisi content aplikasi yang akan dibuat.
  3. Footer, bagian optional yang bisa dicustom semisal list menu, floating action button, dan lain-lain.

Kurang lebih, desainnya seperti ini:

Tutorial-Flutter-3-Membuat-Aplikasi-Pertama-Anda

Ketiga bagian di atas dibungkus dengan Class Scafold. Class Scafold ini yang nantinya akan membentuk struktur tata letak dasar mulai dari header, body sampai footer.

Sekarang kita akan coba menerapkan beberapa code yang bisa diletakan pada masing-masing bagian. Mari kita mulai.

Bagian Header

Pada bagian header kita akan coba menerapkan code di bawah ini:

// Header
appBar: AppBar(
 title: Text("Flutter Demo"),
),

Pada bagian body kita akan menerapkan code berikut:

 // Body
body: Center( 
  child: Column(
    mainAxisAlignment: MainAxisAlignment.center,
    crossAxisAlignment: CrossAxisAlignment.center,
    children: <Widget>[
      Text("Hello World",
        style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
      ),
    ],
  ),
), 

Terakhir pada bagian footer kita akan menerapkan code berikut:

 // Bottom
floatingActionButton: new FloatingActionButton( 
  child: Icon(Icons.add),
  onPressed: () => print("Add"),
), 

Berikut code selengkapnya:

 import 'package:flutter/material.dart';

class App extends StatelessWidget{

  @override 

  Widget build(BuildContext context){

    return Scaffold( 
// Header
appBar: AppBar(
  title: Text("Flutter Demo"),
),
      // Body
      body: Center( 
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: <Widget>[
            Text("Hello World",
              style: TextStyle(fontWeight: FontWeight.bold, fontSize: 20.0),
            ),
          ],
        ),
      ),
      // Bottom
      floatingActionButton: new FloatingActionButton( 
        child: Icon(Icons.add),
        onPressed: () => print("Add"),
      ),
    );
  }
} 

Panggil class App dan simpan pada main.dart

home: App(), // class yang akan dijalankan

Jalankan aplikasi tersebut. Jika berhasil akan tampil seperti ini:

ATTACHMENT DETAILS  Tutorial-Flutter-3-Membuat-Aplikasi-Pertama-Anda-02.png December 16,

Sampai di sini, kita sudah berhasil membuat aplikasi pertama menggunakan Flutter. Anda bisa mengcustom code di atas sesuai dengan kebutuhan project. Selamat mencoba dan jangan lupa bahwa #AnyOneCanCode