Materi Pembelajaran: Desain Mobile Responsif dan Pembuatan Wireframe

 

Materi Pembelajaran: Desain Mobile Responsif dan Pembuatan Wireframe

---

A. Pendahuluan

Desain mobile responsif adalah cara membuat tampilan aplikasi yang bisa menyesuaikan dengan ukuran layar, baik itu ponsel atau tablet. Sebuah aplikasi harus tetap terlihat rapi dan mudah digunakan meskipun perangkat yang digunakan memiliki ukuran layar yang berbeda.

B. Tujuan Pembelajaran

Setelah menyelesaikan kegiatan ini, peserta didik diharapkan mampu:

1. Memahami dasar-dasar desain mobile yang responsif.
2. Membuat tata letak aplikasi yang bagus dan mudah digunakan.
3. Mendesain wireframe yang bisa menyesuaikan ukuran layar, baik itu untuk ponsel kecil atau tablet.

---

1. Prinsip Dasar Desain Mobile yang Responsif

Apa itu Desain Responsif?

Desain responsif memastikan aplikasi terlihat baik dan berfungsi dengan baik di semua ukuran layar. Ini penting karena pengguna menggunakan perangkat dengan ukuran layar yang berbeda-beda, mulai dari ponsel kecil hingga tablet besar.

Contoh Sederhana:

• Ponsel (layar kecil): Tampilan aplikasi biasanya akan menampilkan satu kolom konten, dengan elemen-elemen yang disusun secara vertikal.
• Tablet (layar besar): Tampilan aplikasi bisa dibagi menjadi beberapa kolom, dengan lebih banyak konten yang bisa ditampilkan sekaligus.

Prinsip Utama:

1. Grid Fleksibel: Menggunakan grid atau kolom-kolom yang bisa menyesuaikan lebar layar. Contoh: di layar kecil, sebuah gambar mungkin memenuhi satu kolom, tetapi di layar besar, gambar itu hanya memenuhi setengah lebar layar.

2. Media Queries: Teknologi yang digunakan untuk mendeteksi ukuran layar pengguna dan menyesuaikan tampilan secara otomatis.

3. Elemen yang Fleksibel: Gambar dan teks harus bisa berubah ukuran agar tetap terlihat baik di berbagai ukuran layar.

4. Fokus pada Elemen Utama: Pastikan elemen penting seperti tombol atau menu tetap mudah diakses dan terlihat jelas di semua perangkat.

---

2. Tata Letak (Layout) yang Estetis dan Fungsional pada Aplikasi Mobile

Apa itu Tata Letak?

Tata letak adalah bagaimana elemen-elemen seperti tombol, teks, dan gambar ditempatkan di layar. Tata letak yang baik akan membuat aplikasi mudah digunakan dan menarik secara visual.

Prinsip Layout yang Baik:

• Mudah Dinavigasi: Pengguna harus bisa menemukan apa yang mereka butuhkan dengan cepat.
• Penggunaan Ruang yang Efisien: Jangan ada terlalu banyak ruang kosong, tetapi juga jangan terlalu penuh dengan elemen.
• Konsisten: Gunakan warna, ukuran font, dan gaya yang sama di seluruh aplikasi.

Contoh Layout:

• Ponsel: Pada ponsel, biasanya kita menggunakan tata letak vertikal dengan satu kolom yang menampilkan konten secara berurutan dari atas ke bawah.
• Tablet: Pada tablet, tata letak bisa lebih lebar, misalnya, satu kolom di kiri untuk menu dan satu kolom di kanan untuk konten utama.

---

3. Membuat Wireframe yang Responsif

Apa itu Wireframe?

Wireframe adalah sketsa atau gambar kasar yang menunjukkan tata letak aplikasi sebelum desain akhir. Ini seperti cetak biru dari aplikasi yang akan dibuat.

Langkah-langkah Membuat Wireframe:

1. Identifikasi Ukuran Layar:

   • Tentukan perangkat target: ponsel kecil (5 inci) atau tablet besar (10 inci).

2. Tentukan Tata Letak Utama:

   • Buat layout dengan grid fleksibel yang bisa menyesuaikan ukuran layar.
   • Misalnya: Pada ponsel, gunakan satu kolom, sementara pada tablet bisa menggunakan dua kolom.

3. Adaptasi untuk Ukuran Layar Berbeda:

   • Di layar kecil, susun elemen-elemen secara vertikal.
   • Di layar besar, gunakan ruang lebih baik dengan tata letak horizontal.

4. Gunakan Alat Wireframing:

   • Alat seperti Figma, Sketch, atau Adobe XD sangat membantu untuk membuat wireframe yang bisa diubah-ubah dengan mudah.

---

Contoh Wireframe

Wireframe untuk Ponsel (5 inci):

• Header: Terdapat logo di bagian atas, diikuti dengan tombol menu.
• Navigasi Bawah: Ikon untuk "Home," "Kursus," "Profil," dan "Chat."
• Konten Utama: Terdapat tombol "Lanjutkan Belajar" dan daftar kursus yang sedang diikuti oleh pengguna.

Wireframe untuk Tablet (10 inci):

• Sidebar: Terdapat menu navigasi di sebelah kiri dengan ikon "Home," "Kursus," dan lainnya.
• Konten Utama: Dibagi menjadi dua bagian, di mana sebelah kiri menampilkan daftar kursus, dan sebelah kanan menampilkan detail kursus.

---

C. Evaluasi

Tugas Akhir:
Buat wireframe untuk aplikasi belajar yang memiliki dua versi:

1. Tampilan untuk ponsel kecil (5 inci).
2. Tampilan untuk tablet (10 inci).

Kriteria Penilaian:

• Tata letak yang responsif dan berfungsi dengan baik di ukuran layar yang berbeda.
• Tampilan yang estetis dan rapi.
• Konsistensi dalam penggunaan elemen desain.

