Tutorial dasar dasar layout Flutter

Tutorial dasar dasar layout Flutter

Flutter Soal VBA MAcro

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.

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

Beberapa Widget 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.

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 –

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 Balasan

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