The most important Flutter 3.10 feature that nobody talks about

✍︎

Flutter Performance Tips

You can increase your app's performance drastically with just a couple of tweaks!

Flutter 3.10 is finally available, and it has a long-awaited feature (at least for me). I think using MediaQuery as an InheritedModel is one of the most important improvements in Flutter.

Let me tell you why!

Example

✍︎

We have a simple homepage with a Text widget that shows MediaQuery’s platformBrightness and a button that navigates to the details page.

home_page.dart

class HomePage extends StatelessWidget {
  const HomePage({super.key});

  @override
  Widget build(BuildContext context) {
    log('HomePage');
    return Scaffold(
      appBar: AppBar(),
      body: Center(
        child: Text(
          MediaQuery.of(context).platformBrightness.name,
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          Navigator.of(context).push(
            MaterialPageRoute(builder: (_) => const DetailsPage()),
          );
        },
      ),
    );
  }
}

We also have a details page that only has a TextField in it.

details_page.dart

class DetailsPage extends StatelessWidget {
  const DetailsPage({super.key});

  @override
  Widget build(BuildContext context) {
    log('DetailsPage');
    return Scaffold(
      appBar: AppBar(),
      body: const Center(
        child: Padding(
          padding: EdgeInsets.symmetric(horizontal: 24),
          child: TextField(
            decoration: InputDecoration(
              border: OutlineInputBorder(),
            ),
          ),
        ),
      ),
    );
  }
}

Nothing special, right?

But we have a huge problem here, actually!

The Problem

✍︎A lot of redundant rebuilds on the homepage

The problem is, even if we’re on the details page when we open/close the keyboard, the home page will rebuild on every frame because in every change, MediaQuery’s viewInsets property will update, and it will trigger the whole .of(context) listeners even though they don’t use that property at all!

But how can we fix that? How can we only listen to the platformBrightness info, not others?

Before Flutter 3.10, it was not possible to do partial listening in Flutter.