---

Sumber Bacaan Tambahan:

1. Responsive Web Design
2. UI/UX Design for Mobile

Dengan materi ini, peserta didik diharapkan bisa memahami dan membuat desain aplikasi yang responsif, mudah digunakan, dan memiliki tata letak yang estetis.

Read More

Pemilihan antara Dart/Flutter dan React Native untuk pengembangan mobile app

Pemilihan antara Dart/Flutter dan React Native untuk pengembangan mobile app bergantung pada beberapa faktor, termasuk tujuan proyek, kemampuan tim, performa yang dibutuhkan, dan ekosistem yang diinginkan. Berikut adalah perbandingan antara keduanya untuk membantu Anda membuat keputusan:

1. Bahasa Pemrograman

• Flutter (Dart): Menggunakan bahasa Dart. Dart cukup efisien untuk pengembangan UI yang cepat, tetapi masih belum sepopuler JavaScript.
• React Native: Menggunakan JavaScript (dan JSX), salah satu bahasa pemrograman paling populer di dunia. Jika Anda atau tim Anda sudah familiar dengan JavaScript atau React.js, maka React Native bisa menjadi pilihan yang baik.

2. Performance

• Flutter: Flutter lebih unggul dalam hal performa karena menggunakan rendering engine sendiri (Skia). Flutter tidak memerlukan jembatan (bridge) antara kode native dan UI, sehingga performa lebih mendekati native dibandingkan React Native.
• React Native: React Native menggunakan jembatan (bridge) untuk berkomunikasi antara komponen JavaScript dan kode native, yang kadang-kadang bisa menimbulkan sedikit penurunan performa, terutama pada aplikasi dengan banyak animasi atau yang membutuhkan kinerja tinggi.

3. Look & Feel (UI/UX)

• Flutter: Flutter memiliki komponen UI bawaan (widgets) yang menyerupai tampilan native untuk iOS dan Android, tetapi dibuat secara konsisten di berbagai perangkat. Karena Flutter menggunakan rendering engine sendiri, UI/UX sering kali terlihat lebih konsisten di berbagai platform.
• React Native: Mengandalkan komponen UI native yang ada di iOS dan Android. Hal ini memberikan tampilan dan nuansa yang lebih autentik untuk setiap platform, tetapi bisa jadi memerlukan penyesuaian kode untuk menjaga konsistensi antar platform.

4. Pengembangan dan Produktivitas

• Flutter: Flutter menawarkan pengembangan yang cepat dengan fitur seperti hot reload, yang sangat membantu saat membangun UI kompleks. Dukungan dokumentasi Flutter juga cukup lengkap.
• React Native: React Native juga menawarkan hot reload dan produktivitas yang tinggi, terutama bagi pengembang yang sudah terbiasa dengan ekosistem JavaScript. Namun, sering kali perlu menggunakan library pihak ketiga untuk fitur tertentu yang mungkin mempengaruhi stabilitas aplikasi.

5. Ekosistem dan Library

• Flutter: Ekosistem Flutter berkembang dengan cepat dan komunitasnya terus tumbuh, tetapi masih lebih kecil dibandingkan React Native. Beberapa library atau plugin mungkin belum tersedia atau masih dalam tahap pengembangan aktif.
• React Native: Karena React Native telah ada lebih lama dan menggunakan JavaScript, ekosistemnya lebih besar. Ada banyak library dan plugin yang dapat digunakan, serta banyak sumber daya komunitas yang dapat membantu mempercepat pengembangan.

6. Dukungan Platform

• Flutter: Selain iOS dan Android, Flutter dapat mendukung pengembangan aplikasi desktop (Windows, macOS, Linux) dan web dengan kode yang sama. Ini sangat berguna jika Anda ingin memiliki aplikasi lintas platform yang luas.
• React Native: Meskipun fokus utama React Native adalah aplikasi mobile, dukungan untuk aplikasi web dan desktop ada, tetapi tidak sekuat Flutter. Anda memerlukan alat tambahan seperti React Native for Web atau Electron untuk desktop.

7. Komunitas dan Dukungan

• Flutter: Komunitas Flutter berkembang dengan cepat dan banyak digunakan oleh pengembang yang menginginkan kinerja aplikasi mendekati native dan pengalaman UI yang konsisten.
• React Native: React Native memiliki komunitas yang lebih besar karena dukungannya oleh Facebook dan pengembang yang sudah familiar dengan React.js.

Kesimpulan:

• Pilih Flutter jika:

  • Anda menginginkan performa yang mendekati native.
  • Anda ingin mengembangkan aplikasi lintas platform (mobile, desktop, web) dengan satu basis kode.
  • Anda membutuhkan konsistensi UI/UX di berbagai platform.

• Pilih React Native jika:

  • Anda atau tim Anda sudah menguasai JavaScript/React.
  • Anda ingin memanfaatkan ekosistem JavaScript yang luas dan populer.
  • Anda ingin tampilan dan nuansa yang lebih "native" untuk iOS dan Android.

Jika Anda mengutamakan performa dan konsistensi UI, Flutter mungkin lebih cocok. Namun, jika Anda atau tim lebih berpengalaman dengan JavaScript dan ingin memanfaatkan komunitas yang lebih besar, React Native bisa menjadi pilihan yang lebih baik.

Read More

Dart untuk aplikasi Flutter yang menampilkan jadwal pelajaran

Berikut adalah kode Dart untuk aplikasi Flutter yang menampilkan jadwal pelajaran dari Senin hingga Jumat, di mana setiap pelajaran menampilkan nama guru, waktu, dan tempat pembelajaran. Data ditampilkan satu layar per hari, dengan navigasi menggunakan gesture geser (swipe) atau melalui menu navigasi tab bar.

