Belajar Menggunakan Widget pada Flutter : Flutter Starter Pack Bahagia 1

Kali ini kita akan membincangkan tentang widget yang paling biasa dan paling kerap digunakan apabila kita membuat projek menggunakan Flutter. Buat aplikasi yang cantik, berstruktur, berbilang platform dan interaktif dengan mudah adalah merupakan kekuatan Flutter kerana Flutter menggunakan Reka Bentuk Bahan secara asas. Dalam membuat UI kita akan sering mendengar istilah widget, Apa sebenarnya widget tu?

Apa itu Widget?

Bagi anda yang tidak memahami apa itu widget, widget di dalam Flutter bermaksud keseluruhan paparan seperti butang, imej, teks, senarai, ikon, malah satu skrin pada telefon bimbit adalah koleksi-koleksi widget yang digunakan.

Properti pada Widget

Setiap widget mempunyai sifat-sifatnya tersendiri, contohnya kita ingin membuat butang, kemudian kita mahu warna latar belakang menjadi hijau, dan warna teks menjadi putih, kemudian kita mahu membuat teks tebal. Untuk melakukan itu, kami menetapkan butang melalui sifatnya.

Daripada gambar, kita boleh belajar bahawa ciri-ciri widget bermula dengan huruf besar. Ia adalah kelas. Dalam gambar itu, kita juga mempunyai widget Scaffold, AppBar, dan Text. Kemudian widget Scaffold mempunyai sifat appBar, manakala widget AppBar mempunyai sifat tajuk dan backgroundColor.

Widget di dalam widget

Dalam membuat aplikasi nanti sudah tentu kita akan menggunakan banyak widget, dalam Flutter setiap Widget secara umumnya mempunyai child property, daripada property ini kita boleh menggunakan widget di dalamnya.

MaterialButton mempunyai child yang mengandungi onPressed

Selain child, kita juga tahu child property yang bermaksud kanak-kanak, seperti namanya, bermakna widget itu boleh mempunyai banyak widget, contohnya kita ingin memaparkan senarai menu makanan, maka sudah tentu akan ada banyak widget yang berfungsi untuk memaparkan maklumat tentang nama makanan di dalamnya.

Hasilnya

Kod Pemula Flutter

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHome(),
    );
  }
}

Ini adalah kod pemula yang perlu ada pada setiap projek flutter.

Stateless

Stateless Widget adalah widget yang berfungsi untuk memaparkan perkara-perkara yang bersifat statik dengan mudah setelah data tersebut dipaparkan maka kita tidak akan mengubahnya lagi. Untuk membuatnya, kami hanya menaip stl dan kemudian akan ada pilihan untuk membuatnya.

Contoh Stateless

Stateful

Stateful Widget ialah widget yang digunakan untuk memaparkan data dinamik atau data yang kami paparkan pada bila-bila masa mungkin berubah. Bagi stateful kita hanya menaip stf dan kemudian akan ada pilihan untuk membuatnya.

Contoh Stateful

Widget Scaffold

Scaffold ialah widget utama untuk membuat halaman dalam flutter, scaffold ini mempunyai beberapa parameter yang biasanya kami gunakan seperti appBar untuk mencipta AppBar, body untuk badannya, atau kami juga boleh menambah floating action bar, atau menukar warna latar belakang body.

Scaffold

1. Appbar

Appbar terdiri daripada bar alat dan mungkin widget lain, Sebagai contoh, jika anda ingin menambah butang di sebelah kiri anda menggunakan 'leading' dan 'action' di sebelah kanan.Anda boleh menukar backgroundColor harta untuk menukar warna latar belakang AppBar.

2. Body

Widget dalam badan ‘scaffold’ diletakkan di bahagian atas kiri ruang yang tersedia antara bar aplikasi dan bahagian bawah ‘scaffold’.

class _MyHomeState extends State<MyHome> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text("Aplikasi PertamaKu"),),
      body: Text("Selamat Datang"),
      
      );
    
  }
}
Hasil Body

3. bottomNavigatorBar

Apakah Bar Navigasi Bawah Dalam Flutter?

Bar Navigasi Bawah ialah widget yang memaparkan deretan widget kecil di bahagian bawah apl Flutter. Biasanya, ia digunakan untuk menunjukkan sekitar tiga hingga lima item. Setiap item mesti mempunyai label dan ikon. Bar Navigasi Bawah membolehkan anda memilih satu item pada satu masa dan menavigasi dengan cepat ke halaman tertentu.

Widget BottomNavigationBar diberikan kepada bahagian bottomNavigationBar Scaffold:

Scaffold(
  appBar: AppBar(
    title: const Text('BottomNavigationBar Demo'),
  ),
  bottomNavigationBar: BottomNavigationBar(
    items: const <BottomNavigationBarItem>[
      BottomNavigationBarItem(
        icon: Icon(Icons.call),
        label: 'Calls',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.camera),
        label: 'Camera',
      ),
      BottomNavigationBarItem(
        icon: Icon(Icons.chat),
        label: 'Chats',
      ),
    ],
  ),
);

