Praktikum Aplikasi Mobile 2 – Flutter

Laporan Praktikum Setup Flutter Development, Stateless & Statefull Widget, Basic Widgets Aplikasi Mobile

Lihat Laporan
Daftar Isi

Flutter

Teori Dasar

Flutter merupakan framework open-source yang dikembangkan oleh Google untuk membangun aplikasi mobile, web, dan desktop dengan satu basis kode (single codebase). Keunggulan utama Flutter adalah kemampuannya menghasilkan aplikasi yang dapat dijalankan di berbagai sistem operasi seperti Android dan iOS tanpa harus menulis kode terpisah.

Dalam Flutter, seluruh tampilan aplikasi dibangun menggunakan widget. Widget adalah komponen dasar yang mewakili setiap elemen antarmuka pengguna, seperti teks, tombol, gambar, dan tata letak. Widget di Flutter dibagi menjadi dua jenis, yaitu Stateless Widget dan Stateful Widget.

  • Stateless Widget adalah widget yang bersifat statis, artinya tampilan tidak akan berubah meskipun ada interaksi dari pengguna. Contohnya adalah teks atau ikon yang hanya ditampilkan tanpa aksi.
  • Stateful Widget adalah widget yang dinamis dan dapat berubah sesuai interaksi atau kondisi tertentu, misalnya tombol yang menampilkan angka yang terus bertambah saat ditekan.

Selain widget, Flutter juga menyediakan berbagai basic widget seperti Text, Container, ElevatedButton, Icon, dan Image yang memudahkan pengembang untuk merancang antarmuka dengan cepat dan fleksibel. Proses pengembangan menggunakan Flutter didukung oleh hot reload, yaitu fitur yang memungkinkan perubahan kode langsung terlihat pada aplikasi tanpa perlu menjalankan ulang proyek.

Melalui praktikum ini, kita akan mempelajari cara menyiapkan lingkungan pengembangan Flutter, memahami konsep dasar Stateless dan Stateful Widget, serta mengimplementasikan berbagai basic widget untuk membangun aplikasi mobile sederhana. Pemahaman konsep dasar ini menjadi pondasi penting dalam pengembangan aplikasi mobile yang lebih kompleks di masa mendatang.

Instalasi Keperluan Praktikum

Instalasi Git

Git digunakan sebagai version control system yang membantu proses pengunduhan (clone) Flutter SDK dari repository resmi serta memudahkan dalam pengelolaan kode. Dengan Git, update Flutter juga dapat dilakukan dengan lebih praktis melalui perintah terminal.

Untuk menginstal Git, ikuti langkah-langkah berikut:

  1. Unduh installer Git dari situs resmi Git.
    2. install-git
  2. Jalankan installer dan ikuti petunjuk yang ada.
  3. Setelah instalasi selesai, buka terminal atau command prompt.
  4. Verifikasi instalasi dengan menjalankan perintah git --version.
    5. versi-git

Instalasi Visual Studio

Visual Studio dibutuhkan karena Flutter memiliki beberapa library yang ditulis menggunakan bahasa C++. Instalasi komponen Desktop Development with C++ memungkinkan Flutter untuk membangun aplikasi desktop atau menjalankan fitur tertentu yang memerlukan dukungan C++.

Untuk menginstal Visual Studio, ikuti langkah-langkah berikut:

  1. Unduh installer Visual Studio dari situs resmi Visual Studio.
    2. install-vs
  2. Jalankan installer dan pilih edisi Community, Professional, atau Enterprise sesuai kebutuhan.
  3. Pada bagian Workloads, centang opsi "Desktop development with C++".
    4. workload-vs
  4. Klik tombol Install untuk memulai proses instalasi.

Instalasi Android Studio

Android Studio adalah IDE resmi untuk pengembangan aplikasi Android. Flutter memerlukan Android Studio untuk menyediakan emulator Android, SDK, dan alat-alat pengembangan lainnya yang diperlukan untuk membangun dan menguji aplikasi mobile.

