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

Tutorial Flutter #2 – Structure Project Flutter

Tutorial Flutter #2 – Structure Project Flutter

Rumahcoding.co.id – Pada Tutorial Flutter #2 ini kami akan membahas Structure Project Flutter yang perlu diketahui oleh setiap programmer sebelum mencoba framework yang keren ini. Apalagi kalau bukan Flutter.

Flutter merupakan salah satu framework untuk membuat aplikasi mobile yang sedang naik daun belakangan ini. Flutter dengan cepat berkembang karena banyak kemudahan yang ditawarkan maupun dalam hal structure projectnya sendiri.

Tidak seperti kebanyakan framework lainnya yang cenderung banyak directory yang bikin kepala mumet, Flutter hadir yang membuat para programmer merasa seperti “dimanjakan” saja. Jelas Flutter memiliki directory yang minimal tapi sangat powerfull untuk membangun aplikasi mobile.

Baca Juga: Pengenalan dan Cara Install Flutter

Mari lihat structure project Flutter kali ini:

Tutorial-Flutter-2-Structure-Project-Flutter

Hanya dengan beberapa folder dan beberapa file saja, Flutter mampu membangun aplikasi mobile yang keren, modern dan performa yang luar biasa. Nah, biar semakin penasaran, berikut kami paparkan lebih detailnya tentang structure project Flutter kali ini:

  • Android dan iOS, masing-masing memiliki file aplikasi Android maupun iOS secara lengkap. Setiap kali Anda ingin mengimplementasikan platform tertentu, Anda bisa masuk ke directory ini.
  • Lib, menampung semua kode dart yang digunakan untuk menjalankan aplikasi Anda.
  • Pubspec.yaml, merupakan file khusus. File ini berisi app name, description, SDK version, dependencies, dan hal-hal penting lainnya.

Nah, berdasarkan penjelasan di atas, maka Anda akan melihat bahwa untuk membangun aplikasi mobile app dengan Flutter cukup membuka file-file tersebut. Lingkup kerja framework ini cukup ramah dan simple. Membuat framework ini cocok dipelajari oleh newbie sekalipun.

Oke, demikianlah penjelasan structure project Flutter kali ini. Apabila ada yang ingin ditanyakan silahkan melalui kolom komentar. Terima kasih.