Refresh or rebuild screen in flutter

Question

I have 3 widgets as screens in my homepage. In homepage i have bottom navigation bar to navigate between these. When I active TextFormField in page one, go to screen two and return to page one TextFormField is still active.

  int _selectedIndex = 1;
  PageController? _pageController;

  @override
  void initState() {
    super.initState();
    _pageController = PageController(initialPage: 1);
  }

  @override
  void dispose() {
    _pageController!.dispose();
    super.dispose();
  }

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
      _pageController!.animateToPage(index,
          duration: const Duration(milliseconds: 300), curve: Curves.easeOut);
    });
  }

  @override
  Widget build(BuildContext context) {
    return BlocBuilder<AuthBloc, AuthState>(
      builder: (context, state) {
        return Scaffold(
          body: SizedBox.expand(
            child: PageView(
              controller: _pageController,
              onPageChanged: (index) {
                setState(() {
                  _selectedIndex = index;
                });
              },
              children: <Widget>[
                ProfileScreen(
                  user: state.user,
                ),
                const CreateQuestScreen(),
                const QuestDashboardScreen(),
              ],
            ),
          ),
          bottomNavigationBar: BottomNavigationBar(
            currentIndex: _selectedIndex,
            selectedItemColor: Colors.amber,
            unselectedItemColor: Colors.blue,
            onTap: _onItemTapped,
            iconSize: 40,
            items: const [
              BottomNavigationBarItem(
                  label: '', icon: Icon(Icons.account_circle_outlined)),
              BottomNavigationBarItem(
                  label: '', icon: Icon(Icons.add_circle_outline_rounded)),
              BottomNavigationBarItem(
                  label: '', icon: Icon(Icons.space_dashboard_outlined)),
            ],
          ),
        );
      },
    );
  }
}

And here is my screen

  bool searchScreen = false;
  String searchQuery = '';

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: PreferredSize(
          preferredSize: const Size.fromHeight(90),
          child: CustomAppBar(onChanged: (value) {
            if (value.isNotEmpty) {
              context.read<SearchUsersCubit>().searchUsers(value, context);
              setState(() {
                searchScreen = true;
                searchQuery = value;
              });
            } else {
              setState(() {
                searchScreen = false;
              });
            }
          }),
        ),
        body: Stack(
          children: [
            Column(
              children: [
                const SizedBox(height: 150),
                Center(child: Text(widget.user.username.toString())),
                const SizedBox(height: 150),
                TextButton(onPressed: () {}, child: const Text('Logout'))
              ],
            ),
            if (searchScreen) SearchContainer(searchQuery: searchQuery),
          ],
        ));
  }
}

How to make rebuild or refresh screen one when I want to go back in bottom navigation bar?

Answer 1

_pageController = PageController(initialPage: 1, keepPage: false);