Flutter android back button

Flutter: Disabling Android System Back Button

October 14, 2021

October 29, 2021

October 14, 2021

There might be cases where you want to programmatically disable the Android system back button on some specific screens in a Flutter application. This article shows you how to do it.

Table of Contents

What Is The Point?

To prevent the Android back button from doing its job on a screen, what we need to do is to wrap this screen within a WillPopScope widget and set the onWillPop parameter like this: Advertisements

For more clarity, please see the complete example below.

Example

App Preview

The demo app we are going to make contains 2 pages: HomePage and OtherPage. You can use the button on HomePage to navigate to OtherPage. The Android system back button is disabled so you won’t go back to HomePage when you press it. Instead, a snack bar will show up and bring a message.

Here’s how it works:

The Complete Code

Conclusion

We’ve examined a full example of using the WillPopScope widget to prevent the user from using the Android system back button on a specific screen. If you’d like to learn more modern stuff in Flutter and mobile development, take a look at the following articles:

References

You can find more information about the WIllPopScope widget and Android navigation principles in the official documentation:

Источник

How to Deactivate or Override the Android “BACK” Button In Flutter?

Sometimes in Flutter if you press the Back arrow at the bottom of the android screen, you go back to page one. You may want this button to not show up at all. So, in today’s article, we’ll see How to Deactivate or override the Android “BACK” Button in flutter?

How to Deactivate or Override the Android “BACK” Button in Flutter?

WillPopScope() – It will prevent the page from being popped by the system. You’ll still be able to use Navigator.of(context).pop().

You can also take a look at the working example which is shown below.

The code snippet will look like the below:

You can use future.value() to handle the back button.

You can also use mixin instead of the WillPopScope Widget. This is the best approach to solve the problem rather than using WillPopScope().

Used it like this inside appbar:

Moreover, just add a container in the leading of the Appbar Widget which hides the back button.

You can also use Future.value(bool) to handle the back button.

Conclusion:

Thanks for being with us on a Flutter Journey .

So, In this article, we have seen How to deactivate or override the android “BACK” button in flutter? Feel free to comment if you have any doubts regarding the articles. You can also provide your valuable insights regarding the articles.

Keep Learning . Keep Fluttering .

Flutter Agency is our portal Platform dedicated to Flutter Technology and Flutter Developers. The portal is full of cool resources from Flutter like Flutter Widget Guide, Flutter Projects, Code libs and etc.

Flutter Agency is one of the most popular online portals dedicated to Flutter Technology. Daily thousands of unique visitors come to this portal to enhance their knowledge of Flutter.

Источник

Android back button exits app #8163

Comments

Reagankm commented Feb 14, 2017 •

Steps to Reproduce

I’m building a MaterialApp and using Navigator.pushNamed() for navigation but pressing the Android back button exits the app rather than going to the previous page.

Here’s a short example app I threw together. If you press the button to navigate to the second page, then push the Android back button it exits the app. (This is running on a Nexus 5x x86 AVD emulator)

The text was updated successfully, but these errors were encountered:

eseidelGoogle commented Feb 15, 2017

eseidelGoogle commented Feb 23, 2017

@abarth just fixed #8258 which may have been related.

eseidelGoogle commented Feb 23, 2017 •

I just tested with 093afe0 on my physical nexus 5 device and it works as expected. I suspect this was fixed by @abarth’s change or other recent navigator changes. Next time @tvolkert or another team member makes an internal release your example should work! 🙂

christian-lefty commented Mar 14, 2017

Just a note to save time in case someone lands here:

It seems that this functionality is provided by io.flutter.app.FlutterActivity,
it has this:

Observing this bug probably means that the main activity is not inheriting from FlutterActivity
(for instance that would be the case if you copied the hello_services example before 02/13/2016).

samvictor commented Aug 18, 2017 •

This is what worked for me:

change
class _BossManState extends State <

to
class _BossManState extends State with WidgetsBindingObserver <

and add the following code to that same state class:

As for capturing it, add your code into didPopRoute() or look into using the Navigator
‘Navigator.of(context).pushNamed(‘/nextscreen’);’

You can use this to push another screen over the current one so that when a user presses ‘back’, it will go back to the previous screen.

BTW, I’ve found that didPopRoute() doesn’t work in debug mode, only release mode. To run in release mode, do flutter run —release . Also, it seems that errors in didPopRoute() break silently and just stop working.

Источник

Как деактивировать или переопределить кнопку Android «НАЗАД» во Флаттере?

Есть ли способ отключить кнопку возврата Android на определенной странице?

На странице у меня есть кнопка для перехода на страницу:

Моя проблема в том, что если я нажму стрелку Назад в нижней части экрана Android, я вернусь на страницу One. Я бы хотел, чтобы эта кнопка вообще не появлялась. В идеале я бы не хотел выходить из этого экрана, если, например, пользователь не удерживает палец на экране в течение 5 секунд. (Я пытаюсь написать приложение для малышей, и хотел бы, чтобы только родители могли перемещаться из определенного экрана).

9 ответов

Ответ WillPopScope . Это предотвратит появление страницы системой. Вы все еще сможете использовать Navigator.of(context).pop()

Я использовал миксин и виджет WillPopScope, но не смог выполнить свою работу за меня. Это лучший подход, который я нашел, на мой взгляд, намного лучше, чем WillPopScope.
final bool canPop = ModalRoute.of(context)?.canPop ?? false;
Использовал это так внутри панели приложений:

