Belajar Flutter - Navigation dan routing pada flutter
Jurnalcode.com

Belajar Flutter - Navigation dan routing pada flutter


Jurnalcode : Hallo Kawan kawan Kali ini saya akan lanjutkan tutorial flutter . Sebelum nya saya sudah membuat tutorial tentang pengenalan flutter .  Nah kali ini saya akan melanjutkan dengan Navigation dan routing pada flutter. Untuk Berpindah halaman kita pada flutter kita menggunakan Navigation dan flutter bagaimana caranya ? langsung saja ya .

Pertama silahkan buat project baru flutter pada kasus ini saya menggunakan VSCODE . Kemudian Pada main.dart silahkan ketikan code berikut :

import 'package:flutter/material.dart';

void main() {
  var materialApp = MaterialApp(
    title: 'Navigation Bar',
    home: Utama(),
  );
  runApp(materialApp);
}

class Utama extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Utama'),
      ),
      body: Center(
        child: RaisedButton(
          child: Text('Buka Halaman'),
          onPressed: () {
            Navigator.push(
              context,
              MaterialPageRoute(builder: (context) => HalamanDua()),
            );
          },
        ),
      ),
    );
  }
}

class HalamanDua extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Halaman Dua'),
      ),
      body: Center(        
        child: RaisedButton(
          child: Text('Kebali Ke Halaman Utama'),
          onPressed: () {
            Navigator.pop(context);
          },
        ),
      ),
    );
  }
}

 

Jika Sudah silahkan jalankan Project nya Jika berhasil Maka Tampilan nya Seperti dibawah :

.

Ayo Komentar