Untuk menginstal Android Studio, ikuti langkah-langkah berikut:

  1. Unduh installer Android Studio dari situs resmi Android Studio.
    2. install-android-studio
  2. Jalankan installer dan ikuti petunjuk yang ada.
  3. Setelah instalasi selesai, buka Android Studio dan ikuti wizard untuk mengunduh komponen tambahan seperti SDK dan emulator.

Install Ekstensi Flutter di VS Code

Ekstensi Flutter pada Visual Studio Code menyediakan berbagai fitur yang memudahkan pengembangan aplikasi Flutter, seperti snippets kode, debugging, dan integrasi dengan emulator. Ekstensi ini sangat penting untuk meningkatkan produktivitas saat menulis kode Flutter.

Untuk menginstal ekstensi Flutter di Visual Studio Code, ikuti langkah-langkah berikut:

  1. Buka Visual Studio Code.
  2. Masuk ke menu Extensions dengan mengklik ikon Extensions di sidebar kiri atau menekan Ctrl+Shift+X.
  3. Cari "Flutter" di kolom pencarian dan install.
    4. install-flutter

Install SDK Flutter

SDK Flutter adalah inti dari framework yang digunakan untuk membuat aplikasi mobile, web, dan desktop. Dengan mengunduh dan menambahkan Flutter ke Environment Variables (PATH), kita bisa menjalankan perintah Flutter dari terminal, seperti membuat proyek baru atau menjalankan aplikasi.

  1. Unduh SDK Flutter dari situs resmi Flutter.
    2. install-sdk-flutter
  2. Ekstrak file ZIP yang diunduh ke lokasi yang diinginkan.
  3. Tambahkan path Flutter ke Environment Variables (PATH) di sistem operasi Anda.
    4. path
  4. Verifikasi instalasi dengan membuka terminal dan menjalankan perintah flutter doctor.
    5. flutter-doctor

    Via Visual Studio Code

    • Buka Visual Studio Code, kemudian tekan Ctrl+Shift+P untuk membuka Command Palette.
    • Ketik Flutter: New Project dan pilih opsi tersebut.
    • Masukkan nama proyek, misalnya "hai", lalu pilih opsi tersebut dari daftar.
    • Pilih jenis proyek yang ingin dibuat, biasanya "Application".
    • Pilih lokasi penyimpanan proyek di komputer Anda.
    • Masukkan nama proyek “hai” dan tekan Enter

    Struktur Proyek Flutter

    Setelah membuat proyek Flutter, kita akan melihat struktur direktori seperti berikut:

    Struktur-fltr
    • android/ : Berisi pengaturan dan kode khusus untuk menjalankan aplikasi di Android, seperti konfigurasi build.gradle.
    • ios/ : Menyimpan pengaturan dan file untuk iOS, misalnya Info.plist.
    • lib/ : Folder utama kode Dart. Di sinilah file main.dart berada dan menjadi titik awal (entry point) aplikasi.
    • test/ : Berisi file pengujian untuk aplikasi Anda.
    • web/ : Menyimpan file dan pengaturan untuk aplikasi web (jika ada).
    • windows/, macos/, linux/ : Pengaturan khusus untuk membuat aplikasi desktop di masing-masing sistem operasi.
    • build/ : Folder yang dihasilkan secara otomatis saat membangun aplikasi.
    • .dart_tool/ : Menyimpan file internal yang digunakan Flutter dan Dart untuk manajemen paket/dependensi.
    • pubspec.yaml : File konfigurasi yang mendefinisikan dependensi dan metadata proyek.

Stateless dan Stateful Widget

Stateless Widget

Stateless Widget merupakan widget yang data atau tampilannya tidak mengalami perubahan ketika sebuah state dijalankan, Widget ini bersifat statis atau tetap misalnya teks statis, logo aplikasi dll

Buat class baru pada directory lib dengan nama stateless.dart kemudian tambahkan kode program berikut.


import 'package:flutter/material.dart';

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

class MyStateless extends StatelessWidget {
  const MyStateless({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Stateless Widget")),
        body: const Center(child: Text("Ini Body")),
      ),
    );
  }
}

untuk hasilnya bisa dilihat pada gambar berikut

