Знаете ли вы, что можете выполнять бесконтекстнуюнавигацию во Flutter, но подождите… если вы думаете, что я расскажу вам о состоянии Getx Решение для управления, вы ошибаетесь. Вместо этого мы немного рассмотрим более эффективное решение для маршрутизации. Итак, начнем.
Оглавление
1- Бесконтекстная навигация во Flutter
2- Практические примеры (сценарии)
- Бесконтекстная навигация во Flutter
Прежде чем я начну вступление, позвольте мне немного рассказать об основных моментах.
Большинство разработчиков не знают о хороших практиках Flutter и склонны выдавать неверные результаты только для того, чтобы сдать проект в установленный срок.
Кроме того, если вы только начали работать с Flutter, это нормально, но в остальном мы должны обеспечить наилучший результат. (и для нашего внутреннего удовлетворения). Что вы думаете?
В свете всеобщего внимания маршрутизация без контекста была бы отличным подходом, который разработчик мог бы использовать в качестве обучения.
Как мы это делаем?
Давайте перейдем к следующему разделу и посмотрим на него глубже.
- Практические примеры (сценарии)
Нам нужен NavigatorStateKey для обработки таких ситуаций.
Я знаю, что до сих пор было достаточно теории, и это наверняка прозвучало бы скучно.. 😉 так что давайте немного кода.
Каков сценарий?
Ну, я бы взял двухстраничное приложение с текстом и кнопкой в маршрут.
Вот основные этапы требований, которые нам нужны:
Создайте новый файл dart как «route_generator», чтобы определить все маршруты, связанные с проектом Flutter.
route_generator.dart
class RouteGenerator {
static Route<dynamic> generateRoutes(RouteSettings settings) {
switch(settings.name) {
case '/':
return MaterialPageRoute(builder: (context) => ScreenOne());
case '/screen2':
return MaterialPageRoute(builder: (context) => ScreenTwo());
default:
return MaterialPageRoute(builder: (context) => Scaffold(
body: Center(
child: Text("Not found ${settings.name}"),
),
));
}
}
}
Следующим шагом является определение службы навигации, которая будет иметь функцию для маршрутизации без контекста.
navigation_serive.dart
class NavigationService {
final GlobalKey<NavigatorState> navigatorKey = GlobalKey<NavigatorState>();
dynamic routeTo(String route, {dynamic arguments}) {
return navigatorKey.currentState?.pushNamed(route, arguments: arguments);
}
dynamic goBack() {
return navigatorKey.currentState?.pop();
}
}
Как видите, это просто и эффективно.
После того, как мы закончим с этими файлами, пришло время использовать их на экранах.
Экран первый:
build(BuildContext context) {
//Define object
NavigationService service = NavigationService();
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Route to Screen2"),
ElevatedButton(onPressed: () {
service.routeTo('/screen2', arguments: 'just a test');
}, child: Text("Continue")),
],
),
),
);
}
Экран второй:
build(BuildContext context) {
//Define object
NavigationService service = NavigationService();
return Scaffold(
body: Center(
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Text("Route to Screen1"),
ElevatedButton(onPressed: () {
service.goBack();
}, child: Text("Back")),
],
),
),
);
}
После завершения остается одно:
Нам нужно определить следующее для MaterialApp:
- Ключ навигации
- Генератор маршрутов
- Маршрут по умолчанию
return MaterialApp(
debugShowCheckedModeBanner: true,
onGenerateRoute: RouteGenerator.generateRoutes,
initialRoute: '/',
navigatorKey: NavigationService().navigatorKey,
);
Вот и все!
Надеюсь, вам понравилось читать это.
Однако я также пролил свет на другие методы маршрутизации.
Вы можете найти их здесь:
Если я что-то пропустил, дайте мне знать в разделе ответов Medium.
Кроме того, дайте мне знать, если у вас есть какие-либо предложения для моей следующей статьи.
P.S. У меня есть собственный канал на YouTube, на который я загружаю контент, связанный с Flutter Series, GitHub и т. д. Если вы найдете материалы своего типа, ставьте лайк, делитесь и подписывайтесь, так как это мотивирует меня создавать для вас больше! Спасибо.