4. navigationDrawer

navigationDrawer dalam Flutter membolehkan pengguna menavigasi ke halaman berbeza applikasi anda. navigationDrawer ditambah menggunakan widget ‘Drawer’. Ia boleh dibuka melalui gerak isyarat leret atau dengan mengklik ikon menu dalam bar aplikasi.

Contoh kod navigationDrawer :

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      centerTitle: true,
      title: const Text(
        'Navigation Drawer',
      ),
      backgroundColor: const Color(0xff764abc),
    ),
    drawer: Drawer(
      child: ListView(
        // Important: Remove any padding from the ListView.
        padding: EdgeInsets.zero,
        children: [
          const DrawerHeader(
            decoration: BoxDecoration(
              color: Colors.blue,
            ),
            child: Text('Drawer Header'),
          ),
          ListTile(
            leading: Icon(
              Icons.home,
            ),
            title: const Text('Page 1'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
          ListTile(
            leading: Icon(
              Icons.train,
            ),
            title: const Text('Page 2'),
            onTap: () {
              Navigator.pop(context);
            },
          ),
        ],
      ),
    ),
    body: Center(
      child: Column(
        children: [
          SizedBox(
            height: 50,
          ),
        ],
      ),
    ),
  );
}
Hasil

Widget untuk membina UI

1. Text

Widget ini digunakan untuk memaparkan teks dengan gaya tunggal.

Text(
  'Hello World',
  textAlign: TextAlign.center,
),

2. TextStyle

Untuk menggubah warna, font ataupun size Text sedia ada , Anda perlu menggunakan widget TextStyle untuk menambah penggayaan pada teks.

class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Text"),
      ),
      body: Text("Contoh Text",style:
        TextStyle (color: Colors.brown,
            fontSize: 12,
            backgroundColor: Colors.redAccent,
            fontWeight: FontWeight.bold),),
    );
  }
}

3. Image.network

Untuk memaparkan gambar, Anda boleh menggunakan Image.network yang dapat menggunakan gambar dari sumber internet(URL) ataupun gambar dari local.

Image(
  image: NetworkImage('https://flutter.github.io/assets-for-api-docs/assets/widgets/owl.jpg'),
)

4. Sizedbox

SizeBox iaitu untuk membuat kotak, widget ini biasanya digunakan untuk menambah jarak sama ada secara menegak atau mendatar bergantung pada sifat yang kita tetapkan.

5. TextButton

Butang Teks ialah butang Reka Bentuk Bahan yang datang tanpa perubahan sempadan atau ketinggian secara lalai. Oleh itu, ia bergantung pada kedudukan berbanding dengan widget lain. Ia juga boleh digunakan di dalam widget atau dialog Kad dan harus dikumpulkan di salah satu sudut bawah. Dalam Flutter, butang ini boleh dibuat menggunakan widget TextButton yang telah diperkenalkan dalam Flutter 1.22.

TextButton(
    child: Text('Tekan saya'),
    onPressed: () {
      print('Ditekan');
    }
  )

Widget Posisi

1. Column & Row

Untuk melaraskan susun atur atau kedudukan widget, kita akan mengenali dua widget iaitu Row dan Column. Row akan memaparkan widget secara mendatar atau berturut-turut dari kiri ke kanan, widget Row menggunakan sifat kanak-kanak, bermakna widget ini boleh diisi oleh banyak widget.

Row

Cara menggunakan Row widget
class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Row"),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.spaceBetween,
          children: <Widget>[
            Container(
              child: Text("Hello 1"),
              color: Colors.redAccent,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Hello 2"),
              color: Colors.blueAccent,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Hello 3"),
              color: Colors.yellowAccent,
              padding: EdgeInsets.all(16.0),
            ),
          ],
        ));
  }

  }
hasil row

Column

Column terpakai jika ingin widget menunjuk secara menegak atau dari atas ke bawah, widget ini juga menggunakan sifat child, bermakna widget ini boleh diisi oleh banyak widget.

Cara menggunakan column widget
class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Column"),
        ),
        body: Column(
          children: <Widget>[
            Container(
              child: Text("Hello 1"),
              color: Colors.lime,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Hello 2"),
              color: Colors.purple,
              padding: EdgeInsets.all(16.0),
            ),
            Container(
              child: Text("Hello 3"),
              color: Colors.lightBlue,
              padding: EdgeInsets.all(16.0),
            ),
          ],
        ));

  }
}
Hasil Column

2. Container

Container adalah widget yang berfungsi untuk membalut widget lain supaya ia boleh diberikan nilai seperti margin, padding, warna latar belakang, atau hiasan.

body: Container(
          padding: EdgeInsets.all(32.0),
          margin: EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 0),
          decoration: BoxDecoration(
              borderRadius: BorderRadius.circular(20.0),
              color: Colors.redAccent),
          // color: Colors.purple,
          child: Text('Hello', style: TextStyle(color: Colors.black, fontSize: 30.0),)
      )
