Question 252010 in Flutter Question posted in
The official Flutter documentation can be found here.

Flutter – Rebuilding issue when I declare MediaQuery within the build function

import 'package:bug_fix/home_screen.dart';
import 'package:flutter/material.dart';

void main() {
runApp(const MyApp());
}

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

@OverRide
Widget build(BuildContext context) {
return const MaterialApp(
home: HomeScreen(),
);
}
}

import 'dart:developer';
import 'package:flutter/material.dart';

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

@OverRide
Widget build(BuildContext context) {
log('Building home screen');
// Variable to find the size of the device screen.
final Size size = MediaQuery.of(context).size;
return Scaffold(
body: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
TextFormField(),
],
),
);
}
}
  1. Create a normal stateless widget.
  2. Write MediaQuery within the build function.
  3. The MediaQuery is final Size size = MediaQuery.of(context).size;
  4. Write a log within the build function log(‘Build function called’);.
  5. Write a column on the body of the Scaffold.
  6. Set mainAxisAlignment to center.
  7. Create a textformfiled.
  8. Open/ Focus the textformfiled then the build function will rebuild multiple times.

I understood that it is because, of a change in the size of the device screen when I open the textformfiled.

Tags:

2

Answers


  1. 0

    The issue you’re experiencing, where the build function of your widget is being called multiple times when you open/focus the TextFormField, is expected behavior in Flutter. The build method is called whenever the widget needs to be rebuilt, which can happen for various reasons, including changes in the widget’s state or changes in the widget tree.

    In your case, when you open/focus the TextFormField, it might trigger a rebuild of its parent widget because the size of the device screen may change when the keyboard is displayed. This is why you see the "Building home screen" log message multiple times.

    If you want to avoid unnecessary rebuilds of the HomeScreen widget, you can consider using a StatefulWidget and managing the widget’s state. By doing this, you can control when the rebuild should occur.

    Here is a possible solve of it:

    import 'dart:developer';
import 'package:flutter/material.dart';

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

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

class _HomeScreenState extends State<HomeScreen> {
  @override
  Widget build(BuildContext context) {
    log('Building home screen');
    final Size size = MediaQuery.of(context).size;

    return Scaffold(
      body: Column(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          TextFormField(),
        ],
      ),
    );
  }
}

    By using a StatefulWidget, the build method will only be called when you explicitly call setState, allowing you to control when you want the widget to rebuild.

    Login or Signup to reply.
  2. 0

    There are few issues to fix:

    1. The @OverRide annotations are incorrect. They should be @override (with a lowercase ‘o’).
      While debugging it should show the error???

    2. The super.key in the constructor parameters is not needed. You can remove it.

    3. You have a typo in the MyApp class constructor. Instead of const MyApp({super.key});, it should be const MyApp({Key? key}) : super(key: key);.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search