How to write this go_router example in this?

[VikSin]

Can I get idea on how to convert this - go_router example

Not getting the idea on how to convert this BuildContect parts of code -

class MyApp extends StatelessWidget {
  /// Constructs a [MyApp]
  const MyApp({super.key});

  @override
  Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }
}

and this lines -

onPressed: () => context.go('/details'),

[dupuchba]

hello @VikSin - The go method they are using in this example is a Dart method extension -> https://dart.dev/language/extension-methods, they are available in ClojureDart but our syntax is not like a method call (that's the goal, we still have work on this part). You have few ways to call the go method from a widget:

1. using GoRouter.of

   (f/widget :get [go/GoRouter] ... onPressed (fn [] (.go go-router '/details')))

2. using GoRouterState.of

   (f/widget :get [go/GoRouterState] ... onPressed (fn [] (.go go-router '/details')))

3. using the extension method syntax

   .onPressed (fn [] (-> ctx go/GoRouterHelper (.go "/details")))

[VikSin]

I'm getting error here -

java.lang.RuntimeException: Invalid token: /details' clojure.lang.LispReader$ReaderException: java.lang.RuntimeException: Invalid token: /details'

Also I'm not sure if other parts here is correct or not. I have used chatGPT to help with coverting.

(def home-screen 
  (f/widget 
   :get [go/GoRouterState]
   (m/Scaffold
    .appBar (m/AppBar 
             .title (m/Text "Home screen"))
    .body 
    (m/Center
     .child
     (m/ElevatedButton
      .onPressed (fn [] (.go go-router '/details'))
      .child (m/Text "Go to the details screen"))))))

(def details-screen 
  (f/widget
   :get [go/GoRouterState]
   (m/Scaffold
    .appBar (m/AppBar
             .title (m/Text "Details screen"))
    .body
    (m/Center
     .child
     (m/ElevatedButton
      .onPressed (fn [] (.go go-router '/'))
      .child (m/Text "Go to the home screen"))))))

(def router
  (g/GoRouter
   .routes [
            (g/GoRoute
             .path '/'
             .builder
             (f/build [contexr _]
                      (home-screen))
             )
            (g/GoRoute
             .path '/details'
             .builder
             (f/build [context _]
                      (details-screen)))
   ]))

(defn main []
  (f/run 
   (m/MaterialApp
    .theme theme
    .home (fn [] (g/navigate "/"))
    .router-config router)))

[cgrand]

@VikSin Baptiste inadvertently copied some Dart string in the middle of some ClojureDart, all 'strings' should be "strings"

[VikSin]

And how to write this part-

Widget build(BuildContext context) {
    return MaterialApp.router(
      routerConfig: _router,
    );
  }

[cgrand]

(f/widget
  :context ctx
  (m/MaterialApp.router .routerConfig your-router))

Instead of the whole class MyApp extends...

[VikSin]

Not getting any error but getting complete blank screen.

And Question: Doesn't m/MaterialApp part will be inside f/run? And If I have to include other config like theme for inside MaterialApp How I will do that here?

This go_router example is little bit different that other sample examples so getting confuse a lot here. I'm just started learning this things.

here full code-

(ns app.main
  (:require ["package:flutter/material.dart" :as m]
            ["package:go_router/go_router.dart" :as g]
            [cljd.flutter :as f]))

(def theme
  (m/ThemeData
   .colorSchemeSeed m/Colors.yellow
   .useMaterial3 true
   .textTheme (m/TextTheme
               .displayLarge (m/TextStyle
                              .fontWeight m/FontWeight.w700
                              .fontSize 24
                              .color m/Colors.black))))

(def home-screen 
  (f/widget 
   :context ctx
   (m/Scaffold
    .appBar (m/AppBar 
             .title (m/Text "Home screen"))
    .body 
    (m/Center
     .child
     (m/ElevatedButton
      .onPressed (fn [] (-> ctx g/GoRouterHelper (.go "/details")))
      .child (m/Text "Go to the details screen"))))))

(def details-screen 
  (f/widget 
   :context ctx
   (m/Scaffold
    .appBar (m/AppBar
             .title (m/Text "Details screen"))
    .body
    (m/Center
     .child
     (m/ElevatedButton
      .onPressed (fn [] (-> ctx g/GoRouterHelper (.go "/details")))
      .child (m/Text "Go to the home screen"))))))

(def router
  (g/GoRouter 
   .initialLocation "/"
   .routes [
            (g/GoRoute
             .path "/"
             .builder home-screen 
             )
            (g/GoRoute
             .path "/details"
             .builder details-screen)
   ]))

(defn main []
  (f/widget
   :context ctx
   (m/MaterialApp.router .routerConfig router)))

[cgrand]

In main, replace f/widget by f/run since it's the entry point. You can also remove the :context ctx line since ctx is not used.

[VikSin]

I have tried f/run and without :context ctx also getting errors-

══╡ EXCEPTION CAUGHT BY WIDGETS LIBRARY ╞═══════════════════════════════════════════════════════════
The following _Exception was thrown building Builder(dirty):
Exception: No extension of protocol IFn found for type home_screenReify4wk9ma$1.

The relevant error-causing widget was:
  Builder
  Builder:file:///home/vikash/.pub-cache/hosted/pub.dev/go_router-14.0.2/lib/src/builder.dart:256:9

[dupuchba]

@VikSin I just added go_router sample. If we have time we'll add a pure cljd one without an external lib https://github.com/Tensegritics/ClojureDart/tree/main/samples/go_router