Contoh Container

3. Center

Center berfungsi supaya kedudukan widget yang kita buat berada di tengah.

Cara Menggunakan widget center
class MyHome extends StatelessWidget {
  const MyHome({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text("Center"),
      ),
      body: Center(child: Text("Text di Centre")),
    );
  }
}
Centre

4. Padding

Widget padding dalam flutter melakukan apa yang dikatakan namanya, iaitu menambah padding atau ruang kosong di sekeliling widget atau sekumpulan widget. Kami boleh menggunakan padding di sekeliling mana-mana widget dengan meletakkannya sebagai anak kepada widget Padding. Saiz widget kanak-kanak di dalam padding dikekang oleh jumlah ruang yang tinggal selepas menambah ruang kosong di sekelilingnya.

Cara Menggunakan widget padding

Icon

Widget ini menggunakan ikon yang disediakan, berikut adalah contoh.


      body: Container(
        padding: EdgeInsets.all(16.0),
        child: Row(
          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
          children: <Widget>[
            Column(
              children: <Widget>[
                Icon(Icons.access_alarm),
                Text('Alarm')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(Icons.phone),
                Text('Phone')
              ],
            ),
            Column(
              children: <Widget>[
                Icon(Icons.book),
                Text('Book')
              ],
            ),
          ],
        ),
      )
    );
 
Contoh Icon

Button

Terdapat 3 widget Button yang biasa digunakan iaitu RaisedButton, MaterialButton dan FlatButton.

Pada butang yang dibangkitkan dan butang Material akan menonjol sedikit.

Pada butang FlatButton akan rata tanpa sebarang kesan seperti bayangan dan lain-lain.

body: Column(
          children: <Widget>[
            RaisedButton(
              color: Colors.redAccent,
              child: Text("Raised Button"),
              onPressed: () {},
            ),
            MaterialButton(
              color: Colors.yellowAccent,
              child: Text("Material Button"),
              onPressed: () {},
            ),
            FlatButton(
              color: Colors.lime,
              child: Text("FlatButton Button"),
              onPressed: () {},
            ),
          ],
        )
Contoh Button

TextFormField

TextFormField ialah widget yang berguna untuk membuat borang untuk diisi oleh pengguna.

body: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Form(
            child: Column(
              children: <Widget>[
                TextFormField(
                  decoration: InputDecoration(hintText: "Username"),
                ),
                TextFormField(
                  obscureText: true,
                  decoration: InputDecoration(hintText: "Password"),
                ),
                RaisedButton(
                  child: Text("Login"),
                  onPressed: () {},
                )
              ],
            ),
          ),
        )
Contoh TextFormField

InkWell

Inkwell berguna untuk menambahkan tindakan pada widget seperti tindakan onTap sebagai contoh:

body: Padding(
            padding: const EdgeInsets.all(8.0),
            child: InkWell(
              onTap: () {
                print("Ditekan");
              },
              child: Container(
                width: 60.0,
                height: 60.0,
                color: Colors.redAccent,
              ),
            )
        )
Bila Butang Merah ditekan
Contoh InkWell

Simple ListView

ListView digunakan untuk memaparkan senarai besar item.

body: ListView(
          children: <Widget>[
            Padding(
              padding: EdgeInsets.all(8.0),
              child: ListTile(
                leading: Icon(Icons.access_alarm),
                title: Text('Alarm'),
              ),
            ),
            ListTile(
              leading: Icon(Icons.phone),
              title: Text('Phone'),
            ),
            ListTile(
              leading: Icon(Icons.camera),
              title: Text('Camera'),
            ),
            ListTile(
              leading: Icon(Icons.message),
              title: Text('Message'),
            ),

          ],
        ),
Contoh ListView

Navigator Push

Untuk membuka halaman baharu, kita boleh menggunakan Navigator.push.

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(),
    );
  }
}

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text("Navigator"),
        ),
        body: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            MaterialButton(
              color: Colors.yellow,
              child: Text("Page 2"),
              onPressed: () {
                  Navigator.push(context, MaterialPageRoute(
                      builder: (context) => PageTwo()
                  )
                );
              },
            ),
          ],
        )
    );
  }
}

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Text("Page Two"),
      ),
    );
  }
}

Navigator Pop

Semasa pop, kami mengalih keluar halaman lapisan atas atau lapisan semasa dipaparkan, jadi ia akan kembali ke halaman sebelumnya.

class PageTwo extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      child: Center(
        child: Column(
          children: <Widget>[
            Text("Page Two"),
            MaterialButton(
              child: Text("Back"),
              onPressed: () {
                Navigator.pop(context);
              },
            )
          ],
        ),
      ),
    );
  }
}

Itulah beberapa widget yang biasa kami gunakan. Selamat Mencuba !

Komen

Alamat e-mel anda tidak akan disiarkan. Medan diperlukan ditanda dengan *

ms_MYMalay