stateles

Stateful Widget

Statefull Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga berubah. contohnya ketika tombol diklik atau ditekan maka tombol berubah warna atau form input nilainya berubah

  1. MyStateFulWidget merupakan class widget yang bersifat tetap (immutable) dan tidak memiliki state
  2. _MyStateFulWidgetState kelas state yang memiliki properti yang dapat berubah (state) dan bertanggung jawab untuk membangun UI

Buat class baru pada directory lib dengan nama stateful.dart kemudian tambahkan kode program berikut.


import 'package:flutter/material.dart';

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

class MyStatefull extends StatefulWidget {
  const MyStatefull({super.key});

  @override
  State createState() => _MyStatefullState();
}

class _MyStatefullState extends State {
  int _kelipatan = 0;
  void _kelipatanDua() {
    setState(() {
      _kelipatan += 2;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
      appBar: AppBar(title: const Text("Statefull Widget")),
      body: Center(
        child: Container(
          width: 100,
          height: 100,
          color: Colors.amber,
          child: Column(
            children: [
              const Text("Kelipatan 2 : "),
              Text(
                '$_kelipatan',
                style: Theme.of(context).textTheme.headlineMedium,
              ),
            ],
          ),
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _kelipatanDua,
        tooltip: "Kelipatan 2",
        child: const Icon(Icons.add),
      ),
    ),
    );
  } 
}

untuk hasilnya bisa dilihat pada gambar berikut

stateful

Basic Widget

Basic widget adalah komponen dasar yang disediakan Flutter untuk membangun tampilan (User Interface/UI) aplikasi.Semua elemen yang terlihat di layar Flutter sebenarnya adalah widget, mulai dari teks, gambar, tombol, hingga tata letak.

Disebut basic karena widget ini merupakan fondasi awal yang paling sering digunakan, contoh propertinya :

  • Text : widget untuk menampilkan teks pada layar, dengan properti seperti style, textAlign, maxLines, overflow, dll.
  • Container : widget serbaguna yang dapat digunakan untuk mengatur tata letak, ukuran, warna latar belakang, margin, padding, dan dekorasi lainnya.
  • Row dan Column : widget untuk mengatur tata letak secara horizontal (Row) atau vertikal (Column).
  • Image : widget untuk menampilkan gambar dari berbagai sumber seperti aset lokal atau URL.
  • ElevatedButton : widget untuk membuat tombol dengan efek elevasi (bayangan).
  • Icon : widget untuk menampilkan ikon dari kumpulan ikon bawaan Flutter atau ikon kustom.
  • Scaffold : widget yang menyediakan struktur dasar untuk halaman aplikasi, termasuk AppBar, Body, FloatingActionButton, dll.

Text

Text merupakan widget dasar yang digunakan untuk menampikan teks pada layar

Properti Text Container

  • data berisi teks yang akan ditampilkan
  • style properti yang menerima objek TextStyle yang digunakan untuk mengontrol tampilan teks seperti fontSize, color, fontWeight (bold), fontStyle (italic)
  • textAlign properti yang digunakan untuk mengatur perataan teks (left, right, center)
  • maxLines properti yang digunakan untuk membatasi jumlah baris teks yang ditampilkan
  • overflow properti yang digunakan untuk mengatur perilaku teks yang melebihi batas (clip, ellipsis)

contoh penggunaan properti pada widget Text


import 'package:flutter/material.dart';

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

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

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text(
            "Hai I am Text Widget",
            style: TextStyle(
              fontSize: 14.0,
              fontWeight: FontWeight.bold,
              color: Colors.red,
              fontStyle: FontStyle.italic,
            ),
            textAlign: TextAlign.center,
          ),
        ),
      ),
    );
  }
}

Container

Container adalah widget serbaguna yang dapat digunakan untuk mengatur tata letak, ukuran, warna latar belakang, margin, padding, dan dekorasi lainnya.