### **Langkah-Langkah:**

1. **Buat Proyek Flutter Baru**: 

   Jika belum memiliki proyek Flutter, buat terlebih dahulu dengan perintah:

   ```

   flutter create jadwal_pelajaran

   cd jadwal_pelajaran

   ```

2. **Ganti Kode `lib/main.dart`**: 

   Gantilah isi file `lib/main.dart` dengan kode berikut ini:

```dart

import 'package:flutter/material.dart';

void main() {

  runApp(JadwalPelajaranApp());

}

class JadwalPelajaranApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Jadwal Pelajaran',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: JadwalPelajaranHome(),

    );

  }

}

class JadwalPelajaranHome extends StatefulWidget {

  @override

  _JadwalPelajaranHomeState createState() => _JadwalPelajaranHomeState();

}

class _JadwalPelajaranHomeState extends State<JadwalPelajaranHome> with SingleTickerProviderStateMixin {

  TabController? _tabController;

  @override

  void initState() {

    super.initState();

    _tabController = TabController(length: 5, vsync: this);

  }

  @override

  void dispose() {

    _tabController?.dispose();

    super.dispose();

  }

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Jadwal Pelajaran'),

        bottom: TabBar(

          controller: _tabController,

          tabs: [

            Tab(text: 'Senin'),

            Tab(text: 'Selasa'),

            Tab(text: 'Rabu'),

            Tab(text: 'Kamis'),

            Tab(text: 'Jumat'),

          ],

        ),

      ),

      body: TabBarView(

        controller: _tabController,

        children: [

          HariWidget(hari: 'Senin', pelajaran: jadwalPelajaran['Senin']!),

          HariWidget(hari: 'Selasa', pelajaran: jadwalPelajaran['Selasa']!),

          HariWidget(hari: 'Rabu', pelajaran: jadwalPelajaran['Rabu']!),

          HariWidget(hari: 'Kamis', pelajaran: jadwalPelajaran['Kamis']!),

          HariWidget(hari: 'Jumat', pelajaran: jadwalPelajaran['Jumat']!),

        ],

      ),

    );

  }

}

class HariWidget extends StatelessWidget {

  final String hari;

  final List<Map<String, String>> pelajaran;

  HariWidget({required this.hari, required this.pelajaran});

  @override

  Widget build(BuildContext context) {

    return ListView.builder(

      itemCount: pelajaran.length,

      itemBuilder: (context, index) {

        final item = pelajaran[index];

        return Card(

          margin: EdgeInsets.all(8.0),

          child: ListTile(

            title: Text('${item['mata_pelajaran']}'),

            subtitle: Text('Guru: ${item['guru']}\nWaktu: ${item['waktu']}\nTempat: ${item['tempat']}'),

          ),

        );

      },

    );

  }

}

final Map<String, List<Map<String, String>>> jadwalPelajaran = {

  'Senin': [

    {'mata_pelajaran': 'Matematika', 'guru': 'Bu Sari', 'waktu': '08:00 - 09:30', 'tempat': 'Kelas 12A'},

    {'mata_pelajaran': 'Bahasa Indonesia', 'guru': 'Pak Budi', 'waktu': '09:45 - 11:15', 'tempat': 'Kelas 12B'},

  ],

  'Selasa': [

    {'mata_pelajaran': 'Fisika', 'guru': 'Pak Joko', 'waktu': '08:00 - 09:30', 'tempat': 'Lab Fisika'},

    {'mata_pelajaran': 'Kimia', 'guru': 'Bu Lestari', 'waktu': '09:45 - 11:15', 'tempat': 'Lab Kimia'},

  ],

  'Rabu': [

    {'mata_pelajaran': 'Biologi', 'guru': 'Pak Dedi', 'waktu': '08:00 - 09:30', 'tempat': 'Lab Biologi'},

    {'mata_pelajaran': 'Bahasa Inggris', 'guru': 'Bu Rina', 'waktu': '09:45 - 11:15', 'tempat': 'Kelas 12C'},

  ],

  'Kamis': [

    {'mata_pelajaran': 'Sejarah', 'guru': 'Pak Anto', 'waktu': '08:00 - 09:30', 'tempat': 'Kelas 12D'},

    {'mata_pelajaran': 'Geografi', 'guru': 'Bu Ani', 'waktu': '09:45 - 11:15', 'tempat': 'Kelas 12E'},

  ],

  'Jumat': [

    {'mata_pelajaran': 'Ekonomi', 'guru': 'Pak Agus', 'waktu': '08:00 - 09:30', 'tempat': 'Kelas 12F'},

    {'mata_pelajaran': 'Sosiologi', 'guru': 'Bu Fitri', 'waktu': '09:45 - 11:15', 'tempat': 'Kelas 12G'},

  ],

};

```

### **Penjelasan Kode:**

1. **TabController** digunakan untuk membuat tab navigasi antar hari.

2. **TabBar** digunakan untuk menampilkan tab navigasi di bagian atas, dengan label hari.

3. **TabBarView** digunakan untuk menampilkan konten berbeda pada tiap tab.

4. **HariWidget** adalah widget yang menerima daftar pelajaran untuk setiap hari dan menampilkannya dalam bentuk kartu (card) dengan ListTile.

5. **jadwalPelajaran** adalah variabel `Map` yang berisi jadwal untuk setiap hari. Setiap harinya memiliki daftar pelajaran yang terdiri dari mata pelajaran, nama guru, waktu, dan tempat.

### **Fitur:**

- **Navigasi TabBar**: Pengguna dapat berpindah hari dengan mengetuk tab di bagian atas.

- **Swipe Gesture**: Pengguna dapat menggeser ke kiri atau kanan untuk melihat jadwal hari berikutnya atau sebelumnya.

