Pada artikel sebelumnya kita sudah membuat hello world di flutter. Namun tampilannya masih tidak bagus, pada artikel ini kita akan mencoba untuk memperbaiki desain pada aplikasi flutter hello world yang sudah kita buat sebelumnya.

flutter

Membuat hello world di Flutter

Mari kita bahas sedikit tentang kode yang sudah kita buat sebelumnya, kode kita seperti ini

import 'package:flutter/material.dart';
void main() {
  runApp(
      Center(
          child: Text(
              "Hello World",
              textDirection: TextDirection.ltr)
      )
  );
}

dan hasilnya seperti ini

flutter hello 2

Tampilannya tidak bagus, karena hanya terdiri dari sebuah kalimat hello world.

Pada artikel ini kita akan membuat hello world di Flutter terlihat lebih baik. Sebelumnya ada beberapa hal yang kami ingin beri tahu kepada anda, kita juga akan mempelajari tentang MaterialApp , Material , Scaffold dan Appbar .

Pertama, kita akan menggunakan MaterialApp dan Material. Berikut contohnya penggunaanya pada kasus kita

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
        title: "Tukangaplikasi.com",
        home:Material(
          color: Colors.lightBlue,
            child:  Center(
                child: Text(
                    "Hello World",
                    textDirection: TextDirection.ltr)
          ),
        )
    ),
  );
}

dan hasilnya seperti ini

Membuat hello world di Flutter

Bagaimana tampilannya sekarang, sudah lumayan kan ?

Sedikit penjelasan, pada kode kita diatas , kita memberikan title : “tukangaplikasi.com”, ini akan terlihat ketika kita memperkecil atau me-minimize aplikasi kita. Lalu, seluruh tampilan yang terlihat sekarang merupakan Material Widget, yang memiliki center widget didalamnya, didalam widget kita masih memiliki child lain, yaitu child text yang memunculkan tulisan Hello World.

Sebelum pindah ke widget lain, mari kita coba untuk mengetahui properti-
properti apa saja yang dapat digunakan pada widget yang kita gunakan diatas.

Untuk melihat properti-properti yang tersedia, kita tinggal menekan tombol ctrl lalu klik pada widget. Contohnya seperti ini

melihat properti

Kita akan mencoba memberikan warna dan merubah ukuran text pada Hello World. Caranya dengan menggunakan properti style

Text(
                  "Hello World",
                  textDirection: TextDirection.ltr,
                  style: TextStyle(
                      color: Colors.red,
                      fontSize: 33
                  ),
              )

Hasilnya akan seperti ini

melihat properti

Sekarang kita akan menambahkan AppBar pada aplikasi yang kita buat, untuk itu kita akan menggunakan Scaffold. Seperti ini contohnya penggunaanya

import 'package:flutter/material.dart';
void main() {
  runApp(
    MaterialApp(
        title: "Tukangaplikasi.com",
        home: Scaffold(
          appBar: AppBar(title: Text("Flutter !!!  ")),
          body: Material(
            color: Colors.lightBlue,
            child: Center(
                child: Text(
              "Hello World",
              textDirection: TextDirection.ltr,
              style: TextStyle(color: Colors.red, fontSize: 33),
            )),
          ),
        )),
  );
}

Kita menambahkan Scaffold pada bagian properti home, lalu sebelumnya kita menggunakan material(), kita memindahkannya kedalam properi body. Hasil dari kode diatas seperti ini

melihat properti

Sekian artikel tentang Membuat hello world di Flutter, semoga bermanfaat

Subscribe To Our Newsletter

Subscribe To Our Newsletter

Kami memberikan tutorial baru tiap harinya !!!

You have Successfully Subscribed!