Как отметил Реми Русселе, WillPopScope обычно — путь. Однако, если вы разрабатываете виджет с отслеживанием состояния, который должен напрямую реагировать на кнопку возврата, вы можете использовать это:

Вы можете использовать Future.value(bool) для обработки кнопки возврата.

Вы можете использовать следующий метод:

Надеюсь это поможет. Благодарность

Хотя ответ Реми правильный, обычно вы не хотите просто блокировать кнопку возврата, а хотите, чтобы пользователь подтвердил выход.

Вы можете сделать это аналогичным образом, получив ответ в диалоговом окне подтверждения, потому что onWillPop — это будущее.

Возможно, вы знали, что вы используете WillPopScope , но, к сожалению, в IOS вы не можете провести назад в предыдущем страницы, так что давайте настроим ваш MaterialPageRoute:

Теперь вы можете использовать WillPopScope и проведите назад для работы в IOS. Подробный ответ здесь: https://github.com/flutter/flutter/ вопросы / 14203 # issuecomment — 540663717

Просто добавьте контейнер в начало панели приложений, которая скрывает кнопку возврата.

Источник

Основы Flutter для начинающих (Часть III)

Поздравляю, по крайней мере, всех живущих в Сибири с наступлением лета!)))

Сегодня довольно непростая тема — навигация.

Мы рассмотрим как устроена навигация в Flutter, что вообще нужно чтобы перейти с одного экраны на другой и конечно же не забудем о передачи аргументов между экранами.

И напоследок весьма распространенный use case: создание BottomNavigationBar.

‘Ну что ж не будем терять ни минуты, начинаем!

Часть 1 — введение в разработку, первое приложение, понятие состояния;

Часть 2 — файл pubspec.yaml и использование flutter в командной строке;

Часть 3 (текущая статья) — BottomNavigationBar и Navigator;

Часть 4 — MVC. Мы будем использовать именно этот паттерн, как один из самых простых;

Часть 5 — http пакет. Создание Repository класса, первые запросы, вывод списка постов;

Часть 6 — работа с формами, текстовые поля и создание поста.

Часть 7 — работа с картинками, вывод картинок в виде сетки, получение картинок из сети, добавление своих в приложение;

Часть 8 — создание своей темы, добавление кастомных шрифтов и анимации;

Часть 9 — немного о тестировании;

Navigator и стэк навигации

Flutter довольно прост в плане навигации, здесь нет фрагментов и Activity.

Все довольно просто: каждая страница это виджет, который называется Route.

Навигация осуществляется через объект Navigator:

Рассмотрим стэк Navigator’a на конкретном примере.

У нас есть два экрана: список книг и информация о книге.

Первый экран, который появится при запуске приложения — это список книг:

Затем мы переходим на страницу с информацией об одной из книг:

В этот момент наша новая страница находится на вершине стэка и поэтому мы не имеем доступа к списку книг.

Далее мы нажимаем кнопку Back или Up (стрелка в левом верхнем углу) и снова возвращаемся к первоначальному состоянию:

В первом случае нужно использовать push(route) , во втором pop() метод.

Переходим непосредственно к практике!

Создание навигации между двумя экранами

Сделаем небольшой список персонажей из сериала My Little Pony с переходом на страницу описания каждого персонажа.

Для начала создадим новую страницу в папке pages:

Затем напишем немного кода:

Обратите внимание, что в Dart можно определять переменные вне классов, как в нашем случае со списком.

Теперь переходим к созданию PonyDetailPage:

Осталось только организовать саму навигацию.

Добавьте следующий код в PonyListPage:

Также не забудем заменить домашнюю страницу:

Запуск

Теперь кликаем на любой элемент:

Та дам! Мы также можем вернуться обратно, если нажмем кнопку Back или стрелку в левом верхнем углу.

Также можно реализовать свою логику обратного перехода:

Пока на этом все. О навигации можно написать целый цикл статей.

Ещё пара слов о нововведениях: появился новый Navigator API 2.0, о котором есть довольно хорошая статья.

Мы останавливаться не будем и переходим к BottomNavigationBar.

BottomNavigationBar и свои Navigator’ы

Я 100% уверен, что вы встречали нижнее меню, по которому можно переходить на различные экраны:

Здесь вы можете увидеть четыре элемента меню (домашная страница, поиск, уведомления и сообщения).

Давайте реализуем что-нибудь похожее.

Сначала создадим новую папку models, а в ней файл tab.dart :

Затем создадим класс Tab и перечисление TabItem :

Переходим к более сложной части, реализации главной страницы:

Данной подход состоит в том, что мы создаем отдельный Navigator для постов, альбомов и заданий, у каждого из них будет свой стэк навигации.

Далее с помощью виджета Offstage мы показывает только тот экран, который был выбран.

Также мы переопределили нажатие на кнопку back — WillPopScope .

Теперь создадим нижнее меню в новом файле bottom_navigation.dart :

И реализуем TabNavigator (tab_navigator.dart) :

Также не забудьте заменить домашнюю страницу в main.dart файле:

Осталось только импортировать нужные классы в home_page.dart и вуаля:

Также хорошей практикой является правильная организация кода, поэтому в папке pages создадим новую папку home и перетащим туда два наших файлика:

И напоследок сделаем три страницы заглушки: PostListPage, AlbumListPage и TodoListPage:

Та же структура и для двух остальных.

После этого укажим их в TabNavigator’e :

Заключение

Искренне рад и благодарен вам за хорошие отзывы и за поддержку!

Источник