Tutorial Flutter dasar Part 2

pada tanggal


 

Setelah kita memahami bahasa Dart, selanjutnya kita pelajari konsep dasar Flutter seperti widget, state management, routing, dan navigasi.

1. Widget

yang pertama kita pelajari adalah Widget. Dan yang harus kamu ketahui Flutter dibangun menggunakan sistem berbasis widget. Setiap elemen antarmuka di Flutter, seperti teks, gambar, tombol, dan layout, semuanya adalah widget. Dengan kata lain Project Flutter kamu nanti nya adalah kumpulan widget-widget.

Contoh Widget Dasar:

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('Flutter Widgets')),
        body: Center(child: Text('Hello, Flutter!')),
      ),
    );
  }
}

Jenis-jenis Widget:

  • Stateless Widget: Tidak memiliki state yang berubah, misalnya Text, Icon, atau Image.
  • Stateful Widget: Memiliki state yang dapat berubah selama aplikasi berjalan, misalnya Checkbox, TextField, atau Slider.

Stateless Widget:

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: Center(
          child: Text('Ini Stateless Widget'),
        ),
      ),
    );
  }
}

Stateful Widget:

class MyCounterApp extends StatefulWidget {
  @override
  _MyCounterAppState createState() => _MyCounterAppState();
}

class _MyCounterAppState extends State<MyCounterApp> {
  int counter = 0;

  void _incrementCounter() {
    setState(() {
      counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Stateful Widget')),
        body: Center(
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            children: [
              Text('Counter: $counter'),
              ElevatedButton(
                onPressed: _incrementCounter,
                child: Text('Tambah Counter'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

2. State Management

State management mengatur bagaimana data aplikasi berubah dan bagaimana perubahan itu ditampilkan di UI. Ada beberapa metode state management di Flutter:

1. setState() (Built-in State Management)

Contoh:

class CounterApp extends StatefulWidget {
  @override
  _CounterAppState createState() => _CounterAppState();
}

class _CounterAppState extends State<CounterApp> {
  int _counter = 0;

  void _increment() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('setState Management')),
      body: Center(
        child: Text('Counter: $_counter'),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _increment,
        child: Icon(Icons.add),
      ),
    );
  }
}

2. Provider (Paket dari Flutter)

Provider adalah salah satu metode yang sering digunakan karena mudah dan efisien.
Untuk menggunakan Provider, tambahkan dependency di pubspec.yaml:

dependencies:
  provider: ^6.0.0

Contoh Penggunaan Provider:

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

void main() => runApp(
  ChangeNotifierProvider(
    create: (context) => CounterModel(),
    child: MyApp(),
  ),
);

class CounterModel extends ChangeNotifier {
  int _counter = 0;

  int get counter => _counter;

  void increment() {
    _counter++;
    notifyListeners();
  }
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Provider Example')),
        body: Center(child: CounterDisplay()),
        floatingActionButton: CounterIncrementButton(),
      ),
    );
  }
}

class CounterDisplay extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Text('Counter: ${context.watch<CounterModel>().counter}');
  }
}

class CounterIncrementButton extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return FloatingActionButton(
      onPressed: () => context.read<CounterModel>().increment(),
      child: Icon(Icons.add),
    );
  }
}

3. Routing dan Navigasi

Flutter mendukung navigasi antara halaman menggunakan Navigator dan Routes. Kamu bisa menggunakan Navigator untuk berpindah dari satu layar (widget) ke layar lainnya.

Routing Dasar:

Untuk membuat routing, kamu bisa mendefinisikan rute di dalam MaterialApp.

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomePage(),
      '/about': (context) => AboutPage(),
    },
  ));
}

class HomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Home Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pushNamed(context, '/about');
          },
          child: Text('Go to About Page'),
        ),
      ),
    );
  }
}

class AboutPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('About Page')),
      body: Center(
        child: ElevatedButton(
          onPressed: () {
            Navigator.pop(context);
          },
          child: Text('Back to Home Page'),
        ),
      ),
    );
  }
}

Navigasi Push dan Pop:

  • push digunakan untuk mendorong halaman baru ke tumpukan layar.
  • pop digunakan untuk kembali ke halaman sebelumnya.
Navigator.push(
  context,
  MaterialPageRoute(builder: (context) => SecondPage()),
);

Kembali ke layar sebelumnya: Navigator.pop(context);

4. Navigasi dengan Argument

Kamu bisa mengirim data dari satu halaman ke halaman lain menggunakan argument dalam navigasi.

Mengirim Data:

Navigator.push(
  context,
  MaterialPageRoute(
    builder: (context) => SecondPage(data: 'Halo dari Halaman Utama'),
  ),
);


Menerima Data:

class SecondPage extends StatelessWidget {
  final String data;

  SecondPage({required this.data});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Second Page')),
      body: Center(
        child: Text(data),
      ),
    );
  }
}

5. Navigasi Dinamis dengan Named Routes

Menggunakan named routes juga memungkinkan untuk navigasi yang lebih terstruktur.

Definisi Route di main.dart:

void main() {
  runApp(MaterialApp(
    initialRoute: '/',
    routes: {
      '/': (context) => HomePage(),
      '/details': (context) => DetailsPage(),
    },
  ));
}
Navigasi:

Navigator.pushNamed(context, '/details');

Rangkuman

  1. Widget: Flutter berbasis widget, ada widget stateless dan stateful.
  2. State Management: Terdapat berbagai metode seperti setState, dan Provider.
  3. Routing: Navigasi antara halaman menggunakan Navigator, push, pop, dan named routes.
  4. Navigasi dengan Argument: Mengirim data antar halaman.
Catatan: kamu bisa coba code diatas di dartpad https://dartpad.dev/

Komentar

Posting Komentar