07.Flutter - Multi Child Layout Widget [ Part 1 ]


Multi Child Layout Widget


Layout (tata letak) Widget digunakan untuk tata letak dari child widget, pada Flutter ada dua jenis Layout Widget, yang pertama adalah Single Child Layout dan yang kedua adalah Multi Child Layout. Multi Child Layout akan menggunakan properti children bertipe array Widget, sedangkan Single Child Layout akan menggunakan properti child bertipe Widget.


Multi Child Layout

Single Child Layout


Multi-Child Layout Widget digunakan untuk meletakkan child widget yang akan ditampilkan jika lebih dari satu, adapun widget ini terdiri dari: Column, Row, Flex, ListView, Stack. Layout ini baik digunakan untuk komponen yang sudah kita ketahui ukurannya, seperti buttons, textboxes. dll, layout ini juga baik digunakan ketika widget yang kita letakkan pada layout ini tidak meng-overflow layar, maksud dari overflow adalah ukuran widget lebih besar dari layar smartphone. Layout ini kurang baik untuk diguankan pada komponen yang ukurannya dinamis, misalnya Widget Text yang akan menampilkan data yang diambil dari server, dimana kita tidak tahu ukuran (jumlah) data yang akan ditampilkan, jika kita mendapat kasus seperti itu maka lebih baik kita menggunakan Table, karena Table dapat menangani text overflow dengan baik.

Terkadang kita menghadapi kasus dimana ketika menggunakan Layout Widget ini, child yang kita buat tidak pas pada area dari layar smartphone, Hal ini membuat garis kuning hitam (chevrons) terlihat seperti gambar berikut disertai keterangan error pada console.


Column


Widget Column akan membuat layout secara vertikal (dari atas kebawah).



Gunakan MainAxisAlignment untuk menentukan layoutnya, layout ini akan menampilkan child widgetnya sesuai dengan ukurannya, sehingga akan menyisakan ruang pada area layar (lihat ilustrasi gambar diatas, dimana child componen ukurannya berbeda-beda), jika kita ingin menutup seluruh ruang yang tersedia, maka bungkus child widgetnya dengan widget Expanded, Layout ini juga tidak menyediakan scroling, jika space (ruang) yang tersedia secara vertikal habis, maka kita akan mendapatkan error, jika kita perlu scroll maka gunakan ListView. Perhatikan contoh multi widget menggunakan widget Column


import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @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 StatelessWidget {
  MyHomePage({Key key, this.title}) : super(key: key);
  final String title;

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: Text('Column Widget Layout'),
      ),
      body: Column(
        children: <Widget>[
          MyTextWidget('First Text', Colors.redAccent, 48.0),
          MyTextWidget('Second Text', Colors.blueAccent, 48.0),
          MyTextWidget('Third Text', Colors.greenAccent, 48.0),
        ],
      ),
    );
  }
}

//Create Styled Text
class MyTextWidget extends StatelessWidget {
  MyTextWidget(this.text, this.color, this.fontSize) : super();
  final String text;
  final Color color;
  final double fontSize;

  @override
  Widget build(BuildContext context) {
    return Text(
      text,
      style: TextStyle(fontSize: fontSize, backgroundColor: color),
    );
  }
}

Berikut adalah hasil dari kode tersebut.


Untuk mengatur posisi dari child widgetnya, kita dapat menggunakan mainAxisAlignment, silahkan ber-eksperimen dengan pilihan dari MainAxisAlignment.


Agar widget yang kita memenuhi ruangan yang tersedia secara vertikal (karena kita gunakan Widget Column) maka bungkus widget yang diinginkan dengan widget Expanded, berikut adalah perubahannya:


Berikut adalah hasil dari perubahannya, saya tambahkan widget button yang dibungkus oleh widget Expaned, hasilnya widget button tersebut akan memenuhi ruangan yang tersedia secara vertikal.



Row

Widget Row, digunakan untuk meletakkan Widget secara Horizontal, sama seperti Column, kita bisa menggunakan MainAxisAlignmen untuk menentukan layoutnya, jika ukuran komponen lebih lebar dari layar smartphone makan akan menampilkan error dan chevron akan ditampilkan, widget Row mirip dengan Column, perbedaannya adalah Column untuk vertikal dan Row untuk Horizontal.



Lakukan Modifikasi program dengan mengubah Column menjadi Row, saya juga mengganti ukuran text menjadi 12.0.


Hasilnya adalah sebagai berikut:



Design Layout

Sebelum kita melakukan pengkodean, alangkah baiknya jika kita membuat sketsa layout yang akan kita buat, dengan demikian akan memudahkan kita untuk membuat kode programnya, perhatikan contoh berikut, dimana menggabungkan Column dan Row untuk membuat layout yang diiginkan.

Hasil akhir yang kita inginkan adalah sebagai berikut.


Jika kita lihat gambar diatas, maka kita akan menggunakan Widget TextBox, Button, Column, Row, kemudian ada jarak dari tepi layar ke widget TextField, untuk mengatur jarak kita bisa menggunakan padding, seketsa sederhananya adalah sebagai berikut:




Untuk Widget Tree - nya adalah sebagai berikut:


Perhatikan Setelah Widget Scaffold, yaitu Container, widget inilah yang akan membungkus semua widget yang akan ditampilkan, tujuan dari widget Container ini adalah agar bisa memberikan padding pada widget didalamnya, kemudian child dari widget Container adalah Column, pada widget ini kita gunakan MainAxisAlignmen.Center untuk membuat child nya berada di tenggah, kemudian didalam widget Column terdapat 3 buah widget Row, pada Row ke 3, kita gunakan MainAxisAlignment.End, sehingga widget Button akan diletakkan ke kanan.

Berikut adalah potongan kode mulai dari widget Container.

      body: Container(
        padding: EdgeInsets.all(24.0),
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            Row(
              children: <Widget>[
                Expanded(
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: 'Username',
                      
                    ),
                    controller: null,
                  ),
                )
              ],
            ),
            Row(
              children: <Widget>[
                Flexible(
                  child: TextField(
                    decoration: InputDecoration(
                      hintText: 'Password',
                    ),
                    obscureText: true,
                    controller: null,
                  ),
                )
              ],
            ),
            Row(
              mainAxisAlignment: MainAxisAlignment.end,
              children: <Widget>[
                RaisedButton(
                  child: Text('Login'),
                  onPressed: () {},
                )
              ],
            )
          ],
        ),
      ),
07.Flutter - Multi Child Layout Widget [ Part 1 ] 07.Flutter - Multi Child Layout Widget [ Part 1 ] Reviewed by jc on August 02, 2019 Rating: 5

No comments:

Powered by Blogger.