Clean Navigation di Flutter Menggunakan Route

Navigasi di Flutter dapat dilakukan dengan salah satu dari dua cara. Route bernama, atau mendorong Route secara eksplisit dengan membuat instance PageRoute dan meneruskannya ke Navigator. Mendorong route bisa menjadi sangat eksplisit dan berbagi logika di antara mereka menjadi sulit. Logika seperti memeriksa apakah pengguna diautentikasi untuk tampilan tertentu. Dalam posting ini, kami akan menyiapkan Router untuk Flutter dan memungkinkan Anda menggunakan route bernama dengan parameter.

Setup

Kita akan membuat dua tampilan , Anda dapat menambahkan semuanya di file main.dart.

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

Pengaturan Router

MaterialApp memberi Anda properti yang disebut onGenerateRoutetempat Anda dapat meneruskan Fungsi yang mengembalikan a Route<dynamic>dan menerima RouteSettings. Ini yang akan kita gunakan. Untuk menjaga semuanya tetap rapi, kami akan membuat kelas Router. Di dalamnya, kita akan membuat fungsi statis dengan tanda tangan yang disebutkan di atas. Buat file router.dart.

class Router { 
  Route<dinamis> generateRoute(Pengaturan Route) { 
    
  } 
}

Pengaturan berisi informasi route dari route yang diminta. Ini memberikan dua hal penting bagi kita. Nama, dan argumennya. Kita akan menggunakan nama untuk menentukan tampilan mana yang akan dikembalikan. Perbarui Fungsi generate agar terlihat seperti ini.

static Route<dynamic> generateRoute(RouteSettings settings) { 
    switch (settings.name) { 
      case '/': 
        return MaterialPageRoute(builder: (_) => Home()); 
      case '/feed': 
        return MaterialPageRoute(builder: (_) => Feed()); 
      default: 
        return MaterialPageRoute( 
            builder: (_) => Scaffold( 
                  body: Center( 
                      child: Text('Tidak ada route yang ditentukan untuk ${settings.name}')), 
                )); 
    } 
  }

Artinya adalah ketika namanya sama dengan '/' maka kami akan menunjukkan rumahnya. Saat '/feed' kami akan menampilkan tampilan feed. Untuk menghindari kesalahan dalam kode kami, kami akan mengambil nilai hardcoded ini (Nilai Ajaib) dan memasukkannya ke dalam file constants.dart yang dapat digunakan di mana saja.

/// File ini berisi semua konstanta routing yang digunakan dalam aplikasiconst String backRoute= '/'; 
const String feedRoute = '/feed';

... 
    switch (settings.name) { 
      case homeRoute: 
        return MaterialPageRoute(builder: (_) => Home()); 
      case feedRoute: 
        kembalikan MaterialPageRoute(builder: (_) => Feed()); 
...

Sekarang di Aplikasi Anda, tempat Anda mendefinisikan MaterialApp, Anda akan meneruskan fungsi generateRoute ke onGenerateRoute. Untuk menentukan tampilan beranda sebagai tampilan awal, alih-alih menyetel properti rumah ke widget, kita akan menggunakan initialRoute sebagai gantinya.

class MyApp extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return MaterialApp( 
      onGenerateRoute: Router.generateRoute, 
      initialRoute: homeRoute, 
    ); 
  } 
}

Navigasi

Sekarang ketika Anda ingin menavigasi, Anda hanya perlu menggunakan

Navigator.pushNamed(context, feedRoute);

Ini akan mengarahkan Anda ke FeedView. Jika kita ingin meneruskan parameter ke tampilan Umpan, itu hanya sedikit perubahan. Mari kita buat tampilan Umpan kita mengambil String sebagai parameter.

class Feed memperluas StatelessWidget {  data String akhir;  Umpan(ini.data);  @override 
  Widget build(Konteks BuildContext) { 
    return Scaffold( 
      body: Center(child: Text('Feed: $data')), 
    ); 
  } 
}

Tambahkan tombol aksi mengambang ke homeView Anda dan onPressed kami akan mendorong feed view dan meneruskan beberapa data string sebagai argumen.

class Home extends StatelessWidget { 
  @override 
  Widget build(BuildContext context) { 
    return Scaffold( 
      floatingActionButton: FloatingActionButton(onPressed: (){ 
        Navigator.pushNamed(context, feedRoute, argument: 'Data from home'); 
      },), 
      body: Center (anak: Teks('Rumah')), 
    ); 
  } 
}

Sekarang di Router kami, kami harus mengeluarkan data ini dari properti argumen di pengaturan dan meneruskannya.

case feedRoute: 
    var data = settings.arguments as String; 
    kembalikan MaterialPageRoute(pembangun: (_) => Feed(data));

Jika Anda menekan tombol tindakan mengambang di HomeView, Anda akan menavigasi ke Umpan dan melihat bahwa datanya ada di sana. Anda dapat memberikan nilai APAPUN dalam argumen. Pastikan Anda mentransmisikan ke jenis yang Anda inginkan dan meneruskannya ke tampilan Anda. Objek kompleks, atau bahkan widget lainnya