Aplikasi ini akan menampilkan jadwal pelajaran harian yang dapat dinavigasi dengan mudah menggunakan tab atau gesture geser (swipe).

Read More

Materi untuk kompetensi inti dan kompetensi dasar terkait "desain aplikasi mobile".

Berikut adalah materi yang bisa Anda gunakan untuk kompetensi inti dan kompetensi dasar terkait desain aplikasi mobile.

Kompetensi Dasar 3.2: Menerapkan Teknik Desain Aplikasi Mobile

1. Pendahuluan

Mobile app design melibatkan proses perancangan antarmuka (UI) dan pengalaman pengguna (UX) untuk aplikasi yang akan berjalan di perangkat mobile seperti smartphone dan tablet. Desain yang baik mempertimbangkan kenyamanan pengguna, performa aplikasi, serta konsistensi antarmuka.

2. Teknik Desain Aplikasi Mobile Terkini

1. Desain Responsif

   • Menyesuaikan aplikasi dengan berbagai ukuran layar, resolusi, dan orientasi perangkat (portrait/landscape).
   • Teknologi: CSS Grid, Flexbox untuk layout responsif.

2. Desain Minimalis

   • Mengurangi elemen yang tidak perlu, membuat tampilan lebih sederhana, efisien, dan menarik. Ini juga mengurangi beban kinerja aplikasi.
   • Contoh: Flat design atau material design.

3. Desain Material (Material Design)

   • Dikembangkan oleh Google, material design berfokus pada prinsip "realitas fisik" dengan efek bayangan, tata letak grid, dan animasi responsif.
   • Tools: Google Material Design Guidelines.

4. Dark Mode

   • Menyediakan opsi mode gelap untuk meningkatkan kenyamanan pengguna dalam situasi cahaya rendah, serta menghemat baterai.

5. Animasi Mikro (Microinteractions)

   • Memberikan umpan balik visual pada tindakan pengguna, seperti animasi tombol saat ditekan. Hal ini meningkatkan pengalaman pengguna secara keseluruhan.
   • Library: Lottie untuk animasi berkualitas tinggi.

6. Integrasi AI & Chatbot

   • Mengintegrasikan fitur berbasis AI seperti chatbot atau asisten digital untuk meningkatkan interaksi dengan pengguna.

7. Gestur Mobile

   • Desain berbasis gestur (swipe, pinch, double-tap) yang memungkinkan interaksi lebih alami dan cepat bagi pengguna.

3. Alat untuk Desain Aplikasi Mobile

1. Figma
   Platform desain kolaboratif berbasis cloud untuk membuat prototipe, UI, dan desain UX.

2. Adobe XD
   Software yang memungkinkan desain dan prototyping aplikasi mobile dengan fitur interaktif.

3. Sketch
   Aplikasi desain vektor untuk antarmuka pengguna yang banyak digunakan untuk membuat wireframes dan prototipe.

4. InVision
   Memungkinkan pengembang membuat prototipe yang interaktif, terutama untuk testing UX.

4. Proses Desain Aplikasi Mobile

1. Penelitian Pengguna (User Research)
   Memahami kebutuhan dan perilaku target pengguna.

2. Wireframing
   Pembuatan kerangka dasar desain untuk menentukan tata letak utama.

3. Prototyping
   Membuat versi awal aplikasi yang dapat diuji secara interaktif.

4. Testing UX/UI
   Melakukan uji coba terhadap pengguna untuk mendapatkan umpan balik.

---

Kompetensi Dasar 4.2: Membuat Desain Aplikasi Berbasis Mobile

1. Pendahuluan

Setelah memahami teknik desain, proses pembuatan desain aplikasi mobile adalah tahap di mana Anda menerapkan semua elemen yang telah direncanakan untuk membangun aplikasi yang fungsional dan menarik secara visual.

2. Langkah-langkah Membuat Desain Aplikasi Mobile

1. Analisis Kebutuhan

   • Definisikan kebutuhan aplikasi, seperti fungsi utama, target audiens, dan platform yang digunakan (iOS/Android).

2. Perancangan Alur Kerja (User Flow)

   • Tentukan alur navigasi pengguna di aplikasi dari satu fitur ke fitur lainnya untuk memastikan pengalaman yang lancar.

3. Membuat Wireframe

   • Membuat blueprint atau sketsa awal desain aplikasi dengan memperhatikan tata letak utama, tanpa memperhatikan detail visual.

4. Membuat Mockup

   • Mengembangkan wireframe menjadi mockup dengan penambahan elemen visual seperti warna, ikon, dan tipografi.

5. Prototipe

   • Membangun prototipe interaktif menggunakan tools seperti Figma atau Adobe XD agar bisa diuji.

6. Uji Coba Desain

   • Melakukan uji coba dengan beberapa pengguna untuk mendapatkan umpan balik terkait desain sebelum masuk ke tahap pengembangan.
   • Tools: Maze, Lookback untuk remote testing.

3. Tren Desain Mobile App Terkini

1. Desain Modular dan Kustomisasi

   • Pengguna dapat menyesuaikan tampilan dan fitur aplikasi berdasarkan preferensi mereka.

2. Penggunaan Augmented Reality (AR)

   • Mengintegrasikan AR untuk pengalaman interaktif, terutama untuk aplikasi yang memanfaatkan teknologi realitas campuran.

3. Desain untuk Wearables

   • Menerapkan desain yang kompatibel dengan perangkat wearable (smartwatch, gelang pintar) yang semakin populer.

4. Integrasi Blockchain

   • Untuk aplikasi yang memanfaatkan transaksi kripto atau keamanan data berbasis blockchain.

5. Aksesibilitas

   • Menambahkan fitur yang mendukung pengguna berkebutuhan khusus, seperti mode kontras tinggi, teks besar, atau perintah suara.

4. Tools Pengembangan

