Flutter scaffold updated entire page when update on appbar

Viewed 2026

So I have a scaffold with body is a list view. And I have an appbar that manage its stage. Here my appbar code :

import 'package:flutter/material.dart';

class HgAppBar extends StatefulWidget implements PreferredSizeWidget {
  final String title;
  final List<Widget> actions;

  HgAppBar({this.title, this.actions, Key key}) : super(key: key);

  @override
  HgAppBarState createState() => HgAppBarState();

  @override
  Size get preferredSize => new Size.fromHeight(kToolbarHeight);
}

class HgAppBarState extends State<HgAppBar> {
  bool _searchOpenned = false;
  void openSeach() {
    setState(() {
      _searchOpenned = true;
    });
  }

  void closeSearch() {
    setState(() {
      _searchOpenned = true;
    });
  }

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return AppBar(
      title: _searchOpenned
          ? TextField(
              decoration: InputDecoration(
                filled: true,
                border: null,
                fillColor: Colors.white,
              ),
              autofocus: true,
            )
          : Text(widget.title ?? 'No title'),
      actions: _searchOpenned
          ? [
              IconButton(
                icon: Icon(Icons.close),
                onPressed: () {
                  setState(() {
                    _searchOpenned = false;
                  });
                },
              )
            ]
          : widget.actions,
    );
  }
}

And here my page code:

class PageSales extends StatefulWidget {
  final Store<AppState> store;
  final String title;
  final bool usePop;
  PageSales(this.store, {this.title, this.usePop = false});
  @override
  State<StatefulWidget> createState() => _PageSales();
}

class _PageSales extends State<PageSales> {
  final appBarKey = GlobalKey<HgAppBarState>();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: HgAppBar(
        key: appBarKey,
        title: Localizations.of(context, AppLoc).text('sales_plus'),
        actions: [
          IconButton(
            icon: Icon(Icons.search),
            onPressed: () {
              appBarKey.currentState.openSeach();
            },
          )
        ],
      ),
      body: SafeArea(
        child: Column(children: <Widget>[
          Expanded(
            child: FireStoreListView(
              snapshot: HgFirestore.instance.productCollection.snapshots(),
              itemBuilder: (context, doc) {
                return WidgetProductItem(
                    widget.store, ProductModel.fromDocument(doc));
              },
            ),
          ),
        ]),
      ),
    );
  }
}

so the problem is when I call the openSearch, my entire scaffold get refresh (I know it because my ListView is flashing). How do I can update my appbar without refreshing entire scaffold?

1 Answers

I tried your code and it seems to be fine. The screen doesn't rebuild, I'm using Flutter 2.2. I suggest adding debugPrint to make sure that the screen does get rebuild, ListView flashing isn't a definite indicator that the entire screen gets rebuild.

Related