Membuat Layout Responsif dan Navigasi Aplikasi

1. Pengertian Layout Responsif

Layout responsif adalah desain tata letak aplikasi yang mampu menyesuaikan tampilannya secara otomatis berdasarkan ukuran layar perangkat yang digunakan, seperti smartphone, tablet, atau desktop. Tujuannya adalah agar aplikasi tetap mudah digunakan dan terlihat baik di berbagai ukuran layar.

2. Pentingnya Layout Responsif

Pengalaman Pengguna yang Baik: Pengguna dapat mengakses aplikasi dengan nyaman tanpa harus memperbesar atau memperkecil tampilan.
Akses di Berbagai Perangkat: Satu desain bisa digunakan di berbagai jenis perangkat.
Efisiensi Pengembangan: Mengurangi kebutuhan membuat beberapa versi aplikasi untuk perangkat yang berbeda.

3. Prinsip Dasar Membuat Layout Responsif

Grid System: Membagi halaman menjadi beberapa kolom yang fleksibel sehingga bisa disesuaikan saat layar berubah.
Flexible Images dan Media: Gambar dan media disesuaikan agar tidak melebihi ukuran kontainer atau layar.
Breakpoints: Titik-titik tertentu dimana layout berubah untuk menyesuaikan ukuran layar (misalnya pada layar smartphone, tablet, desktop).
Flexible Typography: Ukuran font yang bisa berubah sesuai ukuran layar agar tetap mudah dibaca.

4. Konsep Navigasi Aplikasi

Navigasi adalah cara pengguna berinteraksi dan berpindah antar halaman atau fitur dalam aplikasi. Navigasi yang baik membuat aplikasi mudah dipahami dan digunakan.

5. Jenis Navigasi dalam Aplikasi

Navigasi Header atau Top Bar: Biasanya berupa menu horizontal di bagian atas aplikasi, cocok untuk desktop.
Sidebar atau Side Navigation: Menu yang muncul di sisi layar, cocok untuk aplikasi dengan banyak fitur.
Bottom Navigation: Menu di bagian bawah layar, umum dipakai pada aplikasi mobile untuk akses cepat ke fitur utama.
Hamburger Menu: Ikon tiga garis yang ketika diklik akan menampilkan menu navigasi, sangat berguna pada layar kecil.

6. Tips Membuat Navigasi yang Baik

Konsistensi: Posisi dan tampilan navigasi harus konsisten di seluruh halaman.
Sederhana dan Intuitif: Jangan buat navigasi terlalu banyak pilihan agar tidak membingungkan pengguna.
Responsif: Navigasi harus menyesuaikan tampilannya sesuai perangkat (misalnya, hamburger menu di mobile, full menu di desktop).
Feedback Visual: Berikan tanda yang jelas pada menu atau item yang sedang aktif agar pengguna tahu posisinya.
Aksesibilitas: Pastikan navigasi mudah digunakan oleh semua pengguna, termasuk yang menggunakan keyboard atau screen reader.

Code Zapp Run

import 'package:flutter/material.dart';

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

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  bool _isDarkTheme = false;

  void _toggleTheme() {
    setState(() {
      _isDarkTheme = !_isDarkTheme;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Stok baju',
      theme: _isDarkTheme ? ThemeData.dark() : ThemeData.light(),
      home: HomePage(
        isDarkTheme: _isDarkTheme,
        onToggleTheme: _toggleTheme,
      ),
      debugShowCheckedModeBanner: false,
    );
  }
}

class HomePage extends StatelessWidget {
  final bool isDarkTheme;
  final VoidCallback onToggleTheme;

  HomePage({required this.isDarkTheme, required this.onToggleTheme});

  final List<Map<String, String>> stokBaju = [
    {
      'image': 'assets/kaos.png',
      'name': 'Kaos Polos Putih',
      'description': 'Kaos polos warna putih, bahan katun nyaman dipakai sehari-hari.'
    },
    {
      'image': 'assets/kemeja.png',
      'name': 'Kemeja Denim',
      'description': 'Kemeja denim biru, cocok untuk gaya kasual dan semi formal.'
    },
    {
      'image': 'assets/jaket.png',
      'name': 'Jaket Kulit',
      'description': 'Jaket kulit hitam, memberikan kesan stylish dan maskulin.'
    },
    {
      'image': 'assets/sweter.png',
      'name': 'Sweater Rajut',
      'description': 'Sweater rajut warna abu-abu, hangat dan nyaman untuk musim dingin.'
    },
    {
      'image': 'assets/dres.png',
      'name': 'Dress Floral',
      'description': 'Dress motif floral, cocok untuk acara santai dan pesta.'
    },
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Stok baju'),
        actions: [
          IconButton(
            icon: Icon(isDarkTheme ? Icons.wb_sunny : Icons.nightlight_round),
            onPressed: onToggleTheme,
            tooltip: 'Toggle Theme',
          )
        ],
      ),
      body: LayoutBuilder(
        builder: (context, constraints) {
          int crossAxisCount = constraints.maxWidth < 600 ? 2 : 4;

          return GridView.builder(
            padding: EdgeInsets.all(8),
            gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
              crossAxisCount: crossAxisCount,
              crossAxisSpacing: 8,
              mainAxisSpacing: 8,
              childAspectRatio: 0.7,
            ),
            itemCount: stokBaju.length,
            itemBuilder: (context, index) {
              final item = stokBaju[index];
              return GestureDetector(
                onTap: () {
                  Navigator.push(
                    context,
                    MaterialPageRoute(
                      builder: (context) => DetailPage(
                        imageUrl: item['image']!,
                        name: item['name']!,
                        description: item['description']!,
                      ),
                    ),
                  );
                },
                child: Card(
                  elevation: 3,
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(12),
                  ),
                  child: Column(
                    crossAxisAlignment: CrossAxisAlignment.stretch,
                    children: [
                      Expanded(
                        child: ClipRRect(
                          borderRadius: BorderRadius.vertical(top: Radius.circular(12)),
                          child: Image.asset(
                            item['image']!,
                            fit: BoxFit.cover,
                          ),
                        ),
                      ),
                      Padding(
                        padding: EdgeInsets.all(8),
                        child: Text(
                          item['name']!,
                          style: TextStyle(
                            fontWeight: FontWeight.bold,
                            fontSize: 16,
                          ),
                          textAlign: TextAlign.center,
                        ),
                      ),
                    ],
                  ),
                ),
              );
            },
          );
        },
      ),
    );
  }
}

class DetailPage extends StatelessWidget {
  final String imageUrl;
  final String name;
  final String description;

  DetailPage({
    required this.imageUrl,
    required this.name,
    required this.description,
  });

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(name),
      ),
      body: SingleChildScrollView(
        padding: EdgeInsets.all(16),
        child: Column(
          children: [
            ClipRRect(
              borderRadius: BorderRadius.circular(16),
              child: Image.asset(
                imageUrl,
                fit: BoxFit.cover,
              ),
            ),
            SizedBox(height: 20),
            Text(
              name,
              style: TextStyle(
                fontSize: 24,
                fontWeight: FontWeight.bold,
              ),
            ),
            SizedBox(height: 12),
            Text(
              description,
              style: TextStyle(fontSize: 16),
              textAlign: TextAlign.justify,
            ),
          ],
        ),
      ),
    );
  }
}

Gambarannya

Link:https://z81zq064781zr.zapp.page/#/

Cari Blog Ini

kiren08