1. Android Studio (untuk Android)

   • SDK resmi dari Google untuk pengembangan aplikasi Android.

2. Xcode (untuk iOS)

   • IDE dari Apple untuk membuat aplikasi berbasis iOS.

3. Flutter

   • Framework pengembangan UI open-source dari Google yang dapat digunakan untuk membuat aplikasi Android dan iOS dengan basis kode tunggal.

4. React Native

   • Framework open-source untuk membangun aplikasi mobile lintas platform dengan JavaScript.

5. Proses Pengembangan (Development)

1. Coding

   • Menerapkan desain yang sudah dibuat dalam pengembangan aplikasi menggunakan bahasa pemrograman seperti Dart (untuk Flutter) atau Swift (untuk iOS).

2. Integrasi Backend

   • Menghubungkan aplikasi dengan server atau database menggunakan API (Application Programming Interface).

3. Testing & Debugging

   • Pengujian dan perbaikan bug yang muncul sebelum aplikasi dirilis ke publik.

6. Uji Coba Aplikasi (User Testing)

• Menggunakan prototipe interaktif untuk melakukan uji coba kepada pengguna sebelum aplikasi final diluncurkan.
• Tools: Firebase Test Lab, BrowserStack untuk pengujian lintas platform.

---

Dengan materi di atas, siswa dapat memahami teknik desain aplikasi mobile secara mendalam serta langkah-langkah yang diperlukan untuk merancang dan mengembangkan aplikasi mobile berbasis tren terbaru.

Read More

Contoh kode sederhana menggunakan Flutter (Dart) untuk menampilkan jadwal pelajaran dari Senin sampai Jumat

Berikut adalah contoh kode sederhana menggunakan Flutter (Dart) untuk menampilkan jadwal pelajaran dari Senin sampai Jumat, di mana pengguna bisa menggulir jadwal harian dan melompat ke hari tertentu menggunakan menu navigasi:

import 'package:flutter/material.dart';

void main() {

  runApp(MyApp());

}

class MyApp extends StatelessWidget {

  @override

  Widget build(BuildContext context) {

    return MaterialApp(

      title: 'Jadwal Pelajaran',

      theme: ThemeData(

        primarySwatch: Colors.blue,

      ),

      home: JadwalPelajaran(),

    );

  }

}

class JadwalPelajaran extends StatefulWidget {

  @override

  _JadwalPelajaranState createState() => _JadwalPelajaranState();

}

class _JadwalPelajaranState extends State<JadwalPelajaran> {

  final PageController _pageController = PageController();

  final List<String> _days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];

  

  final Map<String, List<Map<String, String>>> _schedule = {

    'Senin': [

      {'mataPelajaran': 'Matematika', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'},

      {'mataPelajaran': 'Fisika', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'},

    ],

    'Selasa': [

      {'mataPelajaran': 'Kimia', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'},

      {'mataPelajaran': 'Biologi', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'},

    ],

    'Rabu': [

      {'mataPelajaran': 'Sejarah', 'kelas': 'Kelas 103', 'waktu': '08:00 - 09:00'},

      {'mataPelajaran': 'Geografi', 'kelas': 'Kelas 104', 'waktu': '09:00 - 10:00'},

    ],

    'Kamis': [

      {'mataPelajaran': 'Seni', 'kelas': 'Kelas 105', 'waktu': '08:00 - 09:00'},

      {'mataPelajaran': 'Musik', 'kelas': 'Kelas 106', 'waktu': '09:00 - 10:00'},

    ],

    'Jumat': [

      {'mataPelajaran': 'Olahraga', 'kelas': 'Lapangan', 'waktu': '08:00 - 09:00'},

      {'mataPelajaran': 'Bahasa Inggris', 'kelas': 'Kelas 107', 'waktu': '09:00 - 10:00'},

    ],

  };

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(

        title: Text('Jadwal Pelajaran'),

        actions: [

          PopupMenuButton<String>(

            onSelected: (day) {

              final int dayIndex = _days.indexOf(day);

              if (dayIndex != -1) {

                _pageController.jumpToPage(dayIndex);

              }

            },

            itemBuilder: (context) => _days

                .map((day) => PopupMenuItem(

                      value: day,

                      child: Text(day),

                    ))

                .toList(),

          ),

        ],

      ),

      body: PageView.builder(

        controller: _pageController,

        itemCount: _days.length,

        itemBuilder: (context, index) {

          final day = _days[index];

          final lessons = _schedule[day] ?? [];

          return Padding(

            padding: const EdgeInsets.all(16.0),

            child: Column(

              crossAxisAlignment: CrossAxisAlignment.start,

              children: [

                Text(

                  day,

                  style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),

                ),

                SizedBox(height: 16),

                Expanded(

                  child: ListView.builder(

                    itemCount: lessons.length,

                    itemBuilder: (context, lessonIndex) {

                      final lesson = lessons[lessonIndex];

                      return Card(

                        child: ListTile(

                          title: Text(lesson['mataPelajaran'] ?? ''),

                          subtitle: Text('${lesson['kelas']} | ${lesson['waktu']}'),

                        ),

                      );

                    },

                  ),

                ),

              ],

            ),

          );

        },

      ),

    );

  }

}

======================================================================

Penjelasan:

1. PageView: Digunakan untuk menggulir hari-hari jadwal pelajaran dari Senin sampai Jumat.
2. PopupMenuButton: Menu ini memungkinkan pengguna untuk melompat ke hari tertentu. Ketika salah satu hari dipilih, aplikasi akan lompat ke halaman yang sesuai menggunakan jumpToPage.
3. PageController: Mengontrol halaman yang sedang ditampilkan di dalam PageView.
4. ListView: Menampilkan jadwal pelajaran harian yang berisi mata pelajaran, kelas, dan waktu.

Cara Menambahkan Lebih Banyak Data:

