Tutorial dasar dasar layout Flutter

Tutorial dasar dasar layout Flutter

Tutorial dasar dasar layout Flutter

Pada Tutorial dasar dasar layout Flutter, Karena konsep inti Flutter adalah Segalanya adalah widget , Flutter menggabungkan fungsionalitas tata letak antarmuka pengguna ke widget itu sendiri. Flutter menyediakan cukup banyak widget yang didesain khusus seperti Container, Center, Align , dll., Hanya untuk tujuan menata antarmuka pengguna. Widget dibangun dengan membuat widget lain biasanya menggunakan widget tata letak. Mari gunakan mempelajari konsep tata letak Flutter di bab ini.

Jenis Widget Tata Letak

Widget tata letak dapat dikelompokkan menjadi dua kategori berbeda berdasarkan anaknya –

  • Widget mendukung satu anak
  • Widget mendukung banyak anak

Mari kita pelajari kedua jenis widget dan fungsinya di bagian mendatang.

Widget Anak Tunggal

Dalam kategori ini, widget hanya akan memiliki satu widget sebagai turunannya dan setiap widget akan memiliki fungsi tata letak khusus.

Misalnya, widget Center hanya memusatkan widget turunannya sehubungan dengan widget induknya dan widget Container memberikan fleksibilitas lengkap untuk menempatkannya di tempat tertentu di dalamnya menggunakan opsi yang berbeda seperti padding, dekorasi, dll.,

Widget anak tunggal adalah pilihan bagus untuk membuat widget berkualitas tinggi yang memiliki fungsi tunggal seperti tombol, label, dll.,

Kode untuk membuat tombol sederhana menggunakan¬†widget¬†Container¬†adalah sebagai berikut –

class MyButton extends StatelessWidget {

MyButton({Key key}) : super(key: key);

@override

Widget build(BuildContext context) {

return Container(

decoration: const BoxDecoration(

border: Border(

top: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),

left: BorderSide(width: 1.0, color: Color(0xFFFFFFFFFF)),

right: BorderSide(width: 1.0, color: Color(0xFFFF000000)),

bottom: BorderSide(width: 1.0, color: Color(0xFFFF000000)),

),

),

child: Container(

padding: const

EdgeInsets.symmetric(horizontal: 20.0, vertical: 2.0),

decoration: const BoxDecoration(

border: Border(

top: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),

left: BorderSide(width: 1.0, color: Color(0xFFFFDFDFDF)),

right: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),

bottom: BorderSide(width: 1.0, color: Color(0xFFFF7F7F7F)),

),

color: Colors.grey,

),

child: const Text(

'OK',textAlign: TextAlign.center, style: TextStyle(color: Colors.black)

),

),

);

}

}

 

Di sini, kami telah menggunakan dua widget –¬†widget¬†Kontainer¬†dan¬†widget¬†Teks¬†.¬†Hasil widget adalah sebagai tombol kustom seperti yang ditunjukkan di bawah ini –

baik

Mari kita periksa beberapa widget tata letak anak tunggal terpenting yang disediakan oleh¬†Flutter¬†–

  • Padding¬†– Digunakan untuk mengatur widget turunannya berdasarkan padding yang diberikan.¬†Di sini, padding dapat disediakan oleh¬†kelas¬†EdgeInsets¬†.
  • Align¬†– Menyelaraskan widget turunannya dengan sendirinya menggunakan nilai¬†properti¬†alignment¬†.¬†Nilai untuk¬†properti¬†alignment¬†bisa disediakan oleh¬†kelas¬†FractionalOffset¬†.¬†Kelas¬†FractionalOffset¬†menentukan offset dalam jarak dari kiri atas.
Baca Juga  SHORTCUT PADA MICROSOFT OFFICE

Beberapa kemungkinan nilai offset adalah sebagai berikut –

  • FractionalOffset (1.0, 0.0) mewakili kanan atas.
  • FractionalOffset (0.0, 1.0) mewakili kiri bawah.

