最适合在Flutter移动应用中处理多个路由/页面和自定义模板的方法是什么?

huangapple go评论70阅读模式
英文:

What is the best approach for many routes / pages and self-made template in Flutter, for mobile?

问题

I started to build an app in Android Studio using Flutter (Dart). I want to insert into the app a summary of the two books, so one it will have 35 routes (or pages) and the other another 35 routes (or pages).

At this moment my app looks like this: I have a Intro_Page with a button that routes to the Main_Page. From the Main_Page there are two buttons: one for BookA, the other for BookB. After entering the BookA the user, after the text, will find another button to the next page, BookA_1 and on this page another button to BookA_2 etc.

My question are:

  1. Is there any way to use a template that can be reused for each page?

  2. I have to put all the code into the main.dart file or I can make a dart file for each page and navigate between them with buttons?

  3. Is there any possible way to create a self-made template that it uses the design layout in all the pages so I don't have to rewrite the code for one of each? Just the layout not the content (the text).

  4. Is there any other better way to do this?

PS: Any other suggestion will be helpful.

Thank you very much if you answer this question!

英文:
  • I started to build an app in Android Studio using Flutter (Dart). I
    want to insert into the app a summary of the two books, so one it will have
    35 routes (or pages) and the other another 35 routes (or pages).
  • At this moment my app looks like this: I have a Intro_Page with a
    button that routes to the Main_Page. From the Main_Page there are
    two buttons: one for BookA, the other for BookB. After entering the BookA the user, after the text, will find another
    button to the next page, BookA_1 and on this page another button
    to BookA_2 etc.

My question are:

  1. Is there any way to use a template that can be reused for each page?

  2. I have to put all the code into the main.dart file or I can make a dart file for each page and navigate between them with
    buttons?

  3. Is there any possible way to create a self-made template that it uses the design layout in all the pages so I don't have to rewrite the code for
    one of each? Just the layout not the content (the text).

  4. Is there any other better way to do this?


PS: Any other suggestion will be helpful.

Thank you very much if you answer this question!

答案1

得分: 3

你可以创建一个通用的路由类,在其中可以简化导航代码。

你可以创建一个类似这样的类

import 'package:flutter/material.dart';

class MyNavigator {
  static navigate({BuildContext context, Widget page}) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (_) {
        return page;
      }),
    );
  }
}

然后像这样使用它

MyNavigator.navigate(context: context, page: BookA());

我希望这对你有所帮助。

另外,你也可以使用扩展方法。

为了使其工作,你需要至少使用Dart 2.7版本!

扩展方法的实现如下

import 'package:flutter/material.dart';

extension NavigatorHelper on Widget {
  goHere(BuildContext context) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => this),
    );
  }
}

然后你可以这样使用它

BookA().goHere(context);

在我看来,扩展方法是一个不错的方式。你可以两者都使用。

英文:

You can create one generic class for routing, in that you can just reduce the navigation code.

You can create one class like this

import 'package:flutter/material.dart';

class MyNavigator {
  static navigate({BuildContext context, Widget page}) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (_) {
        return page;
      }),
    );
  }
}

And use it as

MyNavigator.navigate(context: context, page: BookA());

I hope it will help you.

------------------------------------ UPDATE ---------------------------------

Also you can use extension methods as well.

> For this to work, you'll need Dart 2.7 minimum!

Implementation for extension method is as follows

import 'package:flutter/material.dart';

extension NavigatorHelper on Widget {
  goHere(BuildContext context) async {
    await Navigator.of(context).push(
      MaterialPageRoute(builder: (_) => this),
    );
  }
}

And you can use it as

BookA().goHere(context);

In my opinion extension method is good way.
You can use both.

huangapple
  • 本文由 发表于 2020年1月3日 17:31:02
  • 转载请务必保留本文链接:https://go.coder-hub.com/59576038.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定