web-dev-qa-db-ja.com

Flutter Webアプリにパラメーターを渡す方法

トピックについて何時間も検索した後、Flutter Webのドキュメントが不足しているため、この質問をしています。

フラッターを使用するWebアプリを作成しようとしていて、以下のようなURLが必要でした

website.com/user/someUserCode

が呼び出され、データ（someUserCode）がページに渡されるページが起動されます

しかし、それを解決するための解決策はまだありません。

全部切り上げるだけで

（get/post）メソッドを使用してデータを渡し、Webアプリをフラッターする方法

編集1

私が知っているすべて/まだ試したこと

以下のコードを使用して、一部のパラメーターが一部のクラスファイルに読み込まれているかどうか

final Map<String, String> params = Uri.parse(html.window.location.href).queryParameters;
String data = params["userData"];

これで実際に私の質問のFetch部分が解決されます（多分）

ただし、そのデータがURL経由でページに渡される部分はまだありません。

編集2

返信がなく、何も見つからなかったので、Flutter GitHubページでチケットを上げました here

同じ問題を探している他の人はそれを追跡できます（解決された場合）

flutterflutter-web
9
Vicky Salunkhe

onGenerateRouteからすべて（パス、パラメーターなど）を取得できます。 Homeは_/_になり、そこからのすべてを取得してユーザーのリダイレクトに使用できます。

これを解決するための私のアプローチは次のとおりです。あなたのベースApp()は次のようになります：

_class App extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Website Title',
      onGenerateRoute: (settings) => NavigatorRoute.route(settings.name),
    );
  }
}
_

そしてclassNavigatorRouteは次のようになります：

_class NavigatorRoute extends StatefulWidget {
  final String path;

  static Route<dynamic> route(String path) {
    return SimpleRoute(
      name: '', // this one is always empty as you didn't route yet
      title: 'Website Title',
      builder: (_) => NavigatorRoute(path: path),
      animated: false
    );
  }

  const NavigatorRoute({Key key, this.path}) : super(key: key);

  @override
  _NavigatorRouteState createState() => _NavigatorRouteState();
}

class _NavigatorRouteState extends State<NavigatorRoute> {

  @override
  void initState() {
    super.initState();
    Future.delayed(Duration(milliseconds: 0), () {
      if (widget.path == '/') {
        Navigator.of(context).pushAndRemoveUntil(HomeScreen.route(false), (_) => false);
        return;
      } else if (widget.path == '/user') {
        Navigator.of(context).pushAndRemoveUntil(UserScreen.route(false), (_) => false);
        return;
      } else if (widget.path.contains('/user/')) {
        Navigator.of(context).pushAndRemoveUntil(UserScreen.routeCode(widget.path.split('/')[2]), (_) => false);
        return;
      } else if (widget.path == '/about') {
        Navigator.of(context).pushAndRemoveUntil(AboutScreen.route(), (_) => false);
        return;
      } else {
        Navigator.of(context).pushAndRemoveUntil(HomeScreen.route(), (_) => false);
        return;
      }
    });
  }

  @override
  Widget build(BuildContext context) {
    return SizedBox();
  }
}
_

SimpleRouteのコードは次のとおりです。

_class SimpleRoute extends PageRoute {
  SimpleRoute({@required String name, @required this.title, @required this.builder, @required this.animated})
      : super(settings: RouteSettings(name: name));

  final String title;
  final WidgetBuilder builder;

  final bool animated;

  @override
  Color get barrierColor => null;

  @override
  String get barrierLabel => null;

  @override
  bool get maintainState => true;

  @override
  Duration get transitionDuration => Duration(milliseconds: 200);

  @override
  Widget buildPage(BuildContext context, Animation<double> animation, Animation<double> secondaryAnimation) {
    return animated
        ? FadeTransition(
            opacity: animation,
            child: Title(
              title: this.title,
              color: Theme.of(context).primaryColor,
              child: builder(context),
            ),
          )
        : Title(
            title: this.title,
            color: Theme.of(context).primaryColor,
            child: builder(context),
          );
  }
}
_

したがって、最後に...画面の1つを簡単に開きたい場合は、次のようにします。

_class HomeScreen extends StatefulWidget {
  static Route<dynamic> route(bool animated) {
      return SimpleRoute(name: '/', title: 'Home', builder: (_) => HomeScreen(), animated: animated);
  }

  @override
  _HomeScreenState createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
...
}
_

routeCodeは次のようになります：

_static Route<dynamic> routeCode(String id) {
     return SimpleRoute(name: '/user/$id', title: 'User', builder: (_) => UserScreen(id: id), animated: false);
}
_

これを行う主な利点は、最後の画面にアクセスして生成されるページのスタックを回避することです。

たとえば、「www.mywebsite.com/user/userId/edit」のonGenerateRouteを直接使用している場合、Flutterが開きます。

  • ホーム画面
  • ユーザー画面
  • UserId画面
  • 画面編集

ただし、この方法では、「編集画面」のみが開きます。

1
Mariano Zorrilla

@Mariano Zorrillaから上記の方法を試しましたが、ページは順番に開かれました。

/
/user
/user/yFbOfUAwx1OCC93INK8O7VqgBXq2

私は Fluro を見つけ、効率的かつクリーンに機能します。ルーティングするすべてのページを編集するのではなく、1つのルーティングファイルを追加してすべてのルーティングを1つのファイルで実行するだけです。これを実装する方法を次に示します。 ：

main.Dart

void main() {
  FluroRouter.setupRouter();
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Website Title',
      onGenerateRoute: FluroRouter.router.generator
    );
  }
}

fluro_router.Dart

class FluroRouter {
  static Router router = Router();
  //Define  your routers here
  static void setupRouter() {
    router.define('/', handler: _homeHandler);
    router.define('/login', handler: _loginHandler);
    router.define('/online-enquiry/:id', handler: _userHandler);
  }
  //Add your handlers here
  static Handler _homeHandler = Handler(handlerFunc: (context, Map<String, dynamic> params) => Home());
  static Handler _loginHandler = Handler(handlerFunc: (context, Map<String, dynamic> params) => Login());
  static Handler _userHandler = Handler(handlerFunc: (context, Map<String, dynamic> params) => UserProfile(userID: params['userId'].first));
}

ソース

0
Jackson Lee