Contoh kode tentang offset ditunjukkan di bawah ini –

Center(

child: Container(

height: 100.0,

width: 100.0,

color: Colors.yellow, child: Align(

alignment: FractionalOffset(0.2, 0.6),

child: Container( height: 40.0, width:

40.0, color: Colors.red,

),

),

),

)

 

  • FittedBox¬†– Ini¬†menskalakan¬†widget anak dan kemudian memposisikannya sesuai dengan kecocokan yang ditentukan.
  • AspectRatio¬†–¬†Mencoba¬†mengukur widget anak ke rasio aspek yang ditentukan
  • ConstrainedBox
  • Dasar
  • FractinallySizedBox
  • IntrinsicHight
  • IntrinsicWidth
  • Kotak Perekat
  • OffStage
  • OverflowBox
  • SizedBox
  • SizedOverflowBox
  • Mengubah
  • CustomSingleChildLayout

Aplikasi hello world kami menggunakan widget tata letak berbasis material untuk mendesain halaman beranda.¬†Mari kita memodifikasi aplikasi hello world kita untuk membangun halaman beranda menggunakan widget tata letak dasar seperti yang ditentukan di bawah ini –

  • Penampung¬†– Widget penampung generik, anak tunggal, berbasis kotak dengan perataan, padding, batas, dan margin bersama dengan fitur gaya yang kaya.
  • Tengah¬†– Sederhana, widget wadah anak tunggal, yang menempatkan widget anak di tengah.

Kode modifikasi dari¬†widget¬†MyHomePage¬†dan¬†MyApp¬†adalah seperti di bawah ini –

class MyApp extends StatelessWidget {

@override

Widget build(BuildContext context) {

return MyHomePage(title: "Hello World demo app");

}

}

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

Widget build(BuildContext context) {

return Container(

decoration: BoxDecoration(color: Colors.white,),

padding: EdgeInsets.all(25), child: Center(

child:Text(

'Hello World', style: TextStyle(

color: Colors.black, letterSpacing: 0.5, fontSize: 20,

),

textDirection: TextDirection.ltr,

),

)

);

}

}

 

Sini,

  • Kontainer¬†widget adalah tingkat atas atau akar widget.¬†Kontainer¬†dikonfigurasi menggunakan¬†properti¬†dekorasi¬†dan¬†padding¬†untuk mengatur tata letak isinya.
  • BoxDecoration¬†memiliki banyak properti seperti color, border, dll., Untuk menghias¬†widget¬†Container¬†dan di sini,¬†color¬†digunakan untuk mengatur warna container.
  • bantalan¬†dari¬†Kontainer¬†widget diatur dengan menggunakan¬†dgeInsets¬†kelas, yang menyediakan pilihan untuk menentukan nilai padding.
  • Center¬†adalah widget turunan dari¬†widget¬†Container¬†.¬†Sekali lagi,¬†Text¬†adalah anak dari¬†Pusat¬†widget.¬†Teks¬†digunakan untuk menampilkan pesan dan¬†Pusat¬†digunakan untuk memusatkan pesan teks sehubungan dengan widget induk,¬†Kontainer¬†.

Hasil akhir dari kode yang diberikan di atas adalah contoh tata letak seperti yang ditunjukkan di bawah ini –

Hasil Akhir

Widget Dengan Beberapa Anak

Dalam kategori ini, widget tertentu akan memiliki lebih dari satu widget turunan dan tata letak setiap widget itu unik.

Misalnya, widget Baris memungkinkan penataan turunannya dalam arah horizontal, sedangkan widget Kolom memungkinkan penataan turunannya dalam arah vertikal. Dengan menyusun Row dan Column , widget dengan tingkat kerumitan apapun dapat dibangun.

Baca Juga  Belajar Microsoft Excel: Vlookup Excel- Rumus Jitu Yang Wajib Dikuasai