Anda bisa menambah data pelajaran untuk setiap hari dengan memasukkan lebih banyak entri ke dalam map _schedule.

Semoga kode ini membantu! Jika ada yang ingin disesuaikan atau ditambah, jangan ragu untuk memberi tahu.

======================================================================

Berikut adalah penjelasan langkah demi langkah untuk mengetik kode tersebut dalam proyek Flutter:

1. Import Paket Flutter

Pada bagian pertama kode ini, kita melakukan import paket Flutter yang berisi widget-widget dasar yang diperlukan untuk membangun UI aplikasi.

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

Penjelasan: material.dart adalah pustaka (library) yang berisi widget untuk membuat aplikasi dengan gaya material design.

2. Fungsi Main

Fungsi main adalah titik masuk utama untuk menjalankan aplikasi Flutter. Fungsi ini memanggil runApp() untuk menjalankan aplikasi.

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

Penjelasan: runApp() akan memuat widget utama yang kita definisikan (dalam hal ini MyApp) dan menampilkannya di layar.

3. Kelas MyApp

Ini adalah kelas utama aplikasi yang merupakan subclass dari StatelessWidget. StatelessWidget berarti widget ini tidak akan berubah setelah dibangun.

dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Jadwal Pelajaran',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: JadwalPelajaran(),
    );
  }
}

Penjelasan:

• MaterialApp: Widget utama yang mengatur seluruh aplikasi.
• title: Judul aplikasi.
• theme: Menentukan tema aplikasi, dalam hal ini warna utama adalah biru (Colors.blue).
• home: Halaman utama aplikasi, yang dalam hal ini adalah widget JadwalPelajaran.

4. Kelas JadwalPelajaran

Kelas JadwalPelajaran adalah StatefulWidget, yang artinya widget ini dapat berubah saat aplikasi berjalan.

dart
class JadwalPelajaran extends StatefulWidget {
  @override
  _JadwalPelajaranState createState() => _JadwalPelajaranState();
}

Penjelasan: Karena widget ini adalah StatefulWidget, setiap perubahan pada keadaan (state) akan dikelola oleh kelas _JadwalPelajaranState.

5. State dari JadwalPelajaran

Di dalam kelas _JadwalPelajaranState, kita mendefinisikan beberapa variabel seperti PageController untuk mengatur halaman, daftar hari (days), dan data jadwal (schedule).

dart
class _JadwalPelajaranState extends State<JadwalPelajaran> {
  final PageController _pageController = PageController();
  final List<String> _days = ['Senin', 'Selasa', 'Rabu', 'Kamis', 'Jumat'];
  final Map<String, List<Map<String, String>>> _schedule = {
    'Senin': [
      {'mataPelajaran': 'Matematika', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'},
      {'mataPelajaran': 'Fisika', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'},
    ],
    'Selasa': [
      {'mataPelajaran': 'Kimia', 'kelas': 'Kelas 101', 'waktu': '08:00 - 09:00'},
      {'mataPelajaran': 'Biologi', 'kelas': 'Kelas 102', 'waktu': '09:00 - 10:00'},
    ],
    // ... data lainnya
  };
}

Penjelasan:

• _pageController: Digunakan untuk mengontrol halaman yang bisa digeser (di-swiping).
• _days: Daftar hari dalam seminggu.
• _schedule: Data jadwal pelajaran yang berisi mata pelajaran, kelas, dan waktu.

6. Scaffold dan AppBar

Pada metode build(), kita membuat struktur tampilan aplikasi. Dimulai dengan Scaffold yang menyediakan struktur dasar halaman, dan AppBar untuk judul halaman.

dart
@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(
      title: Text('Jadwal Pelajaran'),
      actions: [
        PopupMenuButton<String>(
          onSelected: (day) {
            final int dayIndex = _days.indexOf(day);
            if (dayIndex != -1) {
              _pageController.jumpToPage(dayIndex);
            }
          },
          itemBuilder: (context) => _days
              .map((day) => PopupMenuItem(
                    value: day,
                    child: Text(day),
                  ))
              .toList(),
        ),
      ],
    ),
    // ...
  );
}

Penjelasan:

• AppBar: Menampilkan judul "Jadwal Pelajaran".
• PopupMenuButton: Tombol di pojok kanan atas yang memungkinkan pengguna memilih hari tertentu, kemudian halaman akan melompat ke jadwal hari itu.

7. Body dengan PageView

PageView digunakan untuk menggulir antar halaman yang menampilkan jadwal per hari. Setiap halaman berisi jadwal pelajaran untuk satu hari.

dart
body: PageView.builder(
  controller: _pageController,
  itemCount: _days.length,
  itemBuilder: (context, index) {
    final day = _days[index];
    final lessons = _schedule[day] ?? [];
    return Padding(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Text(
            day,
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          SizedBox(height: 16),
          Expanded(
            child: ListView.builder(
              itemCount: lessons.length,
              itemBuilder: (context, lessonIndex) {
                final lesson = lessons[lessonIndex];
                return Card(
                  child: ListTile(
                    title: Text(lesson['mataPelajaran'] ?? ''),
                    subtitle: Text('${lesson['kelas']} | ${lesson['waktu']}'),
                  ),
                );
              },
            ),
          ),
        ],
      ),
    );
  },
),

Penjelasan:

• PageView.builder: Membuat halaman-halaman yang bisa digeser, di mana setiap halaman menampilkan jadwal untuk satu hari.
• ListView.builder: Untuk menampilkan daftar mata pelajaran pada setiap hari, di mana setiap item menampilkan nama mata pelajaran, kelas, dan waktu.
• Card dan ListTile: Digunakan untuk menampilkan informasi setiap mata pelajaran dalam bentuk yang lebih menarik dengan gaya material design.

8. Hasil Akhir