Properti Text Container

  • width properti yang digunakan untuk mengatur lebar container
  • height properti yang digunakan untuk mengatur tinggi container
  • color properti yang digunakan untuk mengatur warna latar belakang container
  • margin properti yang digunakan untuk mengatur jarak luar container
  • padding properti yang digunakan untuk mengatur jarak dalam container
  • decoration properti yang digunakan untuk menambahkan dekorasi seperti border, borderRadius, boxShadow, gradient, dll.

contoh penggunaan properti pada widget Container


import 'package:flutter/material.dart';

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

class MyContainer extends StatefulWidget {
  const MyContainer({super.key});

  @override
  State createState() => _MyContainerState();
}

class _MyContainerState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Container Widget")),
        body: Center(
          child: Container(
            width: 200,
            height: 200,
            margin: const EdgeInsets.all(20),
            padding: const EdgeInsets.all(20),
            decoration: BoxDecoration(
              color: Colors.blueAccent,
              border: Border.all(color: Colors.white, width: 2),
              borderRadius: BorderRadius.circular(10),
            ),
          ),
        ),
      ),
    );
  }
}

Berikut hasil dari kode tersebut

text

ElevatedButton

ElevatedButton adalah widget yang digunakan untuk membuat tombol dengan efek elevasi (bayangan) yang memberikan kesan tombol tersebut dapat ditekan.

Properti ElevatedButton

  • onPressed properti yang menerima fungsi callback yang akan dipanggil ketika tombol ditekan. Jika null, tombol akan dinonaktifkan.
  • child properti yang menerima widget anak yang akan ditampilkan di dalam tombol, biasanya berupa teks atau ikon.
  • style properti yang digunakan untuk mengatur tampilan tombol seperti warna latar belakang, bentuk, padding, dll.

contoh penggunaan properti pada widget ElevatedButton


import 'package:flutter/material.dart';

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

class MyElevatedButton extends StatefulWidget {
  const MyElevatedButton({super.key});

  @override
  State createState() => _MyElevatedButtonState();
}

class _MyElevatedButtonState extends State{
  @override
  Widget build(BuildContext context){
    return MaterialApp( 
      home: Scaffold(
        appBar: AppBar(title: const Text("Elevated Button")),
        body: Center(
          child: ElevatedButton(
            onPressed: () {
              print("tombol ditekan");
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Colors.green,
            foregroundColor: Colors.white, 
            padding: const EdgeInsets.all(20), 
            shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(16))),
        child: const Text("Elevated Button"),
          ),
        ),  
      ),
  );
  }
}

Berikut hasil dari kode tersebut

elevatedbutton

Icon

Icon merupakan widget yang digunakan untuk menampilkan icon, Flutter telah menyediakan set icon seperti Material Icons dari Google atau Cupertino Icons dari Apple

Properti Icon

  • icon properti yang menerima objek IconData yang menentukan ikon yang akan ditampilkan, seperti Icons.home, Icons.favorite, dll.
  • size properti yang digunakan untuk mengatur ukuran ikon.
  • color properti yang digunakan untuk mengatur warna ikon.

contoh penggunaan properti pada widget Icon


import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';

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

class MyIcons extends StatefulWidget {
  const MyIcons({super.key});

  @override
  State createState() => _MyIconsState();
}

class _MyIconsState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Icon widget")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Icon(Icons.add, color: Colors.amber, size: 50.0),
              // Apple Icons
              Icon(CupertinoIcons.add, color: Colors.red, size: 50.0),
            ],
          ),
        ),
      ),
    );
  }
}

Berikut hasil dari kode tersebut

icon

Image

Image adalah widget yang digunakan untuk menampilkan gambar dari berbagai sumber seperti asset, network, memory (byte data), file system.

Properti Image

  • image properti yang menerima objek ImageProvider yang menentukan sumber gambar, seperti AssetImage, NetworkImage, dll.
  • width properti yang digunakan untuk mengatur lebar gambar.
  • height properti yang digunakan untuk mengatur tinggi gambar.
  • fit properti yang digunakan untuk mengatur bagaimana gambar diubah ukurannya agar sesuai dengan ruang yang tersedia (cover, contain, fill, dll).
  • alignment properti yang digunakan untuk mengatur posisi gambar di dalam ruang yang tersedia (center, topLeft, bottomRight, dll).