Mari kita pelajari beberapa widget yang sering digunakan di bagian ini.

  • Row¬†– Memungkinkan untuk mengatur anaknya secara horizontal.
  • Kolom¬†– Memungkinkan untuk mengatur anaknya secara vertikal.
  • ListView¬†– Memungkinkan untuk mengatur anaknya sebagai daftar.
  • GridView¬†– Memungkinkan untuk mengatur anaknya sebagai galeri.
  • Diperluas¬†– Digunakan untuk membuat anak-anak widget Baris dan Kolom menempati area semaksimal mungkin.
  • Tabel¬†– Widget berbasis tabel.
  • Arus¬†– Widget berbasis aliran.
  • Stack¬†– Widget berbasis Stack.

Aplikasi Tata Letak Lanjutan

Di bagian ini, mari kita pelajari cara membuat antarmuka pengguna yang kompleks dari cantuman produk dengan desain khusus menggunakan widget tata letak anak tunggal dan ganda.

Untuk tujuan ini, ikuti urutan yang diberikan di bawah ini –

  • Buat¬†aplikasi¬†Flutter¬†baru¬†di studio Android,¬†product_layout_app¬†.
  • Ganti¬†kode¬†main.dart¬†dengan kode berikut –
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: 'Product layout demo home page'),

);

}

}

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;




@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text(this.title),),

body: Center(child: Text( 'Hello World', )),

);

}

}

 

  • Sini,
  • Kami telah membuat¬†widget¬†MyHomePage¬†dengan memperluas¬†StatelessWidget¬†alih-alih¬†StatefulWidget¬†default¬†dan kemudian menghapus kode yang relevan.
  • Sekarang, buat widget baru,¬†ProductBox¬†sesuai dengan desain yang ditentukan seperti yang ditunjukkan di bawah ini –

ProductBox

  • Kode untuk¬†ProductBox¬†adalah sebagai berikut.
class ProductBox extends StatelessWidget {

ProductBox({Key key, this.name, this.description, this.price, this.image})

: super(key: key);

final String name;

final String description;

final int price;

final String image;

Widget build(BuildContext context) {

return Container(

padding: EdgeInsets.all(2), height: 120, child: Card(

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly, children: <Widget>[

Image.asset("assets/appimages/" +image), Expanded(

child: Container(

padding: EdgeInsets.all(5), child: Column(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: <Widget>[




Text(this.name, style: TextStyle(fontWeight:

FontWeight.bold)), Text(this.description),

Text("Price: " + this.price.toString()),

],

)

)

)

]

)

)

);

}

}

 

  • Harap perhatikan yang berikut di kode –
  • ProductBox¬†telah menggunakan empat argumen seperti yang ditentukan di bawah ini –
    • nama – Nama produk
    • deskripsi – Deskripsi produk
    • harga – Harga produk
    • image – Gambar produk
  • ProductBox¬†menggunakan tujuh widget bawaan seperti yang ditentukan di bawah ini –
    • Wadah
    • Diperluas
    • Baris
    • Kolom
    • Kartu
    • Teks
    • Gambar
  • ProductBox¬†dirancang menggunakan widget yang disebutkan di atas.¬†Susunan atau hierarki widget ditentukan dalam diagram yang ditunjukkan di bawah ini –
Baca Juga  Belajar Microsoft Excel: Menandai Data Yang Timbul 2 Kali| 3 Kali| Atau Lebih

Hierarki widget

  • Sekarang, letakkan beberapa gambar tiruan (lihat di bawah) untuk informasi produk di folder aset aplikasi dan konfigurasikan folder aset di file pubspec.yaml seperti yang ditunjukkan di bawah ini –
assets:

- assets/appimages/floppy.png

- assets/appimages/iphone.png

- assets/appimages/laptop.png

- assets/appimages/pendrive.png

