Tutorial Flutter Mencar Ilmu Flexible Widget Gampang Dan Penjelasannya

Flutter Flexible Widget Tutorial

- Flexible merupakan widget yang dipakai untuk menciptakan tampilan yang gampang diatur dan bersifat fleksibel. Untuk menciptakan suatu widget dengan ukuran perbandingan tertentu memakai flexible widget akan sangat membantu. Untuk memakai flexible widget harus berada didalam Row, Column, atau Flex.

Pada tutorial ini, selain kau berguru memakai flexible widget,  kamu  juga berguru memakai widget row dan column.

Untuk memudahkan kau semoga lebih mengerti cara memakai flexible widget pada flutter, mari kita coba menciptakan aplikasi dengan tampilan yang mengimplementasikan penggunaan flexible widget. Berikut citra tampilan sederhana yang akan kita buat :

Flutter flexible widget example

Untuk perbanginnya menyerupai pada gambar diatas, ikuti langkah-langkah berikut untuk mulai membuatnya :

1. Buat project flutter

Pertama, buat project gres dengan nama contohnya "learn_flexible_widget". Ketika menciptakan project gres pastikan terkoneksi dengan internet dan tunggu hingga proses sinkronisasi project selesai.

2. Buat layout 

Buka file main.dart pada folder lib, hapus semua kodenya dan pertama tambahkan instruksi untuk import library material :

import 'package:flutter/material.dart'; 

Buat fungsi main() untuk menjalankan class yang ditampilkan pertama kali, tambahkan instruksi berikut dibawah import :

void main() {   runApp(MaterialApp(     debugShowCheckedModeBanner: false,     title: 'Flexible Widget',     home: MyApp(),   )); } 

Selanjutnya kita akan menciptakan class MyApp sebagai StatelessWidget, tambahkan instruksi berikut sehabis fungsi main() : 

class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return SafeArea(       child: Scaffold(         body: Column(           children: <Widget>[             // flexible widget disini           ],         ),     );   }   // fungsi _buildFlexible() akan ditambah disini } 

Supaya penggunaan instruksi untuk menciptakan flexible layout tidak berulang-ulang, buat fungsi gres untuk menampilkan flexible widget. Tambahkan instruksi berikut pada bab yang aku komentar untuk fungsi _buildFlexible() :

Widget _buildFlexible(int flex, Color backgroundColor, String text) {   return Flexible(     flex: flex,     child: Container(       color: backgroundColor,       child: Center(         child: Text(           text,           style: TextStyle(             color: Colors.white,             fontSize: 24.0,             fontWeight: FontWeight.bold,           ),         ),       ),     ),   ); } 

Kita telah menciptakan fungsi untuk menampilkan flexible widget yang membutuhkan parameter jumlah flex, warna background, dan text.

Sekarang menerapkan flexible widget untuk menciptakan tampilan menjadi 3 baris utama. Tambahkan instruksi berikut didalam children dari Column, sehingga kodenya menjadi menyerupai berikut :

body: Column(   children: <Widget>[     // baris 1     Flexible(       flex: 1,       child: Row(         children: <Widget>[           _buildFlexible(1, Colors.blue, "1"),           _buildFlexible(1, Colors.blueGrey, "1"),           _buildFlexible(1, Colors.cyan, "1"),           _buildFlexible(1, Colors.green, "1"),         ],       ),     ),     // baris 2     _buildFlexible(4, Colors.lightGreen, "4"),     // baris 3     Flexible(       flex: 2,       child: Row(         children: <Widget>[           _buildFlexible(1, Colors.orangeAccent, "2"),           Flexible(             flex: 1,             child: Column(               children: <Widget>[                 _buildFlexible(1, Colors.redAccent, "1"),                 _buildFlexible(1, Colors.deepPurpleAccent, "1"),               ],             ),           ),         ],       ),     ),   ], ), 

3. Kode lengkap

Sehingga seluruh kodenya menjadi menyerupai berikut :

import 'package:flutter/material.dart';  void main() {   runApp(MaterialApp(     debugShowCheckedModeBanner: false,     title: 'Flexible Widget',     home: MyApp(),   )); }  class MyApp extends StatelessWidget {   @override   Widget build(BuildContext context) {     return SafeArea(       child: Scaffold(         body: Column(           children: <Widget>[             // baris 1             Flexible(               flex: 1,               child: Row(                 children: <Widget>[                   _buildFlexible(1, Colors.blue, "1"),                   _buildFlexible(1, Colors.blueGrey, "1"),                   _buildFlexible(1, Colors.cyan, "1"),                   _buildFlexible(1, Colors.green, "1"),                 ],               ),             ),             // baris 2             _buildFlexible(4, Colors.lightGreen, "4"),             // baris 3             Flexible(               flex: 2,               child: Row(                 children: <Widget>[                   _buildFlexible(1, Colors.orangeAccent, "2"),                   Flexible(                     flex: 1,                     child: Column(                       children: <Widget>[                         _buildFlexible(1, Colors.redAccent, "1"),                         _buildFlexible(1, Colors.deepPurpleAccent, "1"),                       ],                     ),                   ),                 ],               ),             ),           ],         ),       ),     );   }    Widget _buildFlexible(int flex, Color backgroundColor, String text) {     return Flexible(       flex: flex,       child: Container(         color: backgroundColor,         child: Center(           child: Text(             text,             style: TextStyle(               color: Colors.white,               fontSize: 24.0,               fontWeight: FontWeight.bold,             ),           ),         ),       ),     );   } } 

Sekarang coba jalankan dengan emulator atau hp, akhirnya menyerupai berikut :

Tutorial flutter flexible widget gampang dan penjelasannya

Demikian tutorial flutter mengenai cara memakai flexible widget dengan mudah, tutorial ini sangat cocok untuk pemula. Selain itu, ingin tahu cara menciptakan warna background mempunyai imbas gradient ? Ikuti tutorial flutter cara menciptakan background imbas gradient lengkap dan mudah.

Jangan lupa subscribe website codingtive untuk mendapat artikel dan tutorial menarik lainnya, terima kasih ya sudah berkunjung.

Share this post