I have two screen A and B, screen A has a bottom navigation bar.

After i pushed screen A to screen B, bottom navigation bar of screen A still pin on screen B.

I want show full screen B without bottom navigation of screen A.

This is a screen A, it has a bottom naviagtion bar:

class Parent extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'TechOne',
      theme: ThemeData(
        primarySwatch: Colors.red,
      ),
      home: MyParentPage(title: 'TechOne'),
    );
  }
}

/*StatefulWidget is Widget with mutable*/
class MyParentPage extends StatefulWidget {
  MyParentPage({Key key, this.title}) : super(key: key);

  final String title;

  @override
  _MyParentPageState createState() => _MyParentPageState();
}

/*State is a manager of StatefulWidget*/
class _MyParentPageState extends State<MyParentPage>
    with SingleTickerProviderStateMixin {
  var _itemSelected = 0;
  TabController _tabController;

  final _bodyUI = [
    HomeUI(),
    SearchUI(),
    Center(
      child: Text('Notification'),
    ),
    Center(
      child: Text('Account'),
    ),
  ];

  _onBottomNavigationBarTap(int index) {
    print(_itemSelected);
    setState(() {
      _itemSelected = index;
    });
  }

  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    _tabController = TabController(length: 4, vsync: this);
  }

  @override
  Widget build(BuildContext context) {
    _tabController.animateTo(_itemSelected);

    return Scaffold(
        bottomNavigationBar: BottomNavigationBar(
          items: Values.itemsBottomNavigationBar,
          onTap: (index) {
            _onBottomNavigationBarTap(index);
          },
          currentIndex: _itemSelected,
          selectedItemColor: Colors.red,
          backgroundColor: Colors.white,
          type: BottomNavigationBarType.fixed,
        ),
        body: TabBarView(
            physics: NeverScrollableScrollPhysics(),
            controller: _tabController,
            children: <Widget>[
              _bodyUI[0],
              _bodyUI[0],
              _bodyUI[2],
              _bodyUI[3],
            ]));
  }
}

Inside _bodyUI[0] widget, I push to screen B:

Navigator.push(context, MaterialPageRoute(builder: (context) => SearchUI()));

This is a screen B, bottom navigation bar still pin on here, i want hidden it:

class SearchUI extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return MaterialApp(
      title: 'Search',
      theme: ThemeData(primarySwatch: Colors.red),
      home: MySearchPage(),
    );
  }
}

class MySearchPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    // TODO: implement createState
    return _MySearchState();
  }
}

class _MySearchState extends State<MySearchPage> {
  final TextEditingController _textEditingController = TextEditingController();
  final FocusNode _focusNode = FocusNode();

  TextField _appBarTitle;

  @override
  void initState() {
    // TODO: implement initState
    super.initState();

    _appBarTitle = TextField(
        controller: _textEditingController,
        focusNode: _focusNode,
        autofocus: true,
        textInputAction: TextInputAction.done,
        textCapitalization: TextCapitalization.sentences,
        cursorColor: Colors.white,
        cursorRadius: Radius.circular(16),
        maxLines: 1,
        style: TextStyle(
          color: Colors.white,
        ),
        decoration: InputDecoration(
            border: InputBorder.none,
            prefixIcon: Icon(
              Icons.search,
              color: Colors.white,
            ),
            suffixIcon: IconButton(icon: Icon(Icons.clear, color: Colors.white,), onPressed: (){
              _textEditingController.clear();
            }),
            hintText: 'Search...',
            hintStyle:
                TextStyle(color: Colors.white.withOpacity(0.5), fontSize: 18)));
  }

  @override
  Widget build(BuildContext context) {
    // TODO: implement build
    return Scaffold(
      appBar: AppBar(
        title: _appBarTitle,
      ),
      body: Center(
        child: Text('Search Screen'),
      ),
    );
  }
}

1 Answers

0
Adrian Murray On

Your code is calling a SearchUI() class as one of the TabBarViews :

 final _bodyUI = [
    HomeUI(),
    SearchUI(),
    Center(
      child: Text('Notification'),
    ),
    Center(
      child: Text('Account'),
    ),
  ];

Which means it's going to only change the view and keep the bar there.