Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

How to write this go_router example in this? #309

Closed
VikSin opened this issue May 5, 2024 · 9 comments
Closed

How to write this go_router example in this? #309

VikSin opened this issue May 5, 2024 · 9 comments

Comments

@VikSin
Copy link

VikSin commented May 5, 2024

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
Copy link
Contributor

dupuchba commented May 6, 2024

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')))
  1. using GoRouterState.of
(f/widget :get [go/GoRouterState] ... onPressed (fn [] (.go go-router '/details')))
  1. using the extension method syntax
.onPressed (fn [] (-> ctx go/GoRouterHelper (.go "/details")))

@VikSin
Copy link
Author

VikSin commented May 6, 2024

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
Copy link
Contributor

cgrand commented May 6, 2024

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

@VikSin
Copy link
Author

VikSin commented May 6, 2024

And how to write this part-

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

@cgrand
Copy link
Contributor

cgrand commented May 6, 2024

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

Instead of the whole class MyApp extends...

@VikSin
Copy link
Author

VikSin commented May 7, 2024

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
Copy link
Contributor

cgrand commented May 7, 2024

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
Copy link
Author

VikSin commented May 7, 2024

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
Copy link
Contributor

dupuchba commented May 7, 2024

@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

@dupuchba dupuchba closed this as completed May 7, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants