英文:
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:
-
Is there any way to use a template that can be reused for each page?
-
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?
-
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).
-
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:
-
Is there any way to use a template that can be reused for each page?
-
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? -
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). -
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.
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论