Aplikasi ini menampilkan jadwal pelajaran dari Senin hingga Jumat dengan kemampuan untuk menggulir antar hari, serta melompat ke hari tertentu menggunakan tombol di AppBar.

Read More

Program Dart Flutter yang menunjukkan penggunaan widget Card dan bagaimana melakukan parsing data dalam sebuah aplikasi Flutter.

 

Contoh Program Flutter dengan Card dan Parsing Data 

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

// Data model
class User {
  final String name;
  final String email;
  final String phone;

  User({required this.name, required this.email, required this.phone});
}

// Main function
void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Card & Parsing Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: UserListScreen(),
    );
  }
}

// Main screen displaying list of users
class UserListScreen extends StatelessWidget {
  // Sample data (pretending it's parsed from a JSON or API)
  final List<User> users = [
    User(name: 'John Doe', email: 'johndoe@example.com', phone: '123-456-7890'),
    User(name: 'Jane Smith', email: 'janesmith@example.com', phone: '098-765-4321'),
    User(name: 'Alice Johnson', email: 'alicej@example.com', phone: '111-222-3333'),
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('User List'),
      ),
      body: ListView.builder(
        itemCount: users.length,
        itemBuilder: (context, index) {
          return UserCard(user: users[index]);
        },
      ),
    );
  }
}

// Card widget to display individual user information
class UserCard extends StatelessWidget {
  final User user;

  UserCard({required this.user});

  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(10),
      elevation: 5,
      shape: RoundedRectangleBorder(
        borderRadius: BorderRadius.circular(15),
      ),
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              user.name,
              style: TextStyle(
                fontSize: 20,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 8),
            Text('Email: ${user.email}'),
            Text('Phone: ${user.phone}'),
            SizedBox(height: 8),
            ElevatedButton(
              onPressed: () {
                // Show details in a new screen
                Navigator.push(
                  context,
                  MaterialPageRoute(
                    builder: (context) => UserDetailScreen(user: user),
                  ),
                );
              },
              child: Text('View Details'),
            )
          ],
        ),
      ),
    );
  }
}

// Detail screen for a single user
class UserDetailScreen extends StatelessWidget {
  final User user;

  UserDetailScreen({required this.user});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(user.name),
      ),
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'Name: ${user.name}',
              style: TextStyle(fontSize: 22, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 16),
            Text('Email: ${user.email}', style: TextStyle(fontSize: 18)),
            SizedBox(height: 8),
            Text('Phone: ${user.phone}', style: TextStyle(fontSize: 18)),
          ],
        ),
      ),
    );
  }
}

Penjelasan Program

1. Model User:

   • Kelas User digunakan untuk merepresentasikan data pengguna dengan properti name, email, dan phone. Data ini seakan-akan berasal dari JSON atau API dan diparsing ke dalam objek Dart.

2. UserListScreen:

   • Ini adalah layar utama yang menampilkan daftar pengguna dalam bentuk Card. Setiap elemen Card menampilkan informasi dasar pengguna seperti nama, email, dan nomor telepon.
   • ListView.builder digunakan untuk membangun daftar Card secara dinamis berdasarkan jumlah pengguna.

3. Widget UserCard:

   • Setiap UserCard menampilkan informasi singkat dari objek User yang dilewatkan ke dalam widget.
   • Tombol "View Details" menggunakan Navigator.push() untuk berpindah ke layar detail pengguna ketika ditekan.

4. UserDetailScreen:

   • Ini adalah layar kedua yang ditampilkan ketika pengguna menekan tombol "View Details". Halaman ini menampilkan informasi lebih rinci dari pengguna yang dipilih.

Cara Kerja Parsing Data

• Pada contoh ini, data pengguna diproses dari objek User. Meskipun dalam contoh ini datanya ditulis secara langsung, biasanya data akan diambil dari API dalam bentuk JSON dan diparsing menjadi model Dart. Setiap elemen data (nama, email, dll.) kemudian dipetakan ke dalam UI menggunakan widget Flutter seperti Text, Card, dan ListView.

Dengan contoh ini, Anda bisa memahami bagaimana menggunakan widget Card dan bagaimana memparsing data ke dalam komponen-komponen visual di Flutter.

Read More

Program Dart untuk membuat layout baris dan kolom di Flutter menggunakan widget Row dan Column

