Я пытаюсь найти хорошее архитектурное решение для следующей проблемы: у меня есть следующие маршруты первого уровня, которые также можно назвать макетами:
/onboarding/* -> Shows onboarding layout
/dashboard/* -> Shows dashboard layout
/overlay/* -> shows slide up overlay layout
/modal/* -> shows modal layout
Пользователь перенаправляется каждому из них в зависимости от своего состояния, действий и т.д. Я правильно понял этот этап.
Проблемы возникают, когда я хочу использовать маршруты Вторичный уровень, которые можно назвать страницами, например
/onboarding/signin -> Shows onboarding layout, that displays signin route
/onboarding/plan -> Shows onboarding layout, that displays plan options
/modal/plan-info -> Shows modal layout, over previous page (/onboarding/plan) and displays plan-information page.
Как я могу лучше всего определить/организовать их таким образом, чтобы я мог эффективно маршрутизировать макеты и страницы, которые они отображают? Обратите внимание, что всякий раз, когда я маршрутизирую страницы внутри одного макета, макет не меняется, но я хочу анимировать содержимое (страницы), которые меняются внутри него на основе маршрута.
До сих пор я добился следующих результатов:
import "package:flutter/widgets.dart";
import "package:skimitar/layouts/Onboarding.dart";
import "package:skimitar/layouts/Dashboard.dart";
Route generate(RouteSettings settings) {
Route page;
switch (settings.name) {
case "/onboarding":
page = new PageRouteBuilder(pageBuilder: (BuildContext context,
Animation<double> animation, Animation<double> secondaryAnimation) {
return new Onboarding();
});
break;
case "/dashboard":
page = new PageRouteBuilder(pageBuilder: (BuildContext context,
Animation<double> animation, Animation<double> secondaryAnimation) {
return new Dashboard();
});
break;
}
return page;
}
/* Main */
void main() {
runApp(new WidgetsApp(
onGenerateRoute: generate, color: const Color(0xFFFFFFFFF)));
}
Это маршрут к макетам на борту и на панели управления (прямо сейчас просто переносится текст контейнера). Я также считаю, что я могу использовать PageRouteBuilder
последний для анимации переходов между маршрутами? Теперь мне нужно выяснить, как сделать что-то вроде вложенного вторичного маршрутизатора внутри на борту и на панели управления.
Ниже представлено несколько визуальное представление того, чего я хочу достичь, мне нужно иметь возможность успешно маршрутизировать синие и красные биты. В этом примере, пока мы находимся под /dashboard
синий бит (макет) не изменяется, но по мере перехода от say /dashboard/home
к /dashboard/stats
красный бит (страница) должен исчезать и исчезать с новым контентом, Если мы удалимся от /dashboard/home
, чтобы сказать /onboarding/home
, красный бит (макет) должен исчезнуть вместе с его активной активной страницей и показать новый макет для навигации, и история продолжается.
EDIT Я немного поработал с подходом, описанным ниже, по сути, я определю макет внутри своего runApp
и объявит новый WidgetsApp
и проложит внутри каждого из макетов. Кажется, что это работает, но есть проблема. Когда я нажимаю "SignUp", меня перенаправляют на правильную страницу, но я также могу увидеть старую страницу ниже.
main.dart
import "package:flutter/widgets.dart";
import "package:myProject/containers/layouts/Onboarding.dart";
/* Main */
void main() {
runApp(new Onboarding());
}
Onboarding.dart
import "package:flutter/widgets.dart";
import "package:myProject/containers/pages/SignIn.dart";
import "package:myProject/containers/pages/SignUp.dart";
import "package:myProject/services/helpers.dart";
/* Onboarding router */
Route onboardingRouter(RouteSettings settings) {
Route page;
switch (settings.name) {
case "/":
page = buildOnboardingRoute(new SignIn());
break;
case "/sign-up":
page = buildOnboardingRoute(new SignUp());
break;
default:
page = buildOnboardingRoute(new SignIn());
}
return page;
}
class Onboarding extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Container(
decoration: new BoxDecoration(
color: const Color(0xFF000000),
image: new DecorationImage(
image: new AssetImage("assets/images/background-fire.jpg"),
fit: BoxFit.cover)),
child: new WidgetsApp(
onGenerateRoute: onboardingRouter, color: const Color(0xFF000000)),
);
}
}
SignUp.dart
import "package:flutter/widgets.dart";
class SignUp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return new Center(
child: new Text("Sign Up",
style: new TextStyle(color: const Color(0xFFFFFFFF))));
}
}
helpers.dart
import "package:flutter/widgets.dart";
Route buildOnboardingRoute(Widget page) {
return new PageRouteBuilder(
opaque: true,
pageBuilder: (BuildContext context, _, __) {
return page;
});
}