Beamer

🌟🌟 using class as data models🌟🌟

using the Class's data model as List of class is <code>Iterable</code>, that means I can iterate though it using <code>firsWhere</code>

  '/shoes/:id': (context, state, data) {

    /// my list<ShoeState> is `Iterable` that means I can iterate though it using `firsWhere`
    ShoesData currentShoeData = shoesDataList.firstWhere(
      (el) => (el.model.toString() ==
          (context.currentBeamLocation.state as BeamState)
              .pathParameters['id']),
    );

    return BeamPage(
      child: ShoeDetailsScreen(shoeCardData: currentShoeData),
      type: BeamPageType.cupertino,
    );
  }

models/shoes_data.dart

class ShoesData {
  final String name;
  final int model;
  final double oldPrice;
  final double newPrice;
  final List<String> imagesUrl;

  ShoesData({
    required this.name,
    required this.model,
    required this.oldPrice,
    required this.newPrice,
    required this.imagesUrl,
  });
}

/// 🌟🌟🌟 inside `BeamPage()` in `main.dart`
/// ShoesData currentShoeData = shoesDataList.firstWhere(
///   (el) => (el.model.toString() ==
///       (context.currentBeamLocation.state as BeamState)
///           .pathParameters['bookID']),
/// ); // 🌟🌟🌟

List<ShoesData> shoesDataList = [
  ShoesData(
      model: 90,
      name: 'Air MAX 90, EZ Black',
      oldPrice: 900,
      newPrice: 250,
      imagesUrl: [
        'assets/shoes1_1.png',
        'assets/shoes1_2.png',
        'assets/shoes1_3.png'
      ]),
  ShoesData(
      model: 150,
      name: 'Air MAX 85, EZ Red',
      oldPrice: 500,
      newPrice: 250,
      imagesUrl: [
        'assets/shoes2_1.png',
        'assets/shoes2_2.png',
        'assets/shoes2_3.png'
      ]),
  ShoesData(
      model: 123,
      name: 'Air MAX 50z, EZ Grey',
      oldPrice: 100,
      newPrice: 50,
      imagesUrl: [
        'assets/shoes3_1.png',
        'assets/shoes3_2.png',
        'assets/shoes3_3.png'
      ]),
  ShoesData(
      model: 12,
      name: 'Air SL 90, Frost',
      oldPrice: 660,
      newPrice: 250,
      imagesUrl: [
        'assets/shoes1_1.png',
        'assets/shoes1_2.png',
        'assets/shoes1_1.png'
      ]),
  ShoesData(
      model: 112,
      name: 'Air SL 44, White',
      oldPrice: 900,
      newPrice: 750,
      imagesUrl: [
        'assets/shoes2_1.png',
        'assets/shoes2_2.png',
        'assets/shoes2_1.png'
      ]),
  ShoesData(
      model: 120,
      name: 'Air AZZ 81, Frost',
      oldPrice: 1005,
      newPrice: 850,
      imagesUrl: [
        'assets/shoes3_1.png',
        'assets/shoes3_2.png',
        'assets/shoes3_1.png'
      ]),
];

---

always add initialPath: ' .. ' in BeamerDelegate

  final routerDelegate = BeamerDelegate(
    initialPath: '/shoes',  // the page to schow as initial page
    locationBuilder: RoutesLocationBuilder(
    /*
      ...
        ....
     */

---

Adding Transitions to Beamer

  final routerDelegate = BeamerDelegate(
    initialPath: '/shoes',
    locationBuilder: RoutesLocationBuilder(
      routes: {
      // ....
        // ...
        '/shoes': (_, ___, ____) => const BeamPage(

          ShoesData currentShoeData  = // .....

          return BeamPage(
            child: ShoeDetailsScreen(shoeCardData: currentShoeData),
            type: BeamPageType.cupertino,
          );

Concepts:

• Beamer

-# BeamerParser

• BeamerDelegate

• BeamLocation

• BeamPage

• BeamGuard

• BeamState

• Other Concepts

• Beamer Back Button Dispatcher

• Transition delegates

• Beamer Provider