Flutter #5 - Tampilan Sederhana dengan Stateless Widget

Materi Sebelumnya : Dasar Flutter

Stateless Widget dapat diartikan sebagai Widget yang tidak dapat dirubah atau tidak akan pernah berubah.

Misal kita mempunya widget yang berisi text “Buku yang dibaca : 1” maka dari mulai text itu dibuat sampai aplikasi berjalan pun text tersebut tetap akan selalu menjadi “Buku yang dibaca : 1“.

Langkah - Langkahnya : 

1. Tambahkan kode dibawah pada method main

runApp(HomePage());

2. Buat Class HomePage dengan StatelessWidget yang mengembalikan Nilai method MaterialApp

class HomePage extends StatelessWidget{
  Widget build(BuildContext context){
    return MaterialApp(
      
    );
  }
}

Setiap Membuat Class dengan StatelessWidget harus menambahkan Widget build yang nantinya akan memiliki return berupa method MaterialApp.

3. Tampilan Home dengan Method Scaffold yang memiliki appBar dan body

home: Scaffold(
  appBar: AppBar(

  ),
  body: Center(

  ),
),

4. Mengisi title AppBar dengan Method Text

appBar: AppBar(
  title: Text("Judul")
),

5. Mengisi child pada method Center untuk tampilan Body Dengan menambahkan text menggunakan Method Text

body: Center(
  child: Text("Isi App")
),

Tampilan Lengkapnya Seperti Dibawah Ini 

import 'package:flutter/material.dart';

main(){
  runApp(HomePage());
}

class HomePage extends StatelessWidget{
  Widget build(BuildContext context){
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text("Judul")
        ),
        body: Center(
          child: Text("Isi App")
        ),
      ),
    );
  }
}