- assets/appimages/pixel.png

- assets/appimages/tablet.png

 

iphone

iPhone.png

Pixel

Pixel.png

Laptop

Laptop.png

Tablet

Tablet.png

Pen drive

Flashdisk.png

Disket

Floppy.png

Akhirnya, Gunakan¬†ProductBox¬†widget di¬†MyHomePage¬†widget seperti yang ditentukan di bawah ini –

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;

@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title:Text("Product Listing")),

body: ListView(

shrinkWrap: true, padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),

children: <Widget> [

ProductBox(

name: "iPhone",

description: "iPhone is the stylist phone ever",

price: 1000,

image: "iphone.png"

),

ProductBox(

name: "Pixel",

description: "Pixel is the most featureful phone ever",

price: 800,

image: "pixel.png"

),

ProductBox(

name: "Laptop",

description: "Laptop is most productive development tool",

price: 2000,

image: "laptop.png"

),

ProductBox(

name: "Tablet",

description: "Tablet is the most useful device ever for meeting",

price: 1500,

image: "tablet.png"

),

ProductBox(

name: "Pendrive",

description: "Pendrive is useful storage medium",

price: 100,

image: "pendrive.png"

),

ProductBox(

name: "Floppy Drive",

description: "Floppy drive is useful rescue storage medium",

price: 20,

image: "floppy.png"

),

],

)

);

}

}

 

  • Di sini, kami telah menggunakan¬†ProductBox¬†sebagai anak¬†widget¬†ListView¬†.
  • Kode lengkap¬†(main.dart)¬†dari aplikasi tata letak produk¬†(product_layout_app)¬†adalah sebagai berikut –
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: 'Product layout demo home page'),

);

}

}

class MyHomePage extends StatelessWidget {

MyHomePage({Key key, this.title}) : super(key: key);

final String title;




@override

Widget build(BuildContext context) {

return Scaffold(

appBar: AppBar(title: Text("Product Listing")),

body: ListView(

shrinkWrap: true,

padding: const EdgeInsets.fromLTRB(2.0, 10.0, 2.0, 10.0),

children: <Widget>[

ProductBox(

name: "iPhone",

description: "iPhone is the stylist phone ever",

price: 1000,

image: "iphone.png"

),

ProductBox(

name: "Pixel",

description: "Pixel is the most featureful phone ever",

price: 800,

image: "pixel.png"

),

ProductBox(

name: "Laptop",

description: "Laptop is most productive development tool",

price: 2000,

image: "laptop.png"

),

ProductBox(

name: "Tablet",

description: "Tablet is the most useful device ever for meeting",

price: 1500,

image: "tablet.png"

),

ProductBox(

name: "Pendrive",

description: "Pendrive is useful storage medium",

price: 100,

image: "pendrive.png"

),

ProductBox(

name: "Floppy Drive",

description: "Floppy drive is useful rescue storage medium",

price: 20,

image: "floppy.png"

),

],

)

);

}

}

class ProductBox extends StatelessWidget {

ProductBox({Key key, this.name, this.description, this.price, this.image}) :

super(key: key);

final String name;

final String description;

final int price;

final String image;




Widget build(BuildContext context) {

return Container(

padding: EdgeInsets.all(2),

height: 120,

child: Card(

child: Row(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: <Widget>[

Image.asset("assets/appimages/" + image),

Expanded(

child: Container(

padding: EdgeInsets.all(5),

child: Column(

mainAxisAlignment: MainAxisAlignment.spaceEvenly,

children: <Widget>[

Text(

this.name, style: TextStyle(

fontWeight: FontWeight.bold

)

),

Text(this.description), Text(

"Price: " + this.price.toString()

),

],

)

)

)

]

)

)

);

}

}

 

Hasil akhir dari aplikasi ini adalah sebagai berikut –

Daftar Produk

 

Tinggalkan Komentar

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

Need Help? Chat with us