Dasar dasar flutter


Flutter adalah framework yang digunakan untuk mengembangkan aplikasi mobile, web, dan desktop dengan menggunakan bahasa pemrograman Dart. Pada blog ini, kita akan membahas konsep dasar dari Flutter.

View on GitHub

Pendahuluan

Tujuan Praktikum

Alat yang Dibutuhkan

Langkah-langkah Praktikum

  1. Instalasi Flutter SDK dan alat pendukung.
  2. Membuat proyek Flutter baru.
  3. Membuat dan memahami Stateless dan Stateful Widget.
  4. Mengimplementasikan beberapa basic widgets.

Pengertian Dart

Dart adalah bahasa pemrograman yang dikembangkan oleh Google dan digunakan dalam pengembangan aplikasi Flutter. Dart dirancang untuk sintaks yang bersih, mendukung pemrograman berorientasi objek, dan memiliki performa tinggi untuk aplikasi mobile dan web.

Langkah-langkah Setup Lingkungan Flutter Development (Windows)

Install GIT

Install Visual Studio

Karena ada library Flutter yang dibuat menggunakan bahasa C++, maka perlu menginstal Visual Studio.

Install Android Studio

Meskipun kita dapat membuat aplikasi Flutter tanpa Android Studio, sangat direkomendasikan untuk menginstalnya karena menyediakan Android SDK Manager dan emulator.

Install Visual Studio Code

Install SDK Flutter

Cek Setup Flutter Development

Proyek Pertama Flutter: “hai”

Membuat project Flutter dapat dilakukan melalui beberapa cara, yaitu menggunakan Command Prompt / Terminal atau langsung dari IDE seperti Visual Studio Code.

Via Terminal / Command Prompt

Via Visual Studio Code

Struktur Project Flutter

Card image cap

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, contohnya seperti teks statis, logo aplikasi, dan ikon tetap.

Kode dan Tampilan

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")),
      ),
    );
  }
}
Card image cap

Stateful Widget

Stateful Widget merupakan widget dinamis yang ketika sebuah state berubah maka tampilan UI juga ikut berubah. Contohnya ketika tombol diklik maka warnanya berubah, atau nilai input form berubah.

Kode dan Tampilan

import 'package:flutter/material.dart';

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

class MyStatefull extends StatefulWidget {
  const MyStatefull({super.key});
  @override
  State<MyStatefull> createState() => _MyStatefullState();
}

class _MyStatefullState extends State<MyStatefull> {
  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),
        ),
      ),
    );
  }
}
Card image cap

Widget Dasar Flutter

Container

Container merupakan widget yang berfungsi sebagai kotak yang dapat menampung satu widget child dan menyediakan berbagai properti untuk dekorasi, pengaturan posisi, dan ukuran.

Properti Container:

ElevatedButton

ElevatedButton merupakan widget tombol yang memiliki efek bayangan (shadow).

Properti ElevatedButton:

Icon

Icon digunakan untuk menampilkan ikon. Flutter menyediakan ikon dari Material Icons (Google) dan Cupertino Icons (Apple).

Properti Icon:

Image

Image adalah widget dasar untuk menampilkan gambar dari berbagai sumber seperti asset, network, memory, atau file system.

Properti Image:

Asset Image


flutter:
  assets:
    - assets/images/logo.png

CircleAvatar

CircleAvatar adalah widget yang sering digunakan untuk menampilkan gambar profil atau inisial pengguna dalam bentuk lingkaran.

Properti CircleAvatar:

Penulisan kelas ini dapat dijelaskan pada lib/tugas.dart dengan komentar sebagai pemandu apa yang dibuat.

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

class PropertiesStuff extends StatelessWidget {
  const PropertiesStuff({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text("Stateless Widget")),
        body: Center(
          child: Column(
            children: [
              Text(
                "Hai i am Text Widget",
                style: TextStyle(
                  fontSize: 14.0,
                  color: Colors.red,
                  fontWeight: FontWeight.bold,
                  fontStyle: FontStyle.italic,
                ),
                textAlign: TextAlign.center,
              ),
              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),
                ),
              ),
              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"),
              ),
              Icon(Icons.add, color: Colors.amber, size: 50.0),
              // Apple Icons
              Icon(CupertinoIcons.add, color: Colors.red, size: 50.0),
              Image.network(
                "https://upload.wikimedia.org/wikipedia/commons/thumb/0/01/Logo_Unand.svg/600px-Logo_Unand.svg.png",
                width: 100,
                height: 150,
              ),
              Image.asset('assets/image/logo.png', width: 100, height: 150),
              Row(
                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),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Hasilnya seperti:

Card image cap

TUGAS

Detail Tugas

Implementasi Kode

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

class HomePageTugas extends StatefulWidget {
  @override
  _MyHomePageState createState() => _MyHomePageState();
}

class _MyHomePageState extends State<HomePageTugas> {
  int _selectedIndex = 0;

