Materi Widget
Mengenal widget dasar Flutter (Text, Image, Column, Row, Icon, Button) & membuat aplikasi sederhana.
📘 Tugas:
Buat aplikasi “Kartu Profil Sederhana – Aku & Hobiku”
Syarat:
✅ Minimal 5 widget berbeda
✅ Ada foto/ilustrasi, nama, jurusan
✅ Deskripsi hobi atau cita-cita
✅ Tombol “Hubungi Saya”
Hasil : 
Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run
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(
debugShowCheckedModeBanner: false,
home: Scaffold(
backgroundColor: const Color.fromARGB(255, 149, 155, 160),
appBar: AppBar(
title: const Text('Profil'),
backgroundColor: Color.fromARGB(255, 103, 103, 105),
centerTitle: true,
),
body: Center(
child: Card(
elevation: 10,
margin: const EdgeInsets.all(20),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(20),
),
child: Padding(
padding: const EdgeInsets.all(20),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
const CircleAvatar(
radius: 50,
backgroundImage: AssetImage('assets/rian.jpg'),
),
const SizedBox(height: 15),
const Text(
'Rian Rama Romansah',
style: TextStyle(
fontSize: 24,
fontWeight: FontWeight.bold,
color: Color.fromARGB(255, 0, 0, 0),
),
),
const Text(
'Siswa SMKN 1 Banjar – XI RPL 1',
style: TextStyle(fontSize: 16),
),
const SizedBox(height: 10),
const Text(
'Saya suka ngoding dan membuat aplikasi mobile. '
'Hobi saya bermain futsal dan desain grafis.',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 14),
),
const SizedBox(height: 20),
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: const [
Icon(Icons.code, color: Color.fromARGB(255, 116, 165, 203)),
SizedBox(width: 5),
Icon(Icons.sports_soccer, color: Color.fromARGB(255, 84, 125, 86)),
SizedBox(width: 5),
Icon(Icons.brush, color: Color.fromARGB(255, 133, 93, 140)),
],
),
const SizedBox(height: 20),
ElevatedButton.icon(
onPressed: () {
// Aksi tombol
},
icon: const Icon(Icons.phone),
label: const Text('Hubungi Saya'),
style: ElevatedButton.styleFrom(
backgroundColor: const Color.fromARGB(255, 64, 65, 66),
padding: const EdgeInsets.symmetric(
horizontal: 30,
vertical: 10,
),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(10),
),
),
),
],
),
),
),
),
),
);
}
}
Judul: Materi Widget
Blog ini berisi tutorial singkat tentang bagaimana cara membuat widget profil sederhana di Flutter, yaitu komponen tampilan yang digunakan untuk membentuk antarmuka aplikasi.
---
💻 Isi Blog:
1. Kode Program Flutter
Pada bagian atas postingan, sebelum teks “Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run”, terlihat potongan kode Flutter { } yang menunjukkan bahwa sebelumnya kamu menuliskan source code tampilan profil.
Kemungkinan besar, kode tersebut menggunakan beberapa widget penting seperti:
Scaffold() untuk membuat struktur halaman utama aplikasi.
AppBar() untuk menampilkan judul “Profil”.
Container() dan Card() untuk membuat bingkai profil.
CircleAvatar() untuk menampilkan foto profil berbentuk bulat.
Text() untuk menampilkan nama, jurusan, dan deskripsi.
ElevatedButton() untuk tombol “Hubungi Saya”.
---
📱 Hasil Tampilan Aplikasi:
Pada bagian gambar terlihat hasil tampilan dari kode Flutter tersebut, yaitu sebuah kartu profil dengan desain modern dan rapi.
Tampilannya mencakup:
Foto profil di bagian atas.
Nama: Rian Rama Romansah
Sekolah: SMKN 1 Banjar – XI RPL 1
Deskripsi:
“Saya suka ngoding dan membuat aplikasi mobile.
Hobi saya bermain futsal dan desain grafis.”
Terdapat ikon media sosial kecil di bawah teks deskripsi.
Tombol hitam bertuliskan “Hubungi Saya” di bagian bawah.
---
🧠 Kesimpulan Penjelasan:
Postingan blog ini menjelaskan materi tentang widget Flutter, terutama bagaimana cara menampilkan profil sederhana menggunakan beberapa komponen utama seperti Text, Container, Column, dan ElevatedButton.
Tujuannya agar pembaca lain (teman-teman kamu) dapat memahami cara membuat tampilan profil di Flutter sekaligus mencoba langsung Judul: Materi Widget
Blog ini berisi tutorial singkat tentang bagaimana cara membuat widget profil sederhana di Flutter, yaitu komponen tampilan yang digunakan untuk membentuk antarmuka aplikasi.
---
💻 Isi Blog:
1. Kode Program Flutter
Pada bagian atas postingan, sebelum teks “Kalo kalian pengen tinggal salin codingan ini lalu buka zapp.run”, terlihat potongan kode Flutter { } yang menunjukkan bahwa sebelumnya kamu menuliskan source code tampilan profil.
Kemungkinan besar, kode tersebut menggunakan beberapa widget penting seperti:
Scaffold() untuk membuat struktur halaman utama aplikasi.
AppBar() untuk menampilkan judul “Profil”.
Container() dan Card() untuk membuat bingkai profil.
CircleAvatar() untuk menampilkan foto profil berbentuk bulat.
Text() untuk menampilkan nama, jurusan, dan deskripsi.
ElevatedButton() untuk tombol “Hubungi Saya”.
---
📱 Hasil Tampilan Aplikasi:
Pada bagian gambar terlihat hasil tampilan dari kode Flutter tersebut, yaitu sebuah kartu profil dengan desain modern dan rapi.
Tampilannya mencakup:
Foto profil di bagian atas.
Nama: Rian Rama Romansah
Sekolah: SMKN 1 Banjar – XI RPL 1
Deskripsi:
“Saya suka ngoding dan membuat aplikasi mobile.
Hobi saya bermain futsal dan desain grafis.”
Terdapat ikon media sosial kecil di bawah teks deskripsi.
Tombol hitam bertuliskan “Hubungi Saya” di bagian bawah.
---
🧠 Kesimpulan Penjelasan:
Postingan blog ini menjelaskan materi tentang widget Flutter, terutama bagaimana cara menampilkan profil sederhana menggunakan beberapa komponen utama seperti Text, Container, Column, dan ElevatedButton.
Tujuannya agar pembaca lain (teman-teman kamu) dapat memahami cara membuat tampilan profil di Flutter sekaligus mencoba langsung dengan menyalin kode ke situs zapp.run. menyalin kode ke situs zapp.run.
Oleh : Rian Rama Romansah
Komentar
Posting Komentar