Penggunan widget image ini sendiri bisa dilakukan dengan 2 cara yaitu

  • Image dari asset lokal : bisa menggunakan Image.asset()
  • Image dari network (url) : bisa menggunakan Image.network() atau SvgPicture.network()

contoh penggunaan properti pada widget Image


import 'package:flutter/material.dart';

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

class MyNetworkImage extends StatelessWidget {
  const MyNetworkImage({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Network SVG Image")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Image.asset(
                'assets/images/LogoUnand.png',
                width: 100,
                height: 150,
              ),
              Image.network(
                "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
                width: 120,
                height: 120,
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Berikut hasil dari kode tersebut

image

Circle Avatar

CircleAvatar adalah widget yang digunakan untuk menampilkan gambar profil dalam bentuk lingkaran.

Properti CircleAvatar

  • backgroundImage properti yang menerima objek ImageProvider yang menentukan sumber gambar latar belakang.
  • radius properti yang digunakan untuk mengatur jari-jari lingkaran.
  • child properti yang digunakan untuk menampilkan widget di atas lingkaran.

contoh penggunaan properti pada widget CircleAvatar


import 'package:flutter/material.dart';

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

class MyCircleAvatar extends StatefulWidget {
  const MyCircleAvatar({super.key});

  @override
  State createState() => _MyCircleAvatarState();
}

class _MyCircleAvatarState extends State {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Icon widget")),
        body: Center(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              CircleAvatar(
                radius: 30,
                backgroundColor: Colors.green,
                child: Text(
                  "IF",
                  style: TextStyle(fontSize: 20, color: Colors.white),
                ),
              ),
              SizedBox(width: 10),
              CircleAvatar(
                radius: 30,
                backgroundColor: Colors.blue,
                child: Icon(Icons.person, color: Colors.white, size: 30),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Berikut hasil dari kode tersebut

circleavatar

Tugas

Tampilan Widget

1. Buatlah tampilan widget secara vertical dan horizontal dengan menggunakan minimal 3 buah basic widget dalam 1 tampilan 


import 'package:flutter/material.dart';

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

class Tugas1 extends StatelessWidget {
  const Tugas1({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Tugas 1 Praktikum 2 App Mobile")),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text(
                "Vertikal",
                style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
              ),
              SizedBox(height: 10),

              CircleAvatar(
                radius: 30,
                backgroundColor: Colors.blueAccent,
                child: Text(
                  "MGA",
                  style: TextStyle(
                    fontSize: 20,
                    fontFamily: 'Tahoma',
                    color: Colors.blueGrey[50],
                  ),
                ),
              ),
              SizedBox(height: 10),

              ElevatedButton(
                onPressed: () {
                  print("Tombol ditekan");
                },
                style: ElevatedButton.styleFrom(
                  backgroundColor: Colors.grey,
                  foregroundColor: Colors.white,
                  padding: const EdgeInsets.all(20),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(16),
                  ),
                ),
                child: const Text("Elevated Button"),
              ),

              SizedBox(height: 10),
              Image.asset(
                'assets/images/LogoUnand.png',
                width: 100,
                height: 100,
              ),

              SizedBox(height: 10),
              Icon(Icons.flutter_dash, size: 50, color: Colors.blue),

              SizedBox(height: 10),

              Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Text(
                    "Vertikal",
                    style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
                  ),
                  SizedBox(width: 10),

                  CircleAvatar(
                    radius: 30,
                    backgroundColor: Colors.blueAccent,
                    child: Text(
                      "MGA",
                      style: TextStyle(
                        fontSize: 20,
                        fontFamily: 'Tahoma',
                        color: Colors.blueGrey[50],
                      ),
                    ),
                  ),
                  SizedBox(width: 10),

                  ElevatedButton(
                    onPressed: () {
                      print("Tombol ditekan");
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.grey,
                      foregroundColor: Colors.white,
                      padding: const EdgeInsets.all(20),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(16),
                      ),
                    ),
                    child: const Text("Elevated Button"),
                  ),

                  SizedBox(width: 10),
                  Image.asset(
                    'assets/images/LogoUnand.png',
                    width: 100,
                    height: 100,
                  ),

                  SizedBox(height: 10),
                  Icon(Icons.flutter_dash, size: 50, color: Colors.blue),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Berikut tampilan hasilnya.

2. Buatlah tampilan yang berisi informasi profile kalian (foto, nama, nim, Alamat, nomor handphone, jurusan) dengan mengimplementasikan seluruh basic widget yang ada pada modul praktikum ini


import 'package:flutter/material.dart';

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

class MyProfileApp extends StatelessWidget {
  const MyProfileApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: const Text("Profil Saya"),
          backgroundColor: Colors.blueAccent,
        ),
        body: SingleChildScrollView(
          child: Center(
            child: Container(
              margin: const EdgeInsets.all(16),
              padding: const EdgeInsets.all(16),
              decoration: BoxDecoration(
                color: Colors.blue[50],
                borderRadius: BorderRadius.circular(16),
                border: Border.all(color: Colors.blueAccent, width: 2),
              ),
              child: Column(
                children: [
                  // FOTO PROFIL
                  const CircleAvatar(
                    radius: 60,
                    backgroundImage: AssetImage('assets/images/profil.jpg'),
                  ),
                  const SizedBox(height: 20),

                  // NAMA
                  const Text(
                    "Nama : Muhammad Galid Avero",
                    style: TextStyle(
                      fontSize: 20,
                      fontWeight: FontWeight.bold,
                      color: Colors.blueAccent,
                    ),
                    textAlign: TextAlign.center,
                  ),

                  const SizedBox(height: 10),

                  // NIM
                  const Text(
                    "NIM : 2311532008",
                    style: TextStyle(fontSize: 16),
                  ),

                  const SizedBox(height: 10),

                  // JURUSAN
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Icon(Icons.school, color: Colors.blueAccent),
                      SizedBox(width: 8),
                      Text(
                        "Jurusan : Informatika",
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),

                  const SizedBox(height: 10),
                  // ALAMAT
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Icon(Icons.home, color: Colors.blueAccent),
                      SizedBox(width: 8),
                      Text(
                        "Alamat : Gunung Pangilun, Kota Padang, Indonesia",
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),

                  const SizedBox(height: 10),

                  //NO HP
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Icon(Icons.phone, color: Colors.blueAccent),
                      SizedBox(width: 8),
                      Text(
                        "No HP : 082386123456",
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),

                  const SizedBox(height: 10),

                  // EMAIL
                  Row(
                    mainAxisAlignment: MainAxisAlignment.center,
                    children: const [
                      Icon(Icons.email, color: Colors.blueAccent),
                      SizedBox(width: 8),
                      Text(
                        "Email : mgalidavero05@gmail.com",
                        style: TextStyle(fontSize: 16),
                      ),
                    ],
                  ),

                  const Text(
                    "Logo Universitas",
                    style: TextStyle(fontWeight: FontWeight.bold),
                  ),
                  const SizedBox(height: 10),
                  Image.network(
                    "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
                    width: 120,
                    height: 120,
                  ),

                  const SizedBox(height: 20),

                  // ELEVATED BUTTON
                  ElevatedButton.icon(
                    onPressed: () {
                      // aksi sederhana
                      ScaffoldMessenger.of(context).showSnackBar(
                        const SnackBar(content: Text("Profil anda diklik!")),
                      );
                    },
                    style: ElevatedButton.styleFrom(
                      backgroundColor: Colors.blueAccent,
                      foregroundColor: Colors.white,
                      padding: const EdgeInsets.symmetric(
                        horizontal: 24,
                        vertical: 12,
                      ),
                      shape: RoundedRectangleBorder(
                        borderRadius: BorderRadius.circular(12),
                      ),
                    ),
                    icon: const Icon(Icons.info),
                    label: const Text("Lihat Detail"),
                  ),
                ],
              ),
            ),
          ),
        ),
      ),
    );
  }
}

Berikut tampilan hasilnya.

Link Project

GitHub Repository