on back press in flutter it throws me out of the application how to resolve this issue without using will pop class

Issue

Whenever i pressed back button in my app it throws me out of the application so what will i do to got to previous page whenever system back button is pressed?

The main problem is whenever i go to second or third screen if i press the back button of my phone it throws me out of the app what i need is when back button is pressed it navigate to previous screen without using onwillpop

import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:ui_kit/Menu/ScreenList.dart';

class HomeScreen extends StatefulWidget {
  HomeScreen();

  @override
  HomeScreenState createState() => new HomeScreenState();
}

class HomeScreenState extends State<HomeScreen>
    with SingleTickerProviderStateMixin {
  late TabController _tabController;
  late ScrollController _scrollController;

  @override
  void initState() {
    _tabController = TabController(length: 5, vsync: this);
    _scrollController = ScrollController();
    super.initState();
  }

  @override
  void dispose() {
    _scrollController.dispose();
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(
      // navigation bar color
      statusBarColor: Colors.white, // status bar color
      statusBarBrightness: Brightness.light, //status bar brigtness
      statusBarIconBrightness:
          Brightness.light, //status barIcon Brightness//navigation bar icon
    ));
    return Scaffold(
      backgroundColor: Colors.white,
      body: NestedScrollView(
        controller: _scrollController,
        headerSliverBuilder: (BuildContext context, bool innerBoxIsScroller) {
          return <Widget>[
            SliverAppBar(
              title: Center(
                child: Padding(
                  padding:
                      const EdgeInsets.only(top: 30.0, bottom: 25, left: 110.0),
                  child: Row(
                    children: [
                      Icon(
                        Icons.view_in_ar,
                        color: Colors.black,
                        size: 30.0,
                      ),
                      Text(
                        " Food",
                        style: TextStyle(
                            color: Colors.black,
                            fontFamily: 'Yellow',
                            fontSize: 30.0),
                      )
                    ],
                  ),
                ),
              ),
              pinned: true,
              floating: false,
              backgroundColor: Colors.white,
              brightness: Brightness.light,
              bottom: TabBar(
                indicatorColor: Colors.black,
                isScrollable: true,
                indicatorSize: TabBarIndicatorSize.tab,
                indicatorWeight: 4,
                unselectedLabelColor: Colors.grey[500],
                labelColor: Colors.black,
                tabs: [
                  Tab(text: "orders"),
                  Tab(text: "Setting"),
                  Tab(text: "HOme"),
                  Tab(text: "Integrations"),
                  Tab(text: "qwer"),
                ],
                controller: _tabController,
              ),
            ),
          ];
        },
        body: TabBarView(
          children: [
            ScreenList(),
            ScreenList(),
            ScreenList(),
            ScreenList(),
            ScreenList(),
          ],
          controller: _tabController,
        ),
      ),
    );
  }
}

Solution

There is no way you can override the back button except by using the WillPopScope !

you can manage to make a alert dialog asking the user if he wants to get out of the app !

I think this is the best approach .

Answered By – Fahmi Sawalha

Answer Checked By – Katrina (FlutterFixes Volunteer)