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

Tutorial Flutter #1 - Pengenalan dan Cara Install Flutter.jpeg

Tutorial Flutter #1 – Pengenalan dan Cara Install Flutter

Tutorial Flutter #1 - Pengenalan dan Cara Install Flutter.jpeg

Rumahcoding.co.idPengenalan dan Cara Install Flutter. Sebagai seorang pengembang aplikasi mobile, pastinya sudah memikirkan bagaimana cara membangun aplikasi mobile yang bisa digunakan di android dan ios dalam sekali kerja. Jika sampai saat ini masih memisahkan antara pengembangan android dan ios secara terpisah, itu artinya akan memakan banyak waktu, tenaga dan biaya untuk mengerjakannya.

Flutter hadir dengan kemampuan membangun aplikasi ios dan android dalam sekali pengembangan. Bayangkan saja dengan sekali membuat aplikasi maka sudah bisa diinstall di android maupun ios, keren!

Apa Itu Flutter?

Flutter merupakan sekumpulan SDK (Software Development Kit) untuk pengembangan aplikasi mobile yang dikembangkan oleh Google. Sama seperti react native maupun ionic, framework ini dapat digunakan untuk mengembangkan aplikasi mobile yang berjalan di ios maupun android. Bahasa yang digunakan oleh flutter merupakan Bahasa C, C++, Dart maupun Skia yang membuat framework buatan Google ini sangat menarik untuk kita pelajari.

Benefit Mengembangkan Aplikasi Mobile dengan Flutter

Ada banyak benefit yang bisa kita dapatkan apabila menggunakan flutter dalam mengembangkan aplikasi android maupun ios, di antaranya:

1. Fast Development

Flutter memiliki fitur widget-widget maupun class yang dapat membantu pengembangan aplikasi android maupun ios. Selain itu, flutter juga memiliki fitur hot reload yang dapat mempercepat compile / render perubahan-perubahan pada aplikasi yang kita kembangkan tanpa harus melakukan compile ulang.

2. Expressive and Flexsible UI

Flutter telah menyediakan banyak material UI yang berguna untuk membangun mobile app dengan canggih dan elegan. Material yang disediakan flutter sangat beragam dan lebih flexsible. Cukup dengan import satu material saja, maka Anda sudah bisa menggunakan banyak widget.

Selain itu, widget-widget yang disediakan flutter mudah dipelajari karena disediakan dokumentasi saat menggunakan widget tersebut.

3. Native Performance

Flutter memiliki kemampuan native performance, yaitu aplikasi yang Anda buat bisa berjalan di masing-masing di platform. Misalnya sintax scrooling di android dan ios berbeda, namun hanya dengan satu kali bekerja menggunakan flutter scrooling, Anda sudah bisa membuat system scrooling yang bisa bekerja dengan baik di android maupun ios.

4. Complete Documentation and Dependencies

Dokumentasi yang disediakan flutter sangat lengkap. Selain itu, depedensi yang Anda butuhkan sangat mudah diaplikasikan karena masing-masing depedensi ada tutorial dan cara menggunakannya. Hal ini membuat flutter semakin powerfull dalam membangun aplikasi mobile.

Tutorial Install Flutter

Flutter telah menyediakan dokumentasi bagaimana cara atau tutorial install flutter baik saat menggunakan windows, linux ataupun mac os.

1. Tutorial Install Flutter di Windows

Bagi Anda pengguna windows, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/windows

2. Tutorial Install Flutter di Mac OS

Bagi Anda pengguna Mac OS, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/macos

3. Tutorial Install Flutter di Linux

Bagi Anda pengguna Linux, Anda bisa mulai membaca tutorial install flutter di windows dengan mengunjungi link berikut ini:

https://flutter.dev/docs/get-started/install/linux

Kesimpulan

Demikianlah pembahasan pengenalan flutter, cara install flutter dan apa manfaat dari menggunakan flutter untuk membangun aplikasi mobile app. Semoga bermanfaat untuk pembaca sekalian. Aamiin.