Menambahkan Widget dan Icon Menu Pada Project FLutter

-

 Assalamu'alaikum warahmatullahi wabarakatuh

disini kita akan membuat baru project yang sudah terhubung atau menggunakan widget dan button

agar struktur dari heading hingga ke body dan footer. langsung saja kita mulai untuk membuat project barunya

NOTE: PASTIKAN MENGGUNAKAN JARINGAN YANG STABIL DAN BAGUS

1. pertama marilah kita membuka aplikasi vs code


2. lalu klik view dan pillih command pallete  atau bisa menggunakan shortcut ctrl+shif+p ketik flutter new aplicattion project dan enter


3. selanjutnya pilih lokasi penyimpanan, klik "select a folder to create the project in" dan buat nama aplikasi yang akan kita buat

4. jika proses telah selesai maka akan menampilkan code yang panjang, pada bagian project klik test buka kelas widget_test.dart dan berikan komentar pada semua source code tersebut. kemudian ganti code pada bagian main.dart menjadi code berikut:

import 'package:flutter/material.dart';

class Tampilan extends StatelessWidget {
  Widget build(BuildContext context) {
    return MaterialApp(
        home: Scaffold(
      appBar: AppBar(
        leading: const IconButton(
          icon: Icon(Icons.menu),
          tooltip: 'Navigation menu',
          onPressed: null,
        ),
        title: Text('Sample Code'),
      ),
      body: Center(child: Text('Hallo I am Alwi Nopriansa')),
      backgroundColor: Colors.blueGrey.shade200,
    ));
  }
}

void main() {
  runApp(Tampilan());
} 

5. hubungkan smartphone dengan laptop, atur opsi pengembang dismartphone, dan  aktifkan juga debugging USB. jika smartphone meminta konfirmasi maka klik izinkan

tampilan dari smartphone

6. tekan f5 untuk menjalankan code, atau pergi ke Run dan pilih start debugging

NOTE : pastikan bahwa smartphone sudah terhubung ke vscode dan sudah terbaca

    


7. tunggu hingga hasil terlihat di smarthpone kalian, memerlukan waktu yang lama untuk melakukan koneksi ini karena tergantung jaringan dan kecepatan laptop yang digunakan.

hasil yang ditampilkan di smartphone 



8. jika telah selesai maka koneksi pemrograman mobile menggunakan vs code dan output dengan smartphone telah selesai


perlu diketahui bahwa disini kita melihat hasilnya dari smartphone, jika tidak dapat terhubung maka ulangi dan baca eror agar supaya bisa terhubung dengan stabil.

Komentar

Posting Komentar

Postingan populer dari blog ini

Cara Mudah Membuat Widget Container pada Flutter

-
Gambar
Assalamualaikum warahmatullahi wabarakatuh Apa itu Widget pada Flutter?  Widget  adalah Semua komponen seperti button, text, icon dan sebagainya yang membentuk sebuah tampilan atau kerangka aplikasi. Keseluruhan dari aplikasi yang terlihat pada layar merupakan kumpulan widget. Widget pada Flutter sendiri terinspirasi dari  React . Pada Flutter, terdapat berbagai macam jenis layout. Layout yang paling mendasar adalah row dan column. Row dan column memungkinkan kita untuk menyusun widget atau komponen-komponen UI, baik secara horizontal mau pun secara vertical.  Apabila anda ingin menambahkan padding, margin, border, dan atau warna background pada suatu widget, maka disinilah fungsi dari Container class pada Flutter widget. pada widget biasanya terdapat beberapa wadah atau disebut sebagai container. container ini    dapat menyimpan berbagai macam attribute dan menampung berbagai macam fungsi objek yang membuat kotak container bisa menampilkan berbagai macam e...
Baca selengkapnya

The combination looping for and compilation education with Java Language's

-
Gambar
  Assalamualaikum warahmatullahi wabarakatuh Okey kita akan melanjutkan materi kita kembali, pada kali ini kita akan membahas mengenai program lagi. Nah disini saya akan membahas mengenai perulangan for. Langsung saja tanpa basa basi kita ke pembahasan materinya: Contoh program sederhana dengan menggunakan perulangan for : import   java.util.Scanner ; public   class   kasirPolkam {      public   static   void   main ( String []args){ login ();} static   void   login (){              String   barang [] =new   String [ 3 ];           String   data [] = { "Alwi" , "0207" };           String   nama ,  sandi ;           Scanner   apa =new   Scanner ( System . in );       ...
Baca selengkapnya

Melakukan koneksi kirim pesan antar socket dengan port / host menggunakan bahasa java

-
Gambar
  Assalamu’alaikum warahmatullahi wabarakatuh Pada pada kali ini saya akan membahas mengenai Chat antar port socket, nah pada kali ini kita menggunakan server sebagai penerima/receiver   messagenya lalu client sebagai pengirim pesan kepada server. Nah saya akan membahas mengenai satu-persatu bagian dari beberapa fungsi atau penjelasan code dari tiap kegunaannya.   Bagian pertama kita akan membahas mengenai class ChatServer.java   import  java.io.*; //mengimportkan library input dan output import  java.net.*;// mengiimportkan library network   public   class   ChatServer  { //memberikan nama class sekaligus nama file penyimpanan      private   static   ServerSocket   servSock ; //membuat variabel Server Socket yang bersifat private      private   static   final   int   PORT  =  1234 ; //membuat variabel port dengan nilai = 1234 ...
Baca selengkapnya