  static List<Widget> _pages = <Widget>[
    HomePage(),
    AboutMeSection(),
    ProfilePage(),
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Aplikasi Mobile Tampilan Sederhana'),
        backgroundColor: Theme.of(context).colorScheme.inversePrimary,
      ),
      body: _pages[_selectedIndex],
      bottomNavigationBar: BottomNavigationBar(
        currentIndex: _selectedIndex,
        onTap: _onItemTapped,
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(icon: Icon(Icons.home), label: 'Home'),
          BottomNavigationBarItem(
            icon: Icon(Icons.description),
            label: 'About App',
          ),
          BottomNavigationBarItem(icon: Icon(Icons.person), label: 'Profile'),
        ],
      ),
    );
  }
}

class ProfilePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Container(
      padding: const EdgeInsets.all(16.0),
      child: Column(
        children: [
          // Profile Image
          CircleAvatar(
            radius: 50,
            backgroundImage: AssetImage(
              'assets/image/profile.png',
            ), // Replace with your image
          ),
          SizedBox(height: 16),

          // Name and Title
          Text(
            'Imbang Jayo Gampito',
            style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
          ),
          Text(
            'Head Developer',
            style: TextStyle(fontSize: 16, color: Colors.grey[600]),
          ),
          SizedBox(height: 24),

          Card(
            child: ListTile(
              leading: Icon(Icons.confirmation_num_outlined),
              title: Text('NIM 2311532002'),
            ),
          ),
          Card(
            child: ListTile(
              leading: Icon(Icons.email),
              title: Text('imbangjayogampito@gmail.com'),
            ),
          ),
          Card(
            child: ListTile(
              leading: Icon(Icons.phone),
              title: Text('+62 851-8248-3196R'),
            ),
          ),
          Card(
            child: ListTile(
              leading: Icon(Icons.location_on),
              title: Text('Pauh, West Sumatra'),
            ),
          ),
          Card(
            child: ListTile(
              leading: Icon(Icons.book),
              title: Text('Informatics Unand'),
            ),
          ),
          LinkButtons(),
        ],
      ),
    );
  }
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('NOTOMATIS'), centerTitle: true),
      body: Center(
        child: Text(
          'Make payments easy',
          style: TextStyle(fontSize: 24, fontWeight: FontWeight.bold),
        ),
      ),
    );
  }
}

class AboutMeSection extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Card(
      margin: EdgeInsets.all(16),
      elevation: 4,
      child: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.start,
          children: [
            Text(
              'About App',
              style: TextStyle(fontSize: 20, fontWeight: FontWeight.bold),
            ),
            SizedBox(height: 12),
            Text(
              'Hello and Welcome to Notomatis! However this is just a basic prototype of the full app, stay tuned!',
              style: TextStyle(fontSize: 16),
            ),
          ],
        ),
      ),
    );
  }
}

class LinkButtons extends StatelessWidget {
  final Uri githubUrl = Uri.parse('https://github.com/ImbangJayoGampito');
  final Uri websiteUrl = Uri.parse('https://imbang.infokand23.my.id/');

  void _launchUrl(Uri url) async {
    if (!await launchUrl(url, mode: LaunchMode.externalApplication)) {
      throw 'Could not launch $url';
    }
  }

  @override
  Widget build(BuildContext context) {
    return Row(
      mainAxisAlignment: MainAxisAlignment.center,
      children: [
        ElevatedButton.icon(
          icon: Icon(Icons.code),
          label: Text('GitHub'),
          onPressed: () => _launchUrl(githubUrl),
        ),
        SizedBox(width: 16),
        ElevatedButton.icon(
          icon: Icon(Icons.web),
          label: Text('Website'),
          onPressed: () => _launchUrl(websiteUrl),
        ),
      ],
    );
  }
}

Halaman Utama

Card image cap

Halaman Tentang

Card image cap

Halaman Profil

Card image cap
Document