Berikut adalah contoh program Dart untuk membuat layout baris dan kolom di Flutter menggunakan widget Row dan Column. Ini adalah struktur dasar untuk menata elemen di dalam aplikasi Flutter.

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

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

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Darsu Row dan Column'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,  // Posisi elemen di Column
            crossAxisAlignment: CrossAxisAlignment.center, // Posisi elemen di sepanjang sumbu horizontal
            children: <Widget>[
              Text('Ini adalah kolom 1'),
              Text('Ini adalah kolom 2'),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround, // Menyebar elemen di Row
                children: <Widget>[
                  Icon(Icons.star, size: 50, color: Colors.blue),
                  Icon(Icons.favorite, size: 50, color: Colors.red),
                  Icon(Icons.home, size: 50, color: Colors.green),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(onPressed: () {}, child: Text('Button 1')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 2')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 3')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Penjelasan:

1. Column: Menyusun elemen secara vertikal (dari atas ke bawah).
   • mainAxisAlignment digunakan untuk mengatur penempatan elemen di sepanjang sumbu utama (vertikal).
   • crossAxisAlignment mengatur penempatan elemen di sumbu lain (horizontal).
2. Row: Menyusun elemen secara horizontal (dari kiri ke kanan).
   • mainAxisAlignment mengatur jarak antar elemen di sepanjang sumbu utama (horizontal).

Jika program ini dijalankan di aplikasi Flutter, Anda akan melihat teks diatur dalam kolom, dan ikon serta tombol ditempatkan di baris secara horizontal.

Berikut adalah penjelasan terperinci dari kode Flutter yang telah diberikan:

1. Import Library

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

Kode ini mengimpor paket Flutter yang berisi widget Material. Material adalah desain antarmuka yang menyediakan elemen-elemen UI modern seperti tombol, teks, dan ikon yang sesuai dengan standar Material Design dari Google.

2. Fungsi main

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

Fungsi main() adalah titik masuk dari aplikasi. Fungsi ini menjalankan aplikasi Flutter dengan menjalankan MyApp() sebagai widget utama.

3. Kelas MyApp

dart
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Darsu Row dan Column'),
        ),
        body: Padding(
          padding: const EdgeInsets.all(16.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,  
            crossAxisAlignment: CrossAxisAlignment.center,
            children: <Widget>[
              Text('Ini adalah kolom 1'),
              Text('Ini adalah kolom 2'),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceAround,
                children: <Widget>[
                  Icon(Icons.star, size: 50, color: Colors.blue),
                  Icon(Icons.favorite, size: 50, color: Colors.red),
                  Icon(Icons.home, size: 50, color: Colors.green),
                ],
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                children: <Widget>[
                  ElevatedButton(onPressed: () {}, child: Text('Button 1')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 2')),
                  ElevatedButton(onPressed: () {}, child: Text('Button 3')),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

a. Kelas MyApp

MyApp adalah kelas turunan dari StatelessWidget. Ini berarti widget ini tidak dapat diubah (immutable) dan tidak memiliki state yang berubah selama masa hidupnya. StatelessWidget biasanya digunakan ketika UI aplikasi tidak perlu berubah setelah widget di-render.

b. Method build

Method build bertanggung jawab untuk membangun UI dari widget. Ia menerima BuildContext sebagai parameter, yang digunakan untuk menyimpan informasi terkait pohon widget dan berbagai aspek lingkungan aplikasi.

c. MaterialApp

dart
MaterialApp(
  home: Scaffold(
    ...
  )
)

MaterialApp adalah widget inti yang membungkus seluruh aplikasi dan memberikan desain material. Di sini, properti home digunakan untuk menentukan widget utama yang ditampilkan saat aplikasi diluncurkan, yaitu Scaffold.

d. Scaffold

Scaffold adalah widget tata letak dasar di Flutter yang menyediakan struktur antarmuka standar dengan komponen seperti AppBar (baris atas), Body (konten utama), dan FloatingActionButton.

e. AppBar

dart
AppBar(
  title: Text('Darsu Row dan Column'),
)

AppBar adalah bagian dari Scaffold yang berfungsi sebagai baris atas atau header aplikasi. Di sini, kita menetapkan title menggunakan widget Text yang menampilkan teks "Contoh Row dan Column".

f. Body (Konten Utama)

dart
body: Padding(
  padding: const EdgeInsets.all(16.0),
  child: Column(
    ...
  ),
)

Bagian body dari Scaffold berisi konten utama aplikasi. Di sini, widget Padding digunakan untuk memberikan jarak di sekitar widget anaknya dengan padding sebesar 16 piksel pada semua sisi. Padding membungkus widget Column.

g. Column

dart
Column(
  mainAxisAlignment: MainAxisAlignment.start,  
  crossAxisAlignment: CrossAxisAlignment.center,
  children: <Widget>[
    ...
  ],
)

Column adalah widget tata letak yang menyusun anak-anaknya secara vertikal (dari atas ke bawah). Dua properti penting dari Column:

• mainAxisAlignment: Mengatur posisi elemen-elemen di sepanjang sumbu utama (vertikal). Dalam kasus ini, MainAxisAlignment.start menempatkan elemen di bagian atas.
• crossAxisAlignment: Mengatur posisi elemen di sumbu sekunder (horizontal). CrossAxisAlignment.center menempatkan elemen di tengah secara horizontal.

h. Text Widgets

dart
Text('Ini adalah kolom 1'),
Text('Ini adalah kolom 2'),

Dua widget Text ini digunakan untuk menampilkan teks sederhana "Ini adalah kolom 1" dan "Ini adalah kolom 2".

i. Row untuk Ikon

dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceAround,
  children: <Widget>[
    Icon(Icons.star, size: 50, color: Colors.blue),
    Icon(Icons.favorite, size: 50, color: Colors.red),
    Icon(Icons.home, size: 50, color: Colors.green),
  ],
)

Row adalah widget tata letak yang menyusun anak-anaknya secara horizontal (dari kiri ke kanan). Properti:

• mainAxisAlignment: MainAxisAlignment.spaceAround akan mendistribusikan ruang secara merata di antara ikon dan di kedua ujung baris.

Anak-anak dari Row adalah tiga widget Icon dengan ikon bintang, hati, dan rumah, yang masing-masing diberi warna dan ukuran tertentu.

j. Row untuk Tombol

dart
Row(
  mainAxisAlignment: MainAxisAlignment.spaceEvenly,
  children: <Widget>[
    ElevatedButton(onPressed: () {}, child: Text('Button 1')),
    ElevatedButton(onPressed: () {}, child: Text('Button 2')),
    ElevatedButton(onPressed: () {}, child: Text('Button 3')),
  ],
)

Row ini mengandung tiga tombol yang disusun secara horizontal:

• mainAxisAlignment: MainAxisAlignment.spaceEvenly akan membagi ruang secara merata di antara tombol-tombol.

Setiap ElevatedButton memiliki onPressed yang kosong (tanpa aksi) dan menampilkan teks yang berbeda.

4. Kesimpulan

Kode ini membuat aplikasi Flutter sederhana yang menampilkan layout dengan elemen-elemen yang diatur secara vertikal dan horizontal. Column mengatur teks dan dua Row di bawahnya, satu berisi ikon, dan yang